diff --git a/modules/core/ui/dashboard/css/dashboard_layout.css b/modules/core/ui/dashboard/css/dashboard_layout.css deleted file mode 100644 index 52c746bfa..000000000 --- a/modules/core/ui/dashboard/css/dashboard_layout.css +++ /dev/null @@ -1,8 +0,0 @@ -.layout--twocol .layout__region { - box-sizing: border-box; - overflow-x: scroll; -} - -.layout--twocol .layout__region--first { - padding-right: 1.5em; -} diff --git a/modules/core/ui/dashboard/farm_ui_dashboard.libraries.yml b/modules/core/ui/dashboard/farm_ui_dashboard.libraries.yml deleted file mode 100644 index 7f49a9bcd..000000000 --- a/modules/core/ui/dashboard/farm_ui_dashboard.libraries.yml +++ /dev/null @@ -1,4 +0,0 @@ -dashboard_layout: - css: - theme: - css/dashboard_layout.css: { } diff --git a/modules/core/ui/dashboard/src/Controller/DashboardController.php b/modules/core/ui/dashboard/src/Controller/DashboardController.php index bdaeb1167..facdd5bf7 100644 --- a/modules/core/ui/dashboard/src/Controller/DashboardController.php +++ b/modules/core/ui/dashboard/src/Controller/DashboardController.php @@ -185,8 +185,6 @@ class DashboardController extends ControllerBase { // Build the layout. $render = $layoutInstance->build($regions); - // Add the dashboard_layout styles. - $render['#attached']['library'][] = 'farm_ui_dashboard/dashboard_layout'; return $render; } diff --git a/modules/core/ui/theme/css/dashboard.css b/modules/core/ui/theme/css/dashboard.css new file mode 100644 index 000000000..9ff7efe0a --- /dev/null +++ b/modules/core/ui/theme/css/dashboard.css @@ -0,0 +1,23 @@ +/* Add a gap between layout regions. */ +.layout--twocol { + --dashboard-spacing: var(--gin-spacing-s); + gap: var(--dashboard-spacing); +} + +/* Use flexbox within each region. */ +.layout--twocol .layout__region, +.layout--twocol .layout__region { + flex-basis: 100%; + display: flex; + flex-direction: column; + gap: var(--dashboard-spacing); +} + +/* Split first and second regions to two columns on large screens. */ +@media (min-width: 48em) { + .layout--twocol .layout__region--first, + .layout--twocol .layout__region--second { + flex-basis: 50%; + max-width: calc(50% - var(--dashboard-spacing)*.5); + } +} diff --git a/modules/core/ui/theme/farm_ui_theme.libraries.yml b/modules/core/ui/theme/farm_ui_theme.libraries.yml index 4d20f1aff..8545f23e5 100644 --- a/modules/core/ui/theme/farm_ui_theme.libraries.yml +++ b/modules/core/ui/theme/farm_ui_theme.libraries.yml @@ -2,6 +2,10 @@ asset_map_popup: css: theme: css/asset_map_popup.css: { } +dashboard: + css: + theme: + css/dashboard.css: { } flag: css: theme: diff --git a/modules/core/ui/theme/farm_ui_theme.module b/modules/core/ui/theme/farm_ui_theme.module index d85d629df..5e6a1b510 100644 --- a/modules/core/ui/theme/farm_ui_theme.module +++ b/modules/core/ui/theme/farm_ui_theme.module @@ -109,6 +109,13 @@ function farm_ui_theme_preprocess_log__full(&$variables) { $variables['#attached']['library'][] = 'farm_ui_theme/layout'; } +/** + * Implements hook_preprocess_HOOK(). + */ +function farm_ui_theme_preprocess_page__dashboard(&$variables) { + $variables['#attached']['library'][] = 'farm_ui_theme/dashboard'; +} + /** * Implements hook_preprocess_HOOK(). */