Use hyperlinks instead of onclick-events

to link to positions. Disabled color-change and text-decoration to keep a clean and consisten look.
Thor77 · Feb 27, 2017 · cd01eb4 · cd01eb4
1 parent a1274a5
commit cd01eb4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/tsstats/templates/index.jinja2 b/tsstats/templates/index.jinja2
@@ -11,6 +11,12 @@
     body {
       padding-top: 50px;
     }
+    a {
+      color: inherit;
+    }
+    a:hover {
+      text-decoration: none;
+    }
     @media screen and (max-width: 767px) {
       .hint--medium--xs:after {
         white-space: normal;
@@ -36,7 +42,9 @@
      {% endif %}
   </div></nav>
   {% for server in servers %}
-    <h1 class="page-header" onclick="window.location = '#sid{{ server.sid }}'" id="sid{{ server.sid }}">Server {{ server.sid }}</h1>
+    <h1 class="page-header" 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>

diff --git a/tsstats/templates/stats.jinja2 b/tsstats/templates/stats.jinja2
@@ -8,12 +8,12 @@
 ] %}
   {% if clients|length > 0 %}
   {% set headline_id = [server.sid, headline|lower|replace(' ', '_')]|join('.') %}
-  <h2 onclick="window.location = '#{{ headline_id }}'">{{ headline }}</h2>
+  <h2><a href="#{{ headline_id }}">{{ headline }}</a></h2>
   <ul class="list-group" id="{{ headline_id }}">
     {% for client, value in clients %}
     {% set id = [headline_id, client.nick|striptags]|join('.') %}
-    <li id="{{ id }}" onclick="window.location = '#{{ id }}'" class="list-group-item{{ ' 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(', ') }}">{{ client.nick }}{{ " (" + client.identifier + ")" if debug }}</span>
+    <li id="{{ id }}" class="list-group-item{{ ' 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|frmttime }}"{% endif %}>{{ value }}</div></span>
     </li>
     {% endfor %}