diff --git a/core/themes/olivero/css/components/table.css b/core/themes/olivero/css/components/table.css index 8e148fabc04725102e41437a6b0c4a145768cdab..dd6b748b6f8bec090dadc734b85df11eb0982b9c 100644 --- a/core/themes/olivero/css/components/table.css +++ b/core/themes/olivero/css/components/table.css @@ -12,7 +12,8 @@ .forum table, .text-content table, -.views-table { +.views-table, +.draggable-table { margin-top: 2.25rem; margin-bottom: 2.25rem; border-spacing: 0; @@ -24,15 +25,15 @@ line-height: 1.6875rem } -[dir="ltr"] .forum table caption,[dir="ltr"] .text-content table caption,[dir="ltr"] .views-table caption { +[dir="ltr"] .forum table caption,[dir="ltr"] .text-content table caption,[dir="ltr"] .views-table caption,[dir="ltr"] .draggable-table caption { text-align: left } -[dir="rtl"] .forum table caption,[dir="rtl"] .text-content table caption,[dir="rtl"] .views-table caption { +[dir="rtl"] .forum table caption,[dir="rtl"] .text-content table caption,[dir="rtl"] .views-table caption,[dir="rtl"] .draggable-table caption { text-align: right } -.forum table caption, .text-content table caption, .views-table caption { +.forum table caption, .text-content table caption, .views-table caption, .draggable-table caption { margin-bottom: 1.125rem; color: #313637; font-family: "Lora", "georgia", serif; @@ -41,7 +42,7 @@ line-height: 1.125rem; } -.forum table tr:last-child td, .text-content table tr:last-child td, .views-table tr:last-child td { +.forum table tr:last-child td, .text-content table tr:last-child td, .views-table tr:last-child td, .draggable-table tr:last-child td { border-bottom: 0; } @@ -50,7 +51,9 @@ .text-content table td,[dir="ltr"] .text-content table th,[dir="ltr"] .views-table td,[dir="ltr"] - .views-table th { + .views-table th,[dir="ltr"] + .draggable-table td,[dir="ltr"] + .draggable-table th { padding-left: 0 } @@ -59,7 +62,9 @@ .text-content table td,[dir="rtl"] .text-content table th,[dir="rtl"] .views-table td,[dir="rtl"] - .views-table th { + .views-table th,[dir="rtl"] + .draggable-table td,[dir="rtl"] + .draggable-table th { padding-right: 0 } @@ -68,7 +73,9 @@ .text-content table td,[dir="ltr"] .text-content table th,[dir="ltr"] .views-table td,[dir="ltr"] - .views-table th { + .views-table th,[dir="ltr"] + .draggable-table td,[dir="ltr"] + .draggable-table th { padding-right: 1.125rem } @@ -77,7 +84,9 @@ .text-content table td,[dir="rtl"] .text-content table th,[dir="rtl"] .views-table td,[dir="rtl"] - .views-table th { + .views-table th,[dir="rtl"] + .draggable-table td,[dir="rtl"] + .draggable-table th { padding-left: 1.125rem } @@ -86,37 +95,39 @@ .text-content table td, .text-content table th, .views-table td, - .views-table th { + .views-table th, + .draggable-table td, + .draggable-table th { padding-top: 1.125rem; padding-bottom: 1.125rem; vertical-align: top; } -[dir="ltr"] .forum table th,[dir="ltr"] .text-content table th,[dir="ltr"] .views-table th { +[dir="ltr"] .forum table th,[dir="ltr"] .text-content table th,[dir="ltr"] .views-table th,[dir="ltr"] .draggable-table th { margin-left: 0 } -[dir="rtl"] .forum table th,[dir="rtl"] .text-content table th,[dir="rtl"] .views-table th { +[dir="rtl"] .forum table th,[dir="rtl"] .text-content table th,[dir="rtl"] .views-table th,[dir="rtl"] .draggable-table th { margin-right: 0 } -[dir="ltr"] .forum table th,[dir="ltr"] .text-content table th,[dir="ltr"] .views-table th { +[dir="ltr"] .forum table th,[dir="ltr"] .text-content table th,[dir="ltr"] .views-table th,[dir="ltr"] .draggable-table th { margin-right: 0 } -[dir="rtl"] .forum table th,[dir="rtl"] .text-content table th,[dir="rtl"] .views-table th { +[dir="rtl"] .forum table th,[dir="rtl"] .text-content table th,[dir="rtl"] .views-table th,[dir="rtl"] .draggable-table th { margin-left: 0 } -[dir="ltr"] .forum table th,[dir="ltr"] .text-content table th,[dir="ltr"] .views-table th { +[dir="ltr"] .forum table th,[dir="ltr"] .text-content table th,[dir="ltr"] .views-table th,[dir="ltr"] .draggable-table th { text-align: left } -[dir="rtl"] .forum table th,[dir="rtl"] .text-content table th,[dir="rtl"] .views-table th { +[dir="rtl"] .forum table th,[dir="rtl"] .text-content table th,[dir="rtl"] .views-table th,[dir="rtl"] .draggable-table th { text-align: right } -.forum table th, .text-content table th, .views-table th { +.forum table th, .text-content table th, .views-table th, .draggable-table th { margin-top: 0; margin-bottom: 0; letter-spacing: 0.02em; @@ -131,35 +142,54 @@ */ } -[dir="ltr"] .forum table th.text-align-left,[dir="ltr"] .text-content table th.text-align-left,[dir="ltr"] .views-table th.text-align-left { +[dir="ltr"] .forum table th.text-align-left,[dir="ltr"] .text-content table th.text-align-left,[dir="ltr"] .views-table th.text-align-left,[dir="ltr"] .draggable-table th.text-align-left { text-align: left } -[dir="rtl"] .forum table th.text-align-left,[dir="rtl"] .text-content table th.text-align-left,[dir="rtl"] .views-table th.text-align-left { +[dir="rtl"] .forum table th.text-align-left,[dir="rtl"] .text-content table th.text-align-left,[dir="rtl"] .views-table th.text-align-left,[dir="rtl"] .draggable-table th.text-align-left { text-align: right } -[dir="ltr"] .forum table th.text-align-right,[dir="ltr"] .text-content table th.text-align-right,[dir="ltr"] .views-table th.text-align-right { +[dir="ltr"] .forum table th.text-align-right,[dir="ltr"] .text-content table th.text-align-right,[dir="ltr"] .views-table th.text-align-right,[dir="ltr"] .draggable-table th.text-align-right { text-align: right } -[dir="rtl"] .forum table th.text-align-right,[dir="rtl"] .text-content table th.text-align-right,[dir="rtl"] .views-table th.text-align-right { +[dir="rtl"] .forum table th.text-align-right,[dir="rtl"] .text-content table th.text-align-right,[dir="rtl"] .views-table th.text-align-right,[dir="rtl"] .draggable-table th.text-align-right { text-align: left } -.forum table th.text-align-center, .text-content table th.text-align-center, .views-table th.text-align-center { +.forum table th.text-align-center, .text-content table th.text-align-center, .views-table th.text-align-center, .draggable-table th.text-align-center { text-align: center; } -.forum table th.text-align-justify, .text-content table th.text-align-justify, .views-table th.text-align-justify { +.forum table th.text-align-justify, .text-content table th.text-align-justify, .views-table th.text-align-justify, .draggable-table th.text-align-justify { text-align: justify; } -.forum table td, .text-content table td, .views-table td { +.forum table td, .text-content table td, .views-table td, .draggable-table td { white-space: normal; border-bottom: 2px solid #98abb9; } +.forum table th.checkbox, + .forum table td.checkbox, + .text-content table th.checkbox, + .text-content table td.checkbox, + .views-table th.checkbox, + .views-table td.checkbox, + .draggable-table th.checkbox, + .draggable-table td.checkbox { + text-align: center; + } + +.draggable-table { + width: 100%; +} + +.draggable-table .form-item { + margin-top: 0; +} + .tablesort { vertical-align: middle; } diff --git a/core/themes/olivero/css/components/table.pcss.css b/core/themes/olivero/css/components/table.pcss.css index 11473ae39704784537437154a6aae77523d9108c..8d4d3c53cb670a8869b72b17434543e19e82b482 100644 --- a/core/themes/olivero/css/components/table.pcss.css +++ b/core/themes/olivero/css/components/table.pcss.css @@ -7,7 +7,8 @@ .forum table, .text-content table, -.views-table { +.views-table, +.draggable-table { margin-block-start: var(--sp2); margin-block-end: var(--sp2); border-spacing: 0; @@ -80,6 +81,19 @@ white-space: normal; border-block-end: 2px solid var(--color--gray-40); } + + & th.checkbox, + & td.checkbox { + text-align: center; + } +} + +.draggable-table { + width: 100%; +} + +.draggable-table .form-item { + margin-top: 0; } .tablesort { diff --git a/core/themes/olivero/css/components/tabledrag.css b/core/themes/olivero/css/components/tabledrag.css index aaee63b567d6ac73ec29e0dd3c5406036f3b24a2..ee42174ec10c76b7d9244543a41224f6433e98f3 100644 --- a/core/themes/olivero/css/components/tabledrag.css +++ b/core/themes/olivero/css/components/tabledrag.css @@ -10,12 +10,69 @@ * Styles for tabledrag. */ +.draggable:hover { + background-color: #f7f9fa; +} + +.draggable.drag { + background-color: #f1f4f7; +} + +.draggable.drag-previous { + background-color: #e7edf1; +} + +.drag-previous a { + color: #313637; /* Ensure proper contrast. */ +} + +a.tabledrag-handle, +.touchevents a.tabledrag-handle { + width: 2.25rem; + height: 2.25rem; +} + +[dir="ltr"] .draggable a.tabledrag-handle { + margin-left: 0; +} + +[dir="rtl"] .draggable a.tabledrag-handle { + margin-right: 0; +} + a.tabledrag-handle .handle { width: 2.25rem; height: 2.25rem; + margin: 0; + background-position: 50% 5px; } .touchevents a.tabledrag-handle .handle { height: 2.25rem; - background-position: 40% 10px; + background-position: 50% 5px; +} + +[dir="ltr"] .touchevents .draggable td { + padding-left: 0; +} + +[dir="rtl"] .touchevents .draggable td { + padding-right: 0; +} + +[dir="ltr"] .touchevents .draggable td { + padding-right: 0.5625rem; +} + +[dir="rtl"] .touchevents .draggable td { + padding-left: 0.5625rem; +} + +.touchevents .draggable td { + padding-top: 0.5625rem; + padding-bottom: 0.5625rem; +} + +.touchevents .draggable .menu-item__link { + padding: 0; } diff --git a/core/themes/olivero/css/components/tabledrag.pcss.css b/core/themes/olivero/css/components/tabledrag.pcss.css index 2043d79f0b6f0970c88ceffc207d4fed9c1ec2ab..2a377224d6b8f41d051b85fab722af9c82cefa2d 100644 --- a/core/themes/olivero/css/components/tabledrag.pcss.css +++ b/core/themes/olivero/css/components/tabledrag.pcss.css @@ -5,12 +5,50 @@ @import "../base/variables.pcss.css"; +.draggable:hover { + background-color: var(--color--gray-95); +} + +.draggable.drag { + background-color: var(--color--gray-90); +} + +.draggable.drag-previous { + background-color: var(--color--gray-80); +} + +.drag-previous a { + color: var(--color--gray-10); /* Ensure proper contrast. */ +} + +a.tabledrag-handle, +.touchevents a.tabledrag-handle { + width: 36px; + height: 36px; +} + +.draggable a.tabledrag-handle { + margin-inline-start: 0; +} + a.tabledrag-handle .handle { width: var(--sp2); height: var(--sp2); + margin: 0; + background-position: 50% 5px; } .touchevents a.tabledrag-handle .handle { height: var(--sp2); - background-position: 40% 10px; + background-position: 50% 5px; +} + +.touchevents .draggable td { + padding-block: var(--sp0-5); + padding-inline-start: 0; + padding-inline-end: var(--sp0-5); +} + +.touchevents .draggable .menu-item__link { + padding: 0; } diff --git a/core/themes/olivero/olivero.theme b/core/themes/olivero/olivero.theme index 840a4e5e23e9668a33be208584ece7fcc9327a13..28790503a066042c22f8a0c74645195429402806 100644 --- a/core/themes/olivero/olivero.theme +++ b/core/themes/olivero/olivero.theme @@ -596,3 +596,22 @@ function olivero_preprocess_links__comment(&$variables) { $link['link']['#options']['attributes']['class'][] = 'comment__links-link'; } } + +/** + * Implements hook_preprocess_table(). + */ +function olivero_preprocess_table(&$variables) { + // Mark the whole table and the first cells if rows are draggable. + if (!empty($variables['rows'])) { + $draggable_row_found = FALSE; + foreach ($variables['rows'] as &$row) { + /** @var \Drupal\Core\Template\Attribute $row['attributes'] */ + if (!empty($row['attributes']) && $row['attributes']->hasClass('draggable')) { + if (!$draggable_row_found) { + $variables['attributes']['class'][] = 'draggable-table'; + $draggable_row_found = TRUE; + } + } + } + } +}