Improve navbar on mobile devices (#16)

* add button to show/hide menu items * ensure navigation fills the width of the viewport by moving it out of the main container element
Thor77 · Aug 23, 2017 · 978be86 · 978be86
1 parent 2de2a67
commit 978be86
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 17 deletions.
diff --git a/tsstats/templates/index.jinja2 b/tsstats/templates/index.jinja2
@@ -14,6 +14,9 @@
     a:hover {
       text-decoration: none;
     }
+    .navbar-toggler {
+      cursor: pointer;
+    }
     @media screen and (max-width: 767px) {
       .hint--medium--xs:after {
         white-space: normal;
@@ -24,23 +27,30 @@
   </style>
 </head>
 <body>
-<div class="container-fluid">
-  <nav class="navbar navbar-toggleable-md navbar-light bg-faded sticky-top">
-    <a class="navbar-brand" href="#">{{ title }}</a>
+<nav class="navbar navbar-toggleable-md navbar-light bg-faded sticky-top">
+  <div class="d-flex justify-content-between hidden-lg-up">
+    <a href="" class="navbar-brand">{{ title }}</a>
+    <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+  </div>
+
+  <div id="main-nav" class="collapse navbar-collapse">
+    <ul class="navbar-nav mr-auto">
+      <li class="hidden-md-down"><a href="" class="navbar-brand">{{ title }}</a></li>
+      {% for sid, _ in servers %}
+        <li class="nav-item">
+          <a class="nav-link" href="#sid{{ sid }}">Server {{ sid }}</a>
+        </li>
+      {% endfor %}
+    </ul>
+    {% if debug %}
+    <span class="navbar-text" style="color: red">debug mode</span>
+    {% endif %}
+  </div>
+</nav>
 
-    <div class="collapse navbar-collapse">
-      <ul class="navbar-nav mr-auto">
-        {% for sid, _ in servers %}
-          <li class="nav-item">
-            <a class="nav-link" href="#sid{{ sid }}">Server {{ sid }}</a>
-          </li>
-        {% endfor %}
-      </ul>
-      {% if debug %}
-      <span class="navbar-text" style="color: red">debug mode</span>
-      {% endif %}
-    </div>
-  </nav>
+<div class="container-fluid">
   {% for server in servers %}
     <h1 class="display-4" id="sid{{ server.sid }}">
       <a href="#sid{{ server.sid }}">Server {{ server.sid }}</a>
@@ -49,5 +59,24 @@
   {% endfor %}
   <small>Generated by <a href="https://github.com/Thor77/TeamspeakStats" rel="noopener">TeamspeakStats</a> at {{ creation_time|frmttime }}</small>
 </div>
+
+<script type="text/javascript">
+  (function() {
+    var collapseTogglers = document.querySelectorAll('[data-toggle="collapse"]');
+    var toggleTarget;
+    Array.prototype.forEach.call(collapseTogglers, function(toggler) {
+      toggler.addEventListener('click', function(event) {
+        toggleTarget = document.getElementById(toggler.dataset.target);
+        if (toggler.getAttribute('aria-expanded') === 'true') {
+          toggleTarget.classList.add('collapse');
+          toggler.setAttribute('aria-expanded', false);
+        } else {
+          toggleTarget.classList.remove('collapse');
+          toggler.setAttribute('aria-expanded', true);
+        }
+      });
+    });
+  })();
+</script>
 </body>
 </html>
diff --git a/tsstats/tests/test_template.py b/tsstats/tests/test_template.py
@@ -26,7 +26,8 @@ def test_debug(output):
     logger.setLevel(logging.INFO)
     soup = BeautifulSoup(open(output), 'html.parser')
     # check debug-label presence
-    assert soup.find('nav').find('span').text == 'debug mode'
+    assert soup.find('nav').find('div', id='main-nav').find('span').text \
+        == 'debug mode'
     for client_item in soup.find('ul', id='1.onlinetime').find_all('li'):
         nick = client_item.find('span').text
         # check for right identifier