Redesign of vote buttons

2 files changed, 55 insertions, 39 deletions

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");