Remove broken responsive-tables JS

Add better responsive CSS for tables in guides

Fix borders & breakpoints for responsive tables

Add table fixes to RTL stylesheets

Use 480px breakpoints, remove outdated CSS

guides/assets/javascripts/responsive-tables.js

@@ -1,46 +0,0 @@
-(function() {
-  "use strict";
-
-  var switched = false;
-
-  var updateTables = function() {
-    if (document.documentElement.clientWidth < 767 && !switched) {
-      switched = true;
-      each(document.querySelectorAll("table.responsive"), splitTable);
-    } else {
-      switched = false;
-      each(document.querySelectorAll(".table-wrapper table.responsive"), unsplitTable);
-    }
-  }
-
-  document.addEventListener("turbolinks:load", function() {
-    each(document.querySelectorAll(":not(.syntaxhighlighter)>table"), function(element) {
-      element.classList.add("responsive");
-    });
-    updateTables();
-  });
-
-  window.addEventListener("resize", updateTables);
-
-  var splitTable = function(original) {
-    wrap(original, createElement("div", "table-wrapper"));
-
-    var copy = original.cloneNode(true);
-    each(copy.querySelectorAll("td:not(:first-child), th:not(:first-child)"), function(element) {
-      element.style.display = "none";
-    });
-    copy.classList.remove("responsive");
-
-    original.parentNode.append(copy);
-    wrap(copy, createElement("div", "pinned"))
-    wrap(original, createElement("div", "scrollable"));
-  }
-
-  var unsplitTable = function(original) {
-    each(document.querySelectorAll(".table-wrapper .pinned"), function(element) {
-      element.parentNode.removeChild(element);
-    });
-    unwrap(original.parentNode);
-    unwrap(original);
-  }
-}).call(this);

guides/assets/stylesheets/main.css

@@ -71,11 +71,14 @@ textarea, select {
 
 table {
   margin: 0 0 1.5em;
-  border: 2px solid #CCC;
   background: #FFF;
   border-collapse: collapse;
 }
 
+tbody, thead {
+  border: 2px solid #CCC;
+}
+
 table th, table td {
   padding: 9px 10px;
   border: 1px solid #CCC;
@@ -88,6 +91,17 @@ table th {
   font-weight: bold;
 }
 
+@media only screen and (max-width: 480px) {
+  table {
+    display: block;
+    overflow-x: auto;
+  }
+
+  td {
+    min-width: 7em;
+  }
+}
+
 img {
   max-width: 100%;
 }
@@ -754,24 +768,3 @@ span.token.sh.important {
   text-shadow: 2px 2px 4px #5400007d;
   background: radial-gradient(circle, rgb(255, 10, 0) 0%, rgb(200, 0, 0) 90%);
 }
-
-/* Foundation v2.1.4 http://foundation.zurb.com */
-/* Artfully masterminded by ZURB  */
-
-/* Mobile */
-@media only screen and (max-width: 767px) {
-  table.responsive { margin-bottom: 0; }
-
-  .pinned { position: absolute; left: 0; top: 0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-right: 1px solid #ccc; border-left: 1px solid #ccc; }
-  .pinned table { border-right: none; border-left: none; width: 100%; }
-  .pinned table th, .pinned table td { white-space: nowrap; }
-  .pinned td:last-child { border-bottom: 0; }
-
-  div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-right: 1px solid #ccc; }
-  div.table-wrapper div.scrollable table { margin-left: 35%; }
-  div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; }
-
-  table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; }
-  table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td { display: none; }
-
-}

guides/assets/stylesheets/main.rtl.css

@@ -71,11 +71,14 @@ textarea, select {
 
 table {
   margin: 0 0 1.5em;
-  border: 2px solid #CCC;
   background: #FFF;
   border-collapse: collapse;
 }
 
+tbody, thead {
+  border: 2px solid #CCC;
+}
+
 table th, table td {
   padding: 9px 10px;
   border: 1px solid #CCC;
@@ -88,6 +91,17 @@ table th {
   font-weight: bold;
 }
 
+@media only screen and (max-width: 480px) {
+  table {
+    display: block;
+    overflow-x: auto;
+  }
+
+  td {
+    min-width: 7em;
+  }
+}
+
 img {
   max-width: 100%;
 }
@@ -738,25 +752,4 @@ div.important p, div.caution p, div.warning p, div.note p, div.info p {
   top: 0px;
   z-index: 100;
   border: none;
-}
-
-/* Foundation v2.1.4 http://foundation.zurb.com */
-/* Artfully masterminded by ZURB  */
-
-/* Mobile */
-@media only screen and (max-width: 767px) {
-  table.responsive { margin-bottom: 0; }
-
-  .pinned { position: absolute; right: 0; top: 0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-left: 1px solid #ccc; border-right: 1px solid #ccc; }
-  .pinned table { border-left: none; border-right: none; width: 100%; }
-  .pinned table th, .pinned table td { white-space: nowrap; }
-  .pinned td:last-child { border-bottom: 0; }
-
-  div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-left: 1px solid #ccc; }
-  div.table-wrapper div.scrollable table { margin-right: 35%; }
-  div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; }
-
-  table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; }
-  table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td { display: none; }
-
-}
+}

guides/source/layout.html.erb

@@ -12,7 +12,6 @@
   <script src="javascripts/prism.js" data-turbolinks-track="reload"></script>
   <script src="javascripts/turbolinks.js" data-turbolinks-track="reload"></script>
   <script src="javascripts/guides.js" data-turbolinks-track="reload"></script>
-  <script src="javascripts/responsive-tables.js" data-turbolinks-track="reload"></script>
   <meta property="og:title" content="<%= yield(:page_title) %>" />
   <meta name="description" content="<%= yield(:description) %>" />
   <meta property="og:description" content="<%= yield(:description) %>" />