better hourglass ui (#84)

purajit · Dec 7, 2023 · 171b7ce · 171b7ce
1 parent 1ed8797
commit 171b7ce
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 16 deletions.
diff --git a/docs/static/index.css b/docs/static/index.css
@@ -168,6 +168,10 @@ code {
     justify-content: center;
 }
 
+.table-row.label {
+    font-size: 15px;
+}
+
 .table-column {
     flex: 1;
     border: 1px solid white;
@@ -302,22 +306,19 @@ code {
     margin-bottom: 10px;
 }
 
-#hourglass-timeleft {
-    font-size: 50px;
-}
-
-#hourglass-timeelapsed {
-    font-size: 50px;
+.hourglass-display .table-column {
+    display: flex;
+    justify-content: center;
 }
 
-.hourglass-display {
-    width: 300px;
+.timedisplay {
+    min-width: 200px;
+    font-size: 100px;
 }
 
-.timedisplay {
-    max-width: 100px;
-    min-width: fit-content;
-    justify-content: center;
+.hourglass-btn {
+    padding-top: 10px;
+    padding-bottom: 10px;
 }
 
 .v-spacer {

diff --git a/templates/template_hourglass.html b/templates/template_hourglass.html
@@ -11,15 +11,19 @@
     <div class="table no-borders hourglass-display">
         <div class="table-row non-alternating">
             <div class="table-column timedisplay" id="hourglass-timeleft"></div>
-            <div class="table-column">time left</div>
+        </div>
+        <div class="table-row non-alternating label">
+            <div class="table-column">seconds left</div>
         </div>
         <div class="table-row non-alternating">
             <div class="table-column timedisplay" id="hourglass-timeelapsed"></div>
-            <div class="table-column">time elapsed</div>
+        </div>
+        <div class="table-row non-alternating label">
+            <div class="table-column">seconds elapsed</div>
         </div>
         <div class="table-row non-alternating">
-            <div class="table-column btn" id="hg-control">Start</div>
-            <div class="table-column btn" id="hg-flip">Flip</div>
+            <div class="table-column btn hourglass-btn" id="hg-control">Start</div>
+            <div class="table-column btn hourglass-btn" id="hg-flip">Flip</div>
         </div>
     </div>
 </div>