# HG changeset patch
# User Dennis Fink <dennis.fink@c3l.lu>
# Date 2015-10-22 22:35:37
# Node ID bd7608fb3d38e341b2c9ef17e13bc1e4e95adc29
# Parent  2f02ea474a00ead830dc7ee5c4608790c638d3b9

Making status tables responsive

We wrap a div with the table-responsive class around the tables.

diff --git a/ennstatus/templates/status/macros.html b/ennstatus/templates/status/macros.html
--- a/ennstatus/templates/status/macros.html
+++ b/ennstatus/templates/status/macros.html
@@ -55,46 +55,48 @@
     {% set headers = ('#', 'Name', 'Tor Status', 'Country', 'Fingerprint', 'OBFS', 'FTEProxy', 'Flashproxy', 'meek', 'Last Updated <noscript>(UTC)</noscript>') %}
   {% endif %}
   <h2>{{ server_type|title }}</h2>
-  <table class="table table-bordered table-striped sortable">
-    <thead>
-      <tr>
-        {% for name in headers %}
-          <th>{{ name|safe }}</th>
+  <div class="table-responsive">
+    <table class="table table-bordered table-striped sortable">
+      <thead>
+        <tr>
+          {% for name in headers %}
+            <th>{{ name|safe }}</th>
+          {% endfor %}
+        </tr>
+      </thead>
+      <tbody>
+        {% for server in servers|sort(attribute='name')|sort(attribute='country') %}
+        <tr {% if server.name in config['ENNSTATUS_BRIDGE_PROGRAM'] %}class="info"{% endif %}>
+            <td>{{ loop.index }}</td>
+            {% if server_type in ('exit', 'relay') %}
+              <td>{{ create_name(server.name) }}</td>
+              <td>{{ server.ip }}</td>
+              <td>{{ server.ip6 or 'N/A' }}</td>
+            {% else %}
+              <td>
+                {% if server.name in config['ENNSTATUS_BRIDGE_PROGRAM'] %}
+                  <a href="{{ url_for('root.bridgeprogram') }}">{{ server.name }}</a>
+                {% else %}
+                  {{ server.name }}
+                {% endif %}
+              </td>
+            {% endif %}
+            <td>{{ colorize_status(server.status) }}</td>
+            <td>{{ create_country(server.country) }}</td>
+            <td>{{ create_fingerprint(server.fingerprint, server.type) }}</td>
+            {% if server_type == 'bridge' %}
+              <td>{{ colorize_obfs(server.obfs) }}</td>
+              <td>{{ colorize_obfs(server.fteproxy) }}</td>
+              <td>{{ colorize_obfs(server.flashproxy) }}</td>
+              <td>{{ colorize_obfs(server.meek) }}</td>
+            {% endif %}
+            <td>{{ create_date(server.last_updated) }}
+            </td>
+          </tr>
         {% endfor %}
-      </tr>
-    </thead>
-    <tbody>
-      {% for server in servers|sort(attribute='name')|sort(attribute='country') %}
-      <tr {% if server.name in config['ENNSTATUS_BRIDGE_PROGRAM'] %}class="info"{% endif %}>
-          <td>{{ loop.index }}</td>
-          {% if server_type in ('exit', 'relay') %}
-            <td>{{ create_name(server.name) }}</td>
-            <td>{{ server.ip }}</td>
-            <td>{{ server.ip6 or 'N/A' }}</td>
-          {% else %}
-            <td>
-              {% if server.name in config['ENNSTATUS_BRIDGE_PROGRAM'] %}
-                <a href="{{ url_for('root.bridgeprogram') }}">{{ server.name }}</a>
-              {% else %}
-                {{ server.name }}
-              {% endif %}
-            </td>
-          {% endif %}
-          <td>{{ colorize_status(server.status) }}</td>
-          <td>{{ create_country(server.country) }}</td>
-          <td>{{ create_fingerprint(server.fingerprint, server.type) }}</td>
-          {% if server_type == 'bridge' %}
-            <td>{{ colorize_obfs(server.obfs) }}</td>
-            <td>{{ colorize_obfs(server.fteproxy) }}</td>
-            <td>{{ colorize_obfs(server.flashproxy) }}</td>
-            <td>{{ colorize_obfs(server.meek) }}</td>
-          {% endif %}
-          <td>{{ create_date(server.last_updated) }}
-          </td>
-        </tr>
-      {% endfor %}
-    </tbody>
-  </table>
+      </tbody>
+    </table>
+  </div>
   {% if server_type == 'bridge' %}
     <div class="alert alert-info alert-dismissible" role="alert">
       <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>