changeset 63:b0ad92c96f60

Improve time navigation styling
author Lewin Bormann <lbo@spheniscida.de>
date Mon, 25 Jul 2022 09:05:45 -0700
parents 569284182390
children 3bcab50dcca5
files assets/index_dashboard.html.hbs assets/static/style.css
diffstat 2 files changed, 16 insertions(+), 14 deletions(-) [+]
line wrap: on
line diff
--- a/assets/index_dashboard.html.hbs	Sun Jul 24 21:32:20 2022 -0700
+++ b/assets/index_dashboard.html.hbs	Mon Jul 25 09:05:45 2022 -0700
@@ -69,22 +69,22 @@
             from {{ date.today }} (for {{date.duration}} days)
         </div>
         <div id="timenav">
-            <button onclick="adjustURLDateParams(-30, 1)">-30d</button>
-            <button onclick="adjustURLDateParams(-7, 1)">-7d</button>
-            <button onclick="adjustURLDateParams(-1, 1)">-1d</button>
-            &nbsp;&lt; begin &gt;&nbsp;
-            <button onclick="adjustURLDateParams(1, 1)">+1d</button>
-            <button onclick="adjustURLDateParams(7, 1)">+7d</button>
-            <button onclick="adjustURLDateParams(30, 1)">+30d</button>
+            <button class="timenavbutton" onclick="adjustURLDateParams(-30, 1)">-30d</button>
+            <button class="timenavbutton" onclick="adjustURLDateParams(-7, 1)">-7d</button>
+            <button class="timenavbutton" onclick="adjustURLDateParams(-1, 1)">-1d</button>
+            <span class="timenavbuttonlabel">&nbsp;&lt; begin &gt;&nbsp;</span>
+            <button class="timenavbutton" onclick="adjustURLDateParams(1, 1)">+1d</button>
+            <button class="timenavbutton" onclick="adjustURLDateParams(7, 1)">+7d</button>
+            <button class="timenavbutton" onclick="adjustURLDateParams(30, 1)">+30d</button>
         </div>
         <div id="durationnav">
-            <button onclick="adjustURLDateParams(0, 1/8)">x⅛</button>
-            <button onclick="adjustURLDateParams(0, 1/4)">x¼</button>
-            <button onclick="adjustURLDateParams(0, 1/2)">x½</button>
-            &nbsp;&lt; duration &gt;&nbsp;
-            <button onclick="adjustURLDateParams(0, 2)">x2</button>
-            <button onclick="adjustURLDateParams(0, 4)">x4</button>
-            <button onclick="adjustURLDateParams(0, 8)">x8</button>
+            <button class="timenavbutton" onclick="adjustURLDateParams(0, 1/8)">x⅛</button>
+            <button class="timenavbutton" onclick="adjustURLDateParams(0, 1/4)">x¼</button>
+            <button class="timenavbutton" onclick="adjustURLDateParams(0, 1/2)">x½</button>
+            <span class="timenavbuttonlabel">&lt; duration &gt;&nbsp;</span>
+            <button class="timenavbutton" onclick="adjustURLDateParams(0, 2)">x2</button>
+            <button class="timenavbutton" onclick="adjustURLDateParams(0, 4)">x4</button>
+            <button class="timenavbutton" onclick="adjustURLDateParams(0, 8)">x8</button>
         </div>
         <div id="timereset">
             <button onclick="resetDateParams()">Reset</button>
--- a/assets/static/style.css	Sun Jul 24 21:32:20 2022 -0700
+++ b/assets/static/style.css	Mon Jul 25 09:05:45 2022 -0700
@@ -21,6 +21,8 @@
 #timenav { }
 #timeindicator { padding: 0.2em; }
 #durationnav { padding: 0.2em; }
+.timenavbutton { width: 5em; }
+.timenavbuttonlabel { display: inline-block; width: 8em; text-align: center; }
 #timereset { padding: 0.3em; }
 
 #topconfig { text-align: center;  }