Dashboard improvements #712

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

modules/core/ui/dashboard/css/dashboard_layout.css

@@ -1,8 +0,0 @@
-.layout--twocol .layout__region {
-  box-sizing: border-box;
-  overflow-x: scroll;
-}
-
-.layout--twocol .layout__region--first {
-  padding-right: 1.5em;
-}

modules/core/ui/dashboard/farm_ui_dashboard.libraries.yml

@@ -1,4 +0,0 @@
-dashboard_layout:
-  css:
-    theme:
-      css/dashboard_layout.css: { }

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;
   }
 

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);
+}

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:

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().
  */