...
 
Commits (3)
......@@ -357,108 +357,6 @@ a.tablesaw-btn {
display: none;
}
/* Mobile first styles: Begin with the stacked presentation at narrow widths */
/* Support note IE9+: @media only all */
@media only all {
/* Show the table cells as a block level element */
.tablesaw-stack {
clear: both;
}
.tablesaw-stack td,
.tablesaw-stack th {
text-align: left;
display: block;
}
.tablesaw-stack tr {
clear: both;
display: table-row;
}
/* Make the label elements a percentage width */
.tablesaw-stack td .tablesaw-cell-label,
.tablesaw-stack th .tablesaw-cell-label {
display: inline-block;
padding: 0 .6em 0 0;
width: 30%;
}
/* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */
.tablesaw-stack th .tablesaw-cell-label-top,
.tablesaw-stack td .tablesaw-cell-label-top {
display: block;
padding: .4em 0;
margin: .4em 0;
}
.tablesaw-cell-label {
display: block;
}
/* Avoid double strokes when stacked */
.tablesaw-stack tbody th.group {
margin-top: -1px;
}
/* Avoid double strokes when stacked */
.tablesaw-stack th.group b.tablesaw-cell-label {
display: none !important;
}
}
@media (max-width: 39.9375em) {
/* Table rows have a gray bottom stroke by default */
.tablesaw-stack tbody tr {
display: block;
width: 100%;
border-bottom: 1px solid #dfdfdf;
}
.tablesaw-stack thead td,
.tablesaw-stack thead th {
display: none;
}
.tablesaw-stack tbody td,
.tablesaw-stack tbody th {
display: block;
float: left;
clear: left;
width: 100%;
}
.tablesaw-cell-label {
vertical-align: top;
}
.tablesaw-cell-content {
display: inline-block;
max-width: 67%;
}
.tablesaw-stack .tablesaw-stack-block .tablesaw-cell-label,
.tablesaw-stack .tablesaw-stack-block .tablesaw-cell-content {
display: block;
width: 100%;
max-width: 100%;
padding: 0;
}
.tablesaw-stack td:empty,
.tablesaw-stack th:empty {
display: none;
}
}
/* Media query to show as a standard table at 560px (35em x 16px) or wider */
@media (min-width: 40em) {
......@@ -553,27 +451,6 @@ a.tablesaw-btn {
margin: 0;
}
/* Hide all prioritized columns by default */
@media only all {
.tablesaw-columntoggle th.tablesaw-priority-6,
.tablesaw-columntoggle td.tablesaw-priority-6,
.tablesaw-columntoggle th.tablesaw-priority-5,
.tablesaw-columntoggle td.tablesaw-priority-5,
.tablesaw-columntoggle th.tablesaw-priority-4,
.tablesaw-columntoggle td.tablesaw-priority-4,
.tablesaw-columntoggle th.tablesaw-priority-3,
.tablesaw-columntoggle td.tablesaw-priority-3,
.tablesaw-columntoggle th.tablesaw-priority-2,
.tablesaw-columntoggle td.tablesaw-priority-2,
.tablesaw-columntoggle th.tablesaw-priority-1,
.tablesaw-columntoggle td.tablesaw-priority-1,
.tablesaw-columntoggle th.tablesaw-priority-0,
.tablesaw-columntoggle td.tablesaw-priority-0 {
display: none;
}
}
.tablesaw-columntoggle-btnwrap .dialog-content {
top: 0 !important;
right: 1em;
......@@ -589,37 +466,6 @@ a.tablesaw-btn {
/* Preset breakpoints if "" class added to table */
/* Show priority 1 at 320px (20em x 16px) */
@media (min-width: 20em) {
.tablesaw-columntoggle th.tablesaw-priority-1,
.tablesaw-columntoggle td.tablesaw-priority-1 {
display: table-cell;
}
}
/* Show priority 2 at 480px (30em x 16px) */
@media (min-width: 30em) {
.tablesaw-columntoggle th.tablesaw-priority-2,
.tablesaw-columntoggle td.tablesaw-priority-2 {
display: table-cell;
}
}
/* Show priority 3 at 640px (40em x 16px) */
@media (min-width: 40em) {
.tablesaw-columntoggle th.tablesaw-priority-3,
.tablesaw-columntoggle td.tablesaw-priority-3 {
display: table-cell;
}
.tablesaw-columntoggle tbody td {
line-height: 2;
}
}
/* Show priority 4 at 800px (50em x 16px) */
@media (min-width: 50em) {
......
/*! Tablesaw - v3.1.2 - 2019-03-19
* https://github.com/filamentgroup/tablesaw
* Copyright (c) 2019 Filament Group; Licensed MIT */
/* Mobile first styles: Begin with the stacked presentation at narrow widths */
/* Support note IE9+: @media only all */
@media only all {
/* Show the table cells as a block level element */
.tablesaw-stack {
clear: both;
}
.tablesaw-stack td,
.tablesaw-stack th {
text-align: left;
display: block;
}
.tablesaw-stack tr {
clear: both;
display: table-row;
}
/* Make the label elements a percentage width */
.tablesaw-stack td .tablesaw-cell-label,
.tablesaw-stack th .tablesaw-cell-label {
display: inline-block;
padding: 0 .6em 0 0;
width: 30%;
}
/* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */
.tablesaw-stack th .tablesaw-cell-label-top,
.tablesaw-stack td .tablesaw-cell-label-top {
display: block;
padding: .4em 0;
margin: .4em 0;
}
.tablesaw-cell-label {
display: block;
}
/* Avoid double strokes when stacked */
.tablesaw-stack tbody th.group {
margin-top: -1px;
}
/* Avoid double strokes when stacked */
.tablesaw-stack th.group b.tablesaw-cell-label {
display: none !important;
}
}
@media (max-width: 39.9375em) {
/* Table rows have a gray bottom stroke by default */
.tablesaw-stack tbody tr {
display: block;
width: 100%;
border-bottom: 1px solid #dfdfdf;
}
.tablesaw-stack thead td,
.tablesaw-stack thead th {
display: none;
}
.tablesaw-stack tbody td,
.tablesaw-stack tbody th {
display: block;
float: left;
clear: left;
width: 100%;
}
.tablesaw-cell-label {
vertical-align: top;
}
.tablesaw-cell-content {
display: inline-block;
max-width: 67%;
}
.tablesaw-stack .tablesaw-stack-block .tablesaw-cell-label,
.tablesaw-stack .tablesaw-stack-block .tablesaw-cell-content {
display: block;
width: 100%;
max-width: 100%;
padding: 0;
}
.tablesaw-stack td:empty,
.tablesaw-stack th:empty {
display: none;
}
}
/* Media query to show as a standard table at 560px (35em x 16px) or wider */
@media (min-width: 40em) {
.tablesaw-stack tr {
display: table-row;
}
/* Show the table header rows */
.tablesaw-stack td,
.tablesaw-stack th,
.tablesaw-stack thead td,
.tablesaw-stack thead th {
display: table-cell;
margin: 0;
}
/* Hide the labels in each cell */
.tablesaw-stack td .tablesaw-cell-label,
.tablesaw-stack th .tablesaw-cell-label {
display: none !important;
}
}
.tablesaw-fix-persist {
table-layout: fixed;
}
/* Hide all prioritized columns by default */
@media only all {
.tablesaw-columntoggle th.tablesaw-priority-6,
.tablesaw-columntoggle td.tablesaw-priority-6,
.tablesaw-columntoggle th.tablesaw-priority-5,
.tablesaw-columntoggle td.tablesaw-priority-5,
.tablesaw-columntoggle th.tablesaw-priority-4,
.tablesaw-columntoggle td.tablesaw-priority-4,
.tablesaw-columntoggle th.tablesaw-priority-3,
.tablesaw-columntoggle td.tablesaw-priority-3,
.tablesaw-columntoggle th.tablesaw-priority-2,
.tablesaw-columntoggle td.tablesaw-priority-2,
.tablesaw-columntoggle th.tablesaw-priority-1,
.tablesaw-columntoggle td.tablesaw-priority-1,
.tablesaw-columntoggle th.tablesaw-priority-0,
.tablesaw-columntoggle td.tablesaw-priority-0 {
display: none;
}
}
/* Preset breakpoints if "" class added to table */
/* Show priority 1 at 320px (20em x 16px) */
@media (min-width: 20em) {
.tablesaw-columntoggle th.tablesaw-priority-1,
.tablesaw-columntoggle td.tablesaw-priority-1 {
display: table-cell;
}
}
/* Show priority 2 at 480px (30em x 16px) */
@media (min-width: 30em) {
.tablesaw-columntoggle th.tablesaw-priority-2,
.tablesaw-columntoggle td.tablesaw-priority-2 {
display: table-cell;
}
}
/* Show priority 3 at 640px (40em x 16px) */
@media (min-width: 40em) {
.tablesaw-columntoggle th.tablesaw-priority-3,
.tablesaw-columntoggle td.tablesaw-priority-3 {
display: table-cell;
}
.tablesaw-columntoggle tbody td {
line-height: 2;
}
}
......@@ -2,5 +2,6 @@ name: Responsive Tables Filter
type: module
description: Make tables in WYSIWYG fields responsive
core: 8.x
core_version_requirement: ^8 || ^9
package: Other
configure: responsive_tables_filter.settings
tablesaw-filter:
version: 1.x
css:
theme:
css/tablesaw.css: {}
component:
css/tablesaw-base.css: {}
css/tablesaw-responsive.css: { media: screen }
js:
js/tablesaw.min.js: {}
js/tablesaw-init.js: {}
......
......@@ -72,22 +72,7 @@ class FilterProcessTest extends UnitTestCase {
['<table></table>', '<table class="tablesaw tablesaw-stack" data-tablesaw-mode="stack" data-tablesaw-minimap=""></table>'],
['<table class="test"></table>', '<table class="test tablesaw tablesaw-stack" data-tablesaw-mode="stack" data-tablesaw-minimap=""></table>'],
['<table class="no-tablesaw"></table>', '<table class="no-tablesaw"></table>'],
['<table additional="test"><thead><tr><th>Header One<th>Header 2<tbody><tr><td>Easily add tables with the WYSIWYG toolbar<td>Encoded characters test öô & , ?<tr><td>Tables respond to display on smaller screens<td>Fully accessible to screen readers</table>', '<table additional="test" class="tablesaw tablesaw-stack" data-tablesaw-mode="stack" data-tablesaw-minimap="">
<thead><tr>
<th>Header One</th>
<th>Header 2</th>
</tr></thead>
<tbody>
<tr>
<td>Easily add tables with the WYSIWYG toolbar</td>
<td>Encoded characters test öô &amp; , ?</td>
</tr>
<tr>
<td>Tables respond to display on smaller screens</td>
<td>Fully accessible to screen readers</td>
</tr>
</tbody>
</table>',
['<table additional="test"><thead><tr><th>Header One<th>Header 2<tbody><tr><td>Easily add tables with the WYSIWYG toolbar<td>Encoded characters test öô & , ?<tr><td>Tables respond to display on smaller screens<td>Fully accessible to screen readers</table>', '<table additional="test" class="tablesaw tablesaw-stack" data-tablesaw-mode="stack" data-tablesaw-minimap=""><thead><tr><th>Header One</th><th>Header 2</th></tr></thead><tbody><tr><td>Easily add tables with the WYSIWYG toolbar</td><td>Encoded characters test öô &amp; , ?</td></tr><tr><td>Tables respond to display on smaller screens</td><td>Fully accessible to screen readers</td></tr></tbody></table>',
],
];
}
......