make info boxes in viewer more compact

dlibrary/static/viewer.css

@@ -88,6 +88,15 @@ html, body {
 
 #page-num {
     left: 10px;
+    text-align: center;
+}
+
+#page-num table {
+    border-spacing: 0;
+}
+
+#current-page {
+    border-bottom: 2px solid;
 }
 
 #duration {

dlibrary/static/viewer.js

@@ -61,22 +61,21 @@ document.addEventListener('DOMContentLoaded', () => {
         const display = document.getElementById('image-container');
         display.style.backgroundImage = `url("${current.src}")`;
 
-        document.getElementById('page-num')
+        document.getElementById('current-page').innerText = (pageNum + 1).toLocaleString();
-            .innerText = [
-                (pageNum + 1).toLocaleString(),
-                pages.length.toLocaleString()
-            ].join('\u200a/\u200a');
     }
 
+    const durationDisplay = document.getElementById('duration');
     function changeDuration(secs, pause) {
         duration = secs;
         localStorage.setItem(`${WORK_ID}-duration`, duration);
         paused = pause;
 
-        document.getElementById('duration').textContent = (paused ? '[paused] ' : '') + duration.toLocaleString() + 's';
+        durationDisplay.textContent = duration.toLocaleString() + 's';
         if (paused) {
+            durationDisplay.style.textDecoration = "line-through";
             stopTimer();
         } else {
+            durationDisplay.style.textDecoration = "";
             startTimer();
         }
     }

dlibrary/templates/viewer.html

@@ -15,7 +15,12 @@
   {% endfor %}
 </div>
 <div id="progress"></div>
-<div id="page-num"></div>
+<div id="page-num">
+  <table>
+    <tr><td id="current-page"></td></tr>
+    <tr><td id="total-pages">{{ images | length }}</td></tr>
+  </table>
+</div>
 <div id="duration"></div>
 <div id="controls">
   <div id="tap-left" class="tap">