From 7f77b1d5b6a34c1af69b72607539f35769a0922c Mon Sep 17 00:00:00 2001 From: "R. Miles McCain" Date: Fri, 3 Jul 2020 02:46:28 +0000 Subject: [PATCH] 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 --- .../assets/javascripts/responsive-tables.js | 46 ------------------- guides/assets/stylesheets/main.css | 37 ++++++--------- guides/assets/stylesheets/main.rtl.css | 39 +++++++--------- guides/source/layout.html.erb | 1 - 4 files changed, 31 insertions(+), 92 deletions(-) delete mode 100644 guides/assets/javascripts/responsive-tables.js diff --git a/guides/assets/javascripts/responsive-tables.js b/guides/assets/javascripts/responsive-tables.js deleted file mode 100644 index 1c0f28c993..0000000000 --- a/guides/assets/javascripts/responsive-tables.js +++ /dev/null @@ -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); diff --git a/guides/assets/stylesheets/main.css b/guides/assets/stylesheets/main.css index 94f3466d4d..e8fedbddc6 100644 --- a/guides/assets/stylesheets/main.css +++ b/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; } - -} diff --git a/guides/assets/stylesheets/main.rtl.css b/guides/assets/stylesheets/main.rtl.css index 7bc355dc28..561f06d839 100644 --- a/guides/assets/stylesheets/main.rtl.css +++ b/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; } - -} +} \ No newline at end of file diff --git a/guides/source/layout.html.erb b/guides/source/layout.html.erb index d79c6b1e39..5e3e850442 100644 --- a/guides/source/layout.html.erb +++ b/guides/source/layout.html.erb @@ -12,7 +12,6 @@ -