diff --git a/CHANGELOG.md b/CHANGELOG.md index ae4044be5..51bf9d04d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed +- [Dashboard improvements #712](https://github.com/farmOS/farmOS/pull/712) - [Misc quick form code and documentation improvements #703](https://github.com/farmOS/farmOS/pull/703) ### Deprecated 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 f6c0cb92d..facdd5bf7 100644 --- a/modules/core/ui/dashboard/src/Controller/DashboardController.php +++ b/modules/core/ui/dashboard/src/Controller/DashboardController.php @@ -72,15 +72,6 @@ class DashboardController extends ControllerBase { // Ask modules for dashboard groups. $build = $this->moduleHandler()->invokeAll('farm_dashboard_groups'); - // Default the group #type to container if none was provided. - foreach ($build as $region => $groups) { - foreach ($groups as $name => $group) { - if (!empty($group) && empty($group['#type'])) { - $build[$region][$name]['#type'] = 'container'; - } - } - } - // Ask modules for dashboard panes. $panes = $this->moduleHandler()->invokeAll('farm_dashboard_panes'); @@ -163,6 +154,9 @@ class DashboardController extends ControllerBase { $container = [ '#type' => 'container', '#weight' => $weight, + '#attributes' => [ + 'class' => ['dashboard-pane'], + ], ]; // If a title is set, make it a fieldset. @@ -191,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..d7b6e2327 --- /dev/null +++ b/modules/core/ui/theme/css/dashboard.css @@ -0,0 +1,47 @@ +/* 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); + } +} + +/* Style dashboard fieldsets similar to gin-layer-wrapper. */ +.layout__region > fieldset.dashboard-pane { + margin: 0; + padding-top: var(--gin-spacing-m); + background: var(--gin-bg-layer); + border: 1px solid var(--gin-border-color-layer); + box-shadow: var(--gin-shadow-l1); + border-radius: var(--gin-border-l); +} + +/* Reduce spacing within dashboard fieldsets. */ +.layout__region > fieldset.dashboard-pane .fieldset__label { + padding: 0 var(--gin-spacing-m); +} +.layout__region > fieldset.dashboard-pane .fieldset__wrapper { + margin: 0 var(--gin-spacing-m) var(--gin-spacing-m) var(--gin-spacing-m); +} + +/* Increase fieldset font. */ +.layout__region > fieldset.dashboard-pane .fieldset__label { + font-size: var(--gin-font-size-l); + font-weight: var(--gin-font-weight-bold); +} 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(). */