From 79a83de5d28750095cf3af5e933af28872e7e3eb Mon Sep 17 00:00:00 2001 From: Tom Smeding Date: Mon, 5 Sep 2022 21:13:44 +0200 Subject: Redesign of vote buttons --- static/index.css | 39 +++++++++++++++++---------------------- static/index.js | 55 ++++++++++++++++++++++++++++++++++++++----------------- 2 files changed, 55 insertions(+), 39 deletions(-) (limited to 'static') diff --git a/static/index.css b/static/index.css index 4f4981e..4fd7371 100644 --- a/static/index.css +++ b/static/index.css @@ -31,11 +31,17 @@ body.okauth #login { } .item .item-buttons { - display: none; + visibility: hidden; user-select: none; } .item:hover .item-buttons { - display: inline; + visibility: visible; +} + +.item-vote-table { + display: inline-block; + border-collapse: collapse; + margin-right: 5px; } .item-bullet { @@ -50,29 +56,18 @@ body.okauth #login { .item-votes { display: inline-block; font-size: 18px; - color: #444; - vertical-align: 3px; - margin-left: 15px; + color: #ccc; + vertical-align: 6px; } - -.item-upvote { - border: 1px #888 solid; - border-radius: 4px; - background-color: #eee; - color: green; - font-weight: bold; - cursor: pointer; - margin-left: 15px; - padding-left: 8px; - padding-right: 8px; +.item:hover .item-votes { + color: #444; } -.item-downvote { - font-size: 23px; - color: blue; - cursor: pointer; - margin-left: 15px; - vertical-align: 2px; +.item-upvote, .item-downvote { + background: #eee; + font-size: 10px; + width: 20px; + text-align: center; } .item-delete { diff --git a/static/index.js b/static/index.js index 1f98336..4a40a17 100644 --- a/static/index.js +++ b/static/index.js @@ -48,39 +48,60 @@ function createItemElement(votes, string) { el_item.classList.add("item"); if (votes < 0) el_item.classList.add("negative"); + // bullet & votes + el = document.createElement("span"); el.classList.add("item-bullet"); el.appendChild(document.createTextNode("•")); el_item.appendChild(el); - el = document.createElement("span"); - el.classList.add("item-label"); - el.appendChild(document.createTextNode(string)); - el_item.appendChild(el); - el = document.createElement("span"); el.classList.add("item-votes"); - el.appendChild(document.createTextNode("[" + votes + "]")); + el.appendChild(document.createTextNode(votes)); el_item.appendChild(el); + // buttons 1 + var buttons = document.createElement("span"); buttons.classList.add("item-buttons"); - el = document.createElement("span"); - el.classList.add("item-upvote"); - el.appendChild(document.createTextNode("⇧")); - el.addEventListener("click", function() { + var table = document.createElement("table"); + table.classList.add("item-vote-table"); + + var tr = document.createElement("tr"); + var td = document.createElement("td"); + td.classList.add("item-upvote"); + td.appendChild(document.createTextNode("⇧")); + td.addEventListener("click", function() { upvoteItem(string, 1); }); - buttons.appendChild(el); - - el = document.createElement("span"); - el.classList.add("item-downvote"); - el.appendChild(document.createTextNode("↓")); - el.addEventListener("click", function() { + tr.appendChild(td); + table.appendChild(tr); + + tr = document.createElement("tr"); + td = document.createElement("td"); + td.classList.add("item-downvote"); + td.appendChild(document.createTextNode("↓")); + td.addEventListener("click", function() { upvoteItem(string, -1); }); - buttons.appendChild(el); + tr.appendChild(td); + table.appendChild(tr); + + buttons.appendChild(table); + el_item.appendChild(buttons); + + // contents + + el = document.createElement("span"); + el.classList.add("item-label"); + el.appendChild(document.createTextNode(string)); + el_item.appendChild(el); + + // buttons 2 + + buttons = document.createElement("span"); + buttons.classList.add("item-buttons"); el = document.createElement("span"); el.classList.add("item-delete"); -- cgit v1.2.3-70-g09d2