diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index 5c61f22..e16af0f 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -869,6 +869,7 @@ function template_preprocess_table(&$variables) {
if (!is_array($cell)) {
$header_columns++;
$cell_content = $cell;
+ $cell_label = $cell;
$cell_attributes = new Attribute();
$is_header = TRUE;
}
@@ -882,6 +883,7 @@ function template_preprocess_table(&$variables) {
$cell_content = '';
if (isset($cell['data'])) {
$cell_content = $cell['data'];
+ $cell_label = $cell['data'];
unset($cell['data']);
}
// Flag the cell as a header or not and remove the flag.
@@ -914,6 +916,9 @@ function template_preprocess_table(&$variables) {
$variables['header'][$col_key]['tag'] = $is_header ? 'th' : 'td';
$variables['header'][$col_key]['attributes'] = $cell_attributes;
$variables['header'][$col_key]['content'] = $cell_content;
+ if (!empty($cell_label)) {
+ $variables['header'][$col_key]['label'] = $cell_label;
+ }
}
}
$variables['header_columns'] = $header_columns;
@@ -982,6 +987,9 @@ function template_preprocess_table(&$variables) {
$variables[$section][$row_key]['cells'][$col_key]['tag'] = $is_header ? 'th' : 'td';
$variables[$section][$row_key]['cells'][$col_key]['attributes'] = new Attribute($cell_attributes);
$variables[$section][$row_key]['cells'][$col_key]['content'] = $cell_content;
+ if (!empty($variables['header'][$col_key]['label'])) {
+ $variables[$section][$row_key]['cells'][$col_key]['label'] = $variables['header'][$col_key]['label'];
+ }
}
}
}
diff --git a/core/misc/tableresponsive.js b/core/misc/tableresponsive.js
index 1bf6d07..5d0907e 100644
--- a/core/misc/tableresponsive.js
+++ b/core/misc/tableresponsive.js
@@ -44,6 +44,7 @@
// Attach a resize handler to the window.
$(window)
.on('resize.tableresponsive', $.proxy(this, 'eventhandlerEvaluateColumnVisibility'))
+ .on('resize.tableresponsive', $.proxy(this, 'eventhandlerCollapseColumns'))
.trigger('resize.tableresponsive');
}
@@ -61,6 +62,15 @@
* or priority-medium.
*/
$.extend(TableResponsive.prototype, {
+ eventhandlerCollapseColumns: function (e) {
+ var $table = this.$table;
+ var $parent = $table.parent();
+ var parentWidth = $parent.width();
+ var tableWidth = $table.width();
+ if (parentWidth <= tableWidth) {
+ $table.addClass('is-collapsed');
+ }
+ },
eventhandlerEvaluateColumnVisibility: function (e) {
var pegged = parseInt(this.$link.data('pegged'), 10);
var hiddenLength = this.$headers.filter('.priority-medium:hidden, .priority-low:hidden').length;
diff --git a/core/modules/system/src/Tests/Theme/TableTest.php b/core/modules/system/src/Tests/Theme/TableTest.php
index 1440c92..9eae183 100644
--- a/core/modules/system/src/Tests/Theme/TableTest.php
+++ b/core/modules/system/src/Tests/Theme/TableTest.php
@@ -140,7 +140,7 @@ function testThemeTableFooter() {
$this->render($table);
$this->removeWhiteSpace();
- $this->assertRaw('| 1 |
| Foo |
', 'Table footer found.');
+ $this->assertRaw('| 1 |
| Foo |
', 'Table footer found.');
}
/**
@@ -160,7 +160,7 @@ function testThemeTableHeaderCellOption() {
);
$this->render($table);
$this->removeWhiteSpace();
- $this->assertRaw('1 | 1 | 1 | ', 'The th and td tags was printed correctly.');
+ $this->assertRaw('1 | 1 | 1 | ', 'The th and td tags was printed correctly.');
}
/**
@@ -232,9 +232,9 @@ public function testThemeTableResponsivePriority() {
$this->assertRaw('1 | ', 'Header 1: the priority-medium class was applied correctly.');
$this->assertRaw('2 | ', 'Header 2: the priority-low class was applied correctly.');
$this->assertRaw('3 | ', 'Header 3: no priority classes were applied.');
- $this->assertRaw('4 | ', 'Cell 1: the priority-medium class was applied correctly.');
- $this->assertRaw('5 | ', 'Cell 2: the priority-low class was applied correctly.');
- $this->assertRaw('6 | ', 'Cell 3: no priority classes were applied.');
+ $this->assertRaw('4 | ', 'Cell 1: the priority-medium class was applied correctly.');
+ $this->assertRaw('5 | ', 'Cell 2: the priority-low class was applied correctly.');
+ $this->assertRaw('6 | ', 'Cell 3: no priority classes were applied.');
}
}
diff --git a/core/modules/system/templates/table.html.twig b/core/modules/system/templates/table.html.twig
index 0ecc34c..f401cfb 100644
--- a/core/modules/system/templates/table.html.twig
+++ b/core/modules/system/templates/table.html.twig
@@ -30,6 +30,7 @@
* - content: The string to display in the table cell.
* - active_table_sort: A boolean indicating whether the cell is the active
table sort.
+ - label: The value of the related table header of this column.
* - footer: Table footer rows, in the same format as the rows variable.
* - empty: The message to display in an extra row if table does not have
* any rows.
@@ -75,7 +76,7 @@
{% for row in rows %}
{% for cell in row.cells %}
- <{{ cell.tag }}{{ cell.attributes }}>
+ <{{ cell.tag }}{{ cell.attributes }} data-th="{{ cell.label }}">
{{- cell.content -}}
{% endfor %}
@@ -94,7 +95,7 @@
{% for row in footer %}
{% for cell in row.cells %}
- <{{ cell.tag }}{{ cell.attributes }}>
+ <{{ cell.tag }}{{ cell.attributes }} data-th="{{ cell.label }}">
{{- cell.content -}}
{% endfor %}
diff --git a/core/modules/views/templates/views-view-table.html.twig b/core/modules/views/templates/views-view-table.html.twig
index 48f8a4f..b3d921e 100644
--- a/core/modules/views/templates/views-view-table.html.twig
+++ b/core/modules/views/templates/views-view-table.html.twig
@@ -22,6 +22,7 @@
* - columns: Row column items. Columns are keyed by column number.
* - attributes: HTML classes to apply to each column.
* - content: The column content.
+ * - label: The value of the related table header of this column.
* - default_classes: A flag indicating whether default classes should be
* used.
* - responsive: A flag indicating whether table is responsive.
@@ -94,7 +95,7 @@
{% set column_classes = column_classes|merge(['views-field-' ~ field]) %}
{% endfor %}
{% endif %}
-
+
{{ column.content }}
{% endfor %}
diff --git a/core/modules/views/views.theme.inc b/core/modules/views/views.theme.inc
index a9b6295..c659555 100644
--- a/core/modules/views/views.theme.inc
+++ b/core/modules/views/views.theme.inc
@@ -554,6 +554,11 @@ function template_preprocess_views_view_table(&$variables) {
$column_reference['attributes'] = array();
}
+ if (!empty($label)) {
+ $data_th = String::checkPlain(!empty($fields[$field]) ? $fields[$field]->label() : '');
+ $column_reference['label'] = $data_th;
+ }
+
if ($classes = $fields[$field]->elementClasses($num)) {
$column_reference['attributes']['class'][] = $classes;
}
diff --git a/core/themes/seven/css/components/tables.css b/core/themes/seven/css/components/tables.css
index 470537d..5d0eaad 100644
--- a/core/themes/seven/css/components/tables.css
+++ b/core/themes/seven/css/components/tables.css
@@ -153,10 +153,51 @@ table.system-status-report td:nth-child(-n+2) {
td.priority-medium {
display: none;
}
+
+ table.mobile-table {
+ width: 100%;
+ border-collapse: collapse;
+ table-layout: fixed;
+ }
+
+ table.mobile-table th {
+ display: none;
+ }
+
+ table.mobile-table td {
+ display: block;
+ border: none !important;
+ }
+
+ table.mobile-table td:before {
+ content: attr(data-th)" ";
+ font-weight: bold;
+ width: 8em;
+ display: inline-block;
+ }
}
@media screen and (max-width: 60em) { /* 920px */
th.priority-low,
td.priority-low {
display: none;
}
+ .responsive-enabled.is-collapsed {
+ width: 100%;
+ border-collapse: collapse;
+ table-layout: fixed;
+ }
+ .responsive-enabled.is-collapsed th {
+ display: none;
+ }
+ .responsive-enabled.is-collapsed td {
+ display: block;
+ border: none !important;
+ }
+ .responsive-enabled.is-collapsed td:before {
+ content: attr(data-th)" ";
+ font-weight: bold;
+ width: 8em;
+ display: inline-block;
+ }
}
+