diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index 62bbb58..7806087 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -844,6 +844,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;
}
@@ -879,6 +880,7 @@ function template_preprocess_table(&$variables) {
if (is_array($cell_content)) {
$cell_content = drupal_render($cell_content);
}
+ $cell_label = $cell_content;
tablesort_header($cell_content, $cell, $variables['header'], $ts);
@@ -889,6 +891,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;
@@ -957,6 +962,10 @@ 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'];
+ $variables[$section][$row_key]['cells'][$col_key]['attributes']->setAttribute('data-th', $variables['header'][$col_key]['label']);
+ }
}
}
}
diff --git a/core/misc/tableresponsive.js b/core/misc/tableresponsive.js
index b4eab62..e39e52d 100644
--- a/core/misc/tableresponsive.js
+++ b/core/misc/tableresponsive.js
@@ -45,6 +45,7 @@ function TableResponsive(table) {
// Attach a resize handler to the window.
$(window)
.on('resize.tableresponsive', $.proxy(this, 'eventhandlerEvaluateColumnVisibility'))
+ .on('resize.tableresponsive', $.proxy(this, 'eventhandlerCollapseColumns'))
.trigger('resize.tableresponsive');
}
@@ -62,6 +63,15 @@ function TableResponsive(table) {
* 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/filter/src/Tests/FilterAdminTest.php b/core/modules/filter/src/Tests/FilterAdminTest.php
index 1dccd5d..895c5f0 100644
--- a/core/modules/filter/src/Tests/FilterAdminTest.php
+++ b/core/modules/filter/src/Tests/FilterAdminTest.php
@@ -377,10 +377,10 @@ function testFilterTipHtmlEscape() {
$this->drupalGet('filter/tips');
- $this->assertRaw('
' . $link_as_code . ' | ');
- $this->assertRaw('' . $link . ' | ');
- $this->assertRaw('' . $ampersand_as_code . ' | ');
- $this->assertRaw('' . $ampersand . ' | ');
+ $this->assertRaw('' . $link_as_code . ' | ');
+ $this->assertRaw('' . $link . ' | ');
+ $this->assertRaw('' . $ampersand_as_code . ' | ');
+ $this->assertRaw('' . $ampersand . ' | ');
}
}
diff --git a/core/modules/system/css/system.module.css b/core/modules/system/css/system.module.css
index 0359e4b..ced287a 100644
--- a/core/modules/system/css/system.module.css
+++ b/core/modules/system/css/system.module.css
@@ -105,6 +105,11 @@ tr.add-new .tabledrag-changed {
a.tabledrag-handle:hover {
text-decoration: none;
}
+
+/* If inside of a collapsible table, float the handle to the right side */
+.responsive-enabled.is-collapsed a.tabledrag-handle {
+ float: right;
+}
a.tabledrag-handle .handle {
background: url(../../../misc/icons/787878/move.svg) no-repeat 6px 7px;
height: 14px;
diff --git a/core/modules/system/src/Tests/Theme/TableTest.php b/core/modules/system/src/Tests/Theme/TableTest.php
index 1440c92..a1b05f0 100644
--- a/core/modules/system/src/Tests/Theme/TableTest.php
+++ b/core/modules/system/src/Tests/Theme/TableTest.php
@@ -232,8 +232,8 @@ 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('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..fef7f55 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.
diff --git a/core/modules/views/templates/views-view-table.html.twig b/core/modules/views/templates/views-view-table.html.twig
index 48f8a4f..542cefd 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.
diff --git a/core/modules/views/views.theme.inc b/core/modules/views/views.theme.inc
index e4e56ab..e6b0503 100644
--- a/core/modules/views/views.theme.inc
+++ b/core/modules/views/views.theme.inc
@@ -558,6 +558,11 @@ function template_preprocess_views_view_table(&$variables) {
$column_reference['attributes'] = array();
}
+ if (!empty($label)) {
+ $data_th = SafeMarkup::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 afc9301..47f5db9 100644
--- a/core/themes/seven/css/components/tables.css
+++ b/core/themes/seven/css/components/tables.css
@@ -134,10 +134,59 @@ th.select-all {
td.priority-medium {
display: none;
}
+ .mobile-table {
+ width: 100%;
+ border-collapse: collapse;
+ table-layout: fixed;
+ }
+ .mobile-table th {
+ display: none;
+ }
+ .mobile-table td {
+ display: block;
+ border: none;
+ }
+ .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;
+ }
+ .responsive-enabled.is-collapsed td:before {
+ content: attr(data-th)" ";
+ font-weight: bold;
+ width: 8em;
+ display: inline-block;
+ }
+
+ /* A few overrides to cover some edge cases. */
+ .responsive-enabled.is-collapsed .form-item {
+ display: inline-block;
+ }
+ .responsive-enabled.is-collapsed .dropbutton-wrapper {
+ width: auto;
+ display: inline-block
+ }
+ .touch .responsive-enabled.is-collapsed .draggable td {
+ padding: 10px 12px;
+ }
}
+