Maciek's request

Author: StanFromIreland

src/style.css

@@ -83,9 +83,6 @@ a:hover {
 
 /* ------------------------------ Metadata ---------------------------------- */
 
-.metadata-table {
-  overflow-x: auto;
-}
 table {
   border-collapse: collapse;
 }
@@ -104,3 +101,31 @@ hr {
 td[data-label="warnings"], td[data-label="lint"] {
   text-align: right;
 }
+
+@media screen and (max-width: 600px) {
+  table, thead, tbody, th, td, tr {
+    display: block;
+  }
+  th {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+  }
+  tr {
+    border: 1px solid #ccc;
+    margin-bottom: 5px;
+    overflow-x: auto;
+  }
+  td {
+    border: none;
+    border-bottom: 1px solid #eee;
+    padding-left: 50%;
+    position: relative;
+  }
+  td:before {
+    content: attr(data-label);
+    font-weight: bold;
+    left: 10px;
+    position: absolute;
+  }
+}

templates/metadata.html.jinja

@@ -1,7 +1,6 @@
 {% extends "base.html.jinja" %}
 
 {% block main %}
-<div class="metadata-table">
 <table>
 <thead>
 <tr>
@@ -14,21 +13,22 @@
 </thead>
 <tbody>
 {% for project, metadata in metadata | sort(attribute='0.completion,0.translators.number') | reverse %}
-<tr>
-  <td data-label="language">{{ project.language.name }} ({{ project.language.code }})</td>
-  <td data-label="branch">{{ project.branch }}</td>
-  <td data-label="updated">{{ metadata[2].strftime('%Y/%m/%d %T') if metadata[2] else '' }}</td>
-  <td data-label="warnings">
-    {% if project.completion %}<a href="warnings-{{ project.language.code }}.txt">{{ metadata[0] }}</a>{% else %}{{ metadata[0] }}{% endif %}
-  </td>
-  <td data-label="lint">
-    {% if project.completion %}<a href="warnings-lint-{{ project.language.code }}.txt">{{ metadata[1] }}</a>{% else %}{{ metadata[1] }}{% endif %}
-  </td>
-</tr>
+  {% if project.repository %}
+    <tr>
+      <td data-label="language">{{ project.language.name }} ({{ project.language.code }})</td>
+      <td data-label="branch">{{ project.branch }}</td>
+      <td data-label="updated">{{ metadata[2].strftime('%Y/%m/%d %T') if metadata[2] else '' }}</td>
+      <td data-label="warnings">
+        {% if project.completion %}<a href="warnings-{{ project.language.code }}.txt">{{ metadata[0] }}</a>{% else %}{{ metadata[0] }}{% endif %}
+      </td>
+      <td data-label="lint">
+        {% if project.completion %}<a href="warnings-lint-{{ project.language.code }}.txt">{{ metadata[1] }}</a>{% else %}{{ metadata[1] }}{% endif %}
+      </td>
+    </tr>
+  {% endif %}
 {% endfor %}
 </tbody>
 </table>
 <p>* number of Sphinx build process warnings</p>
   <p>Last updated at {{ generation_time.strftime('%A, %-d %B %Y, %-H:%M:%S %Z') }} (in {{ duration // 60 }}:{{ "{:02}".format(duration % 60) }} minutes).</p>
-</div>
 {% endblock %}