mirror of
https://github.com/farmOS/farmOS.git
synced 2024-02-23 11:37:38 +01:00
Use flexbox to position and space dashboard panes
This commit is contained in:
parent
74dfee5024
commit
a195744803
6 changed files with 34 additions and 14 deletions
|
@ -1,8 +0,0 @@
|
|||
.layout--twocol .layout__region {
|
||||
box-sizing: border-box;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.layout--twocol .layout__region--first {
|
||||
padding-right: 1.5em;
|
||||
}
|
|
@ -1,4 +0,0 @@
|
|||
dashboard_layout:
|
||||
css:
|
||||
theme:
|
||||
css/dashboard_layout.css: { }
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
23
modules/core/ui/theme/css/dashboard.css
Normal file
23
modules/core/ui/theme/css/dashboard.css
Normal file
|
@ -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);
|
||||
}
|
||||
}
|
|
@ -2,6 +2,10 @@ asset_map_popup:
|
|||
css:
|
||||
theme:
|
||||
css/asset_map_popup.css: { }
|
||||
dashboard:
|
||||
css:
|
||||
theme:
|
||||
css/dashboard.css: { }
|
||||
flag:
|
||||
css:
|
||||
theme:
|
||||
|
|
|
@ -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().
|
||||
*/
|
||||
|
|
Loading…
Reference in a new issue