Make numbers more prominent. Fix fwenzel#4.

xzer · Sep 4, 2014 · 92b95ba · 92b95ba
1 parent 90b7327
commit 92b95ba
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 3 deletions.
diff --git a/css/app.css b/css/app.css
@@ -75,13 +75,26 @@ button {
 
 #accounts {
     height: 100%;
+    line-height: 1;
     margin-top: .3rem;
     overflow-y: scroll;
+    text-align: center;
 }
 
 #accounts li {
     border-bottom: 1px solid #444;
     padding: 1em;
+    position: relative;
+}
+
+#accounts .name {
+    font-size: 80%;
+}
+#accounts .num {
+    display: block;
+    font-size: 3rem;
+    font-weight: bold;
+    letter-spacing: 4px;
 }
 
 #main > .delete {
@@ -96,6 +109,7 @@ button {
     padding: 0 .5rem;
     position: absolute;
     right: 1rem;
+    top: 2rem;
 }
 
 #add input[type=text] {

diff --git a/js/app.js b/js/app.js
@@ -89,8 +89,19 @@
         li = document.createElement('li');
         lis.push(li);
         $('#accounts').appendChild(li);
+
+        var span = document.createElement('span');
+        span.setAttribute('class', 'num');
+        li.appendChild(span);
+
+        var span = document.createElement('span');
+        span.setAttribute('class', 'name');
+        li.appendChild(span);
       }
-      li.textContent = acc['name'] + ': ' + createOTP(acc['key'], timeslot);
+
+      // Show account name and latest code.
+      li.querySelector('.name').textContent = acc['name'];
+      li.querySelector('.num').textContent = createOTP(acc['key'], timeslot);
     }
   }
 
@@ -126,12 +137,21 @@
   });
   $('#accounts').addEventListener('pointerdown', function(e) {
     pressTimer = window.setTimeout(function() {
-      if (e.target.tagName.toLowerCase() != 'li') return;
+      var li;
+
+      if (['li', 'span'].indexOf(e.target.tagName.toLowerCase()) === -1) {
+        return;
+      } else if (e.target.matches('li>span')) {
+        li = e.target.parentNode;
+      } else {
+        li = e.target;
+      }
+
 
       stopUpdating();
 
       var delButton = $('#main .delete');
-      e.target.appendChild(delButton);
+      li.appendChild(delButton);
 
       // Catch delete button un-click in a second or so.
       window.setTimeout(function() {