diff options
| -rw-r--r-- | quotes/public/index.html | 12 | ||||
| -rw-r--r-- | quotes/public/script.js | 8 | ||||
| -rw-r--r-- | quotes/public/style.css | 22 |
3 files changed, 28 insertions, 14 deletions
diff --git a/quotes/public/index.html b/quotes/public/index.html index b2e4fa2..ae95468 100644 --- a/quotes/public/index.html +++ b/quotes/public/index.html @@ -32,17 +32,17 @@ </form> <button id="open_TGI13.1">TGI13.1</button> - <ul style="display: none;" id="TGI13.1"></ul> + <ul style="display: none" id="TGI13.1"></ul> <button id="open_TGI13.2">TGI13.2</button> - <ul style="display: none;" id="TGI13.2"></ul> + <ul style="display: none" id="TGI13.2"></ul> <button id="open_TGM13.1">TGM13.1</button> - <ul style="display: none;" id="TGM13.1"></ul> + <ul style="display: none" id="TGM13.1"></ul> <button id="open_TGM13.2">TGM13.2</button> - <ul style="display: none;" id="TGM13.2"></ul> + <ul style="display: none" id="TGM13.2"></ul> <button id="open_TGTM13.1">TGTM13.1</button> - <ul style="display: none;" id="TGTM13.1"></ul> + <ul style="display: none" id="TGTM13.1"></ul> <button id="open_teacher">Lehrer</button> - <ul style="display: none;" id="teacher"></ul> + <ul style="display: none" id="teacher"></ul> </main> <script src="script.js" charset="utf-8"></script> diff --git a/quotes/public/script.js b/quotes/public/script.js index 3e6f52e..be2533b 100644 --- a/quotes/public/script.js +++ b/quotes/public/script.js @@ -27,9 +27,11 @@ function appendQuote(response) { .getElementById(elem["class"]) .insertAdjacentHTML( "beforeend", - `<li>${elem["name"]} ${elem["middlename"] ? elem["middlename"] + " " : ""}${elem["surname"]}: ${ - elem["quote"] - }${elem["owner"] ? ' <span data-id="' + elem["id"] + '"></span></li>' : ""}`, + `<li><span class="text">${elem["name"]} ${elem["middlename"] ? elem["middlename"] + " " : ""}${ + elem["surname"] + }: ${elem["quote"]}</span>${ + elem["owner"] ? ' <span class="delete-btn" data-id="' + elem["id"] + '"></span></li>' : "" + }`, ); const span = document.querySelector(`li span[data-id="${elem["id"]}"]`); diff --git a/quotes/public/style.css b/quotes/public/style.css index f098bda..8e759da 100644 --- a/quotes/public/style.css +++ b/quotes/public/style.css @@ -41,15 +41,27 @@ button:not([type="submit"]) { } li { - word-wrap: break-word; + display: flex; + flex-flow: row wrap; + justify-content: space-between; + vertical-align: top; + margin: 10px 0; } -span { - float: right; +ul { + padding-left: 5px; +} + +span.text { + word-break: break-all; + width: 90%; +} + +span.delete-btn { cursor: pointer; background: url("/feather/icons/trash.svg") no-repeat center; - width: 30px; - height: 30px; + width: 10%; + height: auto; } input, |