Merge ad44c4f into 687f58e

Thor77 · Jun 30, 2018 · 61607da · 61607da
2 parents 687f58e + ad44c4f
commit 61607da
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 21 deletions.
diff --git a/tsstats/templates/index.jinja2 b/tsstats/templates/index.jinja2
@@ -3,20 +3,20 @@
 <head>
   <title>{{ title }}</title>
   <meta charset="utf-8">
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/hint.css/2.4.1/hint.min.css" integrity="sha256-7KczUWqIa/6KaIKtNfG18eilVQR4vJ4S9SSiDAplUwc=" crossorigin="anonymous">
   <meta name="referrer" content="no-referrer">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <style type="text/css">
-    body {
-      padding-top: 50px;
-    }
     a {
       color: inherit;
     }
     a:hover {
       text-decoration: none;
     }
+    .navbar-toggler {
+      cursor: pointer;
+    }
     @media screen and (max-width: 767px) {
       .hint--medium--xs:after {
         white-space: normal;
@@ -27,27 +27,53 @@
   </style>
 </head>
 <body>
-<div class="container-fluid">
-  <nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid">
-    <div class="navbar-header">
-      <a class="navbar-brand" href="#">{{ title }}</a>
-    </div>
-    <ul class="nav navbar-nav">
+<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
+  <a href="" class="navbar-brand">{{ title }}</a>
+  <button class="navbar-toggler" 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 id="main-nav" class="collapse navbar-collapse">
+    <ul class="navbar-nav mr-auto">
       {% for sid, _ in servers %}
-        <li><a href="#sid{{ sid }}">Server {{ sid }}</a></li>
+        <li class="nav-item">
+          <a class="nav-link" href="#sid{{ sid }}">Server {{ sid }}</a>
+        </li>
       {% endfor %}
-     </ul>
-     {% if debug %}
-     <p class="navbar-text navbar-right" style="color: red; padding-right: 10px;">debug mode</p>
-     {% endif %}
-  </div></nav>
+    </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="page-header" id="sid{{ server.sid }}">
+    <h1 class="display-4" id="sid{{ server.sid }}">
       <a href="#sid{{ server.sid }}">Server {{ server.sid }}</a>
     </h1>
     {% include 'stats.jinja2' %}
   {% 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/templates/stats.jinja2 b/tsstats/templates/stats.jinja2
@@ -9,12 +9,12 @@
   {% if clients|length > 0 %}
   {% set headline_id = [server.sid, headline|lower|replace(' ', '_')]|join('.') %}
   <h2><a href="#{{ headline_id }}">{{ headline }}</a></h2>
-  <ul class="list-group" id="{{ headline_id }}">
+  <ul class="list-group my-3" id="{{ headline_id }}">
     {% for client, value in clients %}
     {% set id = [headline_id, client.nick|striptags]|join('.') %}
-    <li id="{{ id }}" class="list-group-item{{ ' list-group-item-success' if client.connected else loop.cycle('" style="background-color: #eee;', '') }}">
+    <li id="{{ id }}" class="list-group-item d-flex justify-content-between align-items-center{{ ' list-group-item-success' if client.connected else loop.cycle('" style="background-color: #eee;', '') }}">
       <span class="hint--right hint--medium--xs" data-hint="{{ client.nick_history|join(', ') }}"><a href="#{{ id }}">{{ client.nick }}{{ " (" + client.identifier + ")" if debug }}</a></span>
-      <span class="badge"><div{% if not client.connected and headline == 'Onlinetime' %} class="hint--left" data-hint="{{ client.last_seen|lastseen }}"{% endif %}>{{ value }}</div></span>
+      <span class="badge badge-secondary badge-pill"><div{% if not client.connected and headline == 'Onlinetime' %} class="hint--left" data-hint="{{ client.last_seen|lastseen }}"{% endif %}>{{ value }}</div></span>
     </li>
     {% endfor %}
   </ul>

diff --git a/tsstats/tests/test_template.py b/tsstats/tests/test_template.py
@@ -28,7 +28,8 @@ def test_debug(output):
     logger.setLevel(logging.INFO)
     soup = BeautifulSoup(open(output), 'html.parser')
     # check debug-label presence
-    assert soup.find_all(style='color: red; padding-right: 10px;')
+    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