From 79a83de5d28750095cf3af5e933af28872e7e3eb Mon Sep 17 00:00:00 2001
From: Tom Smeding <tom@tomsmeding.com>
Date: Mon, 5 Sep 2022 21:13:44 +0200
Subject: Redesign of vote buttons

---
 static/index.js | 55 ++++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 38 insertions(+), 17 deletions(-)

(limited to 'static/index.js')

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