TEST_CODEOWNERS/rails
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Remove broken responsive-tables JS

Browse Source 
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
This commit is contained in:
R. Miles McCain 2020-07-03 02:46:28 +00:00
parent fce2d6a78b
commit 7f77b1d5b6
No known key found for this signature in database
GPG Key ID: F1053629E2905557
4 changed files with 31 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
guides/assets/javascripts/responsive-tables.js
View File

@ -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);

37
guides/assets/stylesheets/main.css
View File

@ -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; }
}

39
guides/assets/stylesheets/main.rtl.css
View File

@ -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; }
}
}

1
guides/source/layout.html.erb
View File

@ -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) %>" />