diff --git a/core/includes/theme.inc b/core/includes/theme.inc index e772289..f86177e 100644 --- a/core/includes/theme.inc +++ b/core/includes/theme.inc @@ -1245,6 +1245,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; } @@ -1258,6 +1259,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. @@ -1290,6 +1292,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; @@ -1358,6 +1363,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/modules/system/src/Tests/Theme/TableTest.php b/core/modules/system/src/Tests/Theme/TableTest.php index b781d20..bd2b804 100644 --- a/core/modules/system/src/Tests/Theme/TableTest.php +++ b/core/modules/system/src/Tests/Theme/TableTest.php @@ -129,7 +129,7 @@ function testThemeTableFooter() { $this->render($table); $this->removeWhiteSpace(); - $this->assertRaw('
+ | {{ column.content }} | {% endfor %} diff --git a/core/modules/views/views.theme.inc b/core/modules/views/views.theme.inc index ebef6f8..05967eb 100644 --- a/core/modules/views/views.theme.inc +++ b/core/modules/views/views.theme.inc @@ -544,6 +544,11 @@ function template_preprocess_views_view_table(&$variables) { $column_reference['attributes']['class'][] = 'views-field-' . $variables['fields'][$field]; } + 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 524c83b..c0f64ee 100644 --- a/core/themes/seven/css/components/tables.css +++ b/core/themes/seven/css/components/tables.css @@ -152,10 +152,55 @@ table.system-status-report tr.error { 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; } + + 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; + } } +