Merge pull request #19 from wagesj45/codex/style-duration-and-server-selectors-as-buttons

Improve button styling on landing page

templates/index.html

@@ -14,14 +14,29 @@
           <p class="menu-label">Intervals</p>
           <ul class="menu-list" id="interval-list">
             {% for interval in intervals %}
-            <li><a href="#" data-interval="{{ interval }}"><span class="icon"><i data-feather="clock"></i></span>{{ interval.title() }}</a></li>
+            <li>
+              <a class="button is-small is-fullwidth" href="#" data-interval="{{ interval }}">
+                <span class="icon"><i data-feather="clock"></i></span>
+                <span>{{ interval.title() }}</span>
+              </a>
+            </li>
             {% endfor %}
           </ul>
           <p class="menu-label">Domains</p>
           <ul class="menu-list" id="domain-list">
-            <li><a href="#" data-domain=""><span class="icon"><i data-feather="globe"></i></span>All Domains</a></li>
+            <li>
+              <a class="button is-small is-fullwidth" href="#" data-domain="">
+                <span class="icon"><i data-feather="globe"></i></span>
+                <span>All Domains</span>
+              </a>
+            </li>
             {% for domain in domains %}
-            <li><a href="#" data-domain="{{ domain }}"><span class="icon"><i data-feather="server"></i></span>{{ domain }}</a></li>
+            <li>
+              <a class="button is-small is-fullwidth" href="#" data-domain="{{ domain }}">
+                <span class="icon"><i data-feather="server"></i></span>
+                <span>{{ domain }}</span>
+              </a>
+            </li>
             {% endfor %}
           </ul>
         </aside>
@@ -37,6 +52,12 @@
     const domainLinks = document.querySelectorAll('#domain-list a');
     let currentInterval = intervalLinks.length ? intervalLinks[0].dataset.interval : '';
     let currentDomain = '';
+
+    function setActive(list, el) {
+      list.forEach(a => a.classList.remove('is-primary'));
+      if (el) el.classList.add('is-primary');
+    }
+
     function updateFrame() {
       let path = currentInterval;
       if (currentDomain) {
@@ -48,6 +69,7 @@
       a.addEventListener('click', e => {
         e.preventDefault();
         currentInterval = a.dataset.interval;
+        setActive(intervalLinks, a);
         updateFrame();
       });
     });
@@ -55,9 +77,12 @@
       a.addEventListener('click', e => {
         e.preventDefault();
         currentDomain = a.dataset.domain;
+        setActive(domainLinks, a);
         updateFrame();
       });
     });
+    setActive(intervalLinks, intervalLinks[0]);
+    setActive(domainLinks, domainLinks[0]);
     updateFrame();
     feather.replace();
   </script>