testing collapsible tables for mobile views

layouts/_default/baseof.html

@@ -24,6 +24,7 @@
 
   <link rel="stylesheet" href="{{ $bootstrap.Permalink }}">
   <link rel="stylesheet" href="/css/master.css"/>
+  <link rel="stylesheet" type="text/css" href="/css/collapse-tables.css">
 
   {{/* Deferred loading of css based on: https://web.dev/defer-non-critical-css/ */}}
   <link rel="preload" href="/css/highlight-default.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
@@ -32,6 +33,7 @@
   <link rel="icon" type="image/png" href="/images/favicon.png"/>
   <script src="/js/highlight.min.js" defer></script>
   <script src="/js/zepto.min.js" defer></script>
+  <script type="text/javascript" src="/js/collapse-tables.js" defer></script>
   <script src="https://cdn.jsdelivr.net/npm/ooni-run/dist/widgets.js" defer></script>
   <script defer>hljs.initHighlightingOnLoad();</script>
 	<!-- Piwik -->

static/css/collapse-tables.css

@@ -0,0 +1,61 @@
+@media screen and (max-width: 576px) {
+    table.js-collapse {
+        border-collapse: collapse;
+        margin: 0;
+        padding: 0;
+        display: block;
+        width: 100%;
+        table-layout: fixed;
+        overflow-x: unset;
+    }
+
+    table.js-collapse tbody {
+        display: block;
+        width:100%;
+    }
+
+    table.js-collapse caption {
+        font-size: 1.3em;
+    }
+
+    table.js-collapse thead {
+        border: none;
+        clip: rect(0 0 0 0);
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        width: 1px;
+    }
+
+    table.js-collapse tr {
+        border-bottom: 3px solid #ddd;
+        display: block;
+        margin-bottom: .625em;
+    }
+
+    table.js-collapse td {
+        border-bottom: 1px solid #ddd;
+        display: block;
+        font-size: .8em;
+        text-align: right;
+        background: #FFF !important;
+        min-height: 40px;
+    }
+
+    table.js-collapse td:nth-child(odd) {
+        background: #E9ECEF !important;
+    }
+
+    table.js-collapse td::before {
+        content: attr(data-label);
+        float: left;
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+
+    table.js-collapse td:last-child {
+        border-bottom: 0;
+    }
+}

static/css/master.css

@@ -53,6 +53,17 @@ footer a:hover {
   text-decoration: none;
 }
 
+@media screen and (max-width:576px) {
+  .subtext {
+    margin-top:20%
+  }
+  .xs-center {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
 /* ================================================================== */
 /* Rows */
 
@@ -176,16 +187,6 @@ p.cta a::after {
   content: " →";
 }
 
-@media screen and (max-width:576px) {
-  .subtext {
-    margin-top:20%
-  }
-  .xs-center {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
 /* ================================================================== */
 /* Block quotes */
 
@@ -233,6 +234,10 @@ table {
     background: white;
     border-radius: 3px;
     border-collapse: collapse;
+    overflow-x: auto;
+    display: block;
+    width: max-content;
+    max-width: 100%;
     padding: 5px;
     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
     animation: float 5s infinite;
@@ -296,7 +301,7 @@ td {
   text-align: center;
   vertical-align: middle;
   font-weight: 300;
-  font-size: 18px;
+  font-size: 16px;
   text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
   border-right: 1px dashed #FFF;
 }

static/js/collapse-tables.js

@@ -0,0 +1,15 @@
+document.addEventListener("DOMContentLoaded", function() {
+    const tables = Array.from(document.querySelectorAll("table"));
+    console.log(tables)
+    tables.forEach((table, i) => {
+        table.classList.add("js-collapse");
+        let labels = [];
+        table.querySelectorAll("thead th").forEach(function(header, i) {
+            labels.push(header.innerText);
+        });
+        console.log(labels)
+        table.querySelectorAll("table tbody tr td").forEach(function(cell, i) {
+            cell.setAttribute("data-label", labels[cell.cellIndex]);
+        });
+    });
+});