diff --git a/application/dashboardlayout.class.inc.php b/application/dashboardlayout.class.inc.php index 2792e71ce..46da64dfe 100644 --- a/application/dashboardlayout.class.inc.php +++ b/application/dashboardlayout.class.inc.php @@ -116,18 +116,30 @@ abstract class DashboardLayoutMultiCol extends DashboardLayout $oPage->add(''); $iCellIdx = 0; - $fColSize = 100 / $this->iNbCols; - $sStyle = $bEditMode ? 'border: 1px #ccc dashed; width:'.$fColSize.'%;' : 'width: '.$fColSize.'%;'; - $sClass = $bEditMode ? 'layout_cell edit_mode' : 'dashboard'; + $fColSize = ceil(100 / $this->iNbCols); // Note: ceil() is necessary otherwise the table will be too short since the new flex layout (N°2847) $iNbRows = ceil(count($aCells) / $this->iNbCols); + $aStyleProperties = []; + // - Explicit full width when single column + if($this->iNbCols > 1) + { + $aStyleProperties[] = 'width: '.$fColSize.'%;'; + } + // - Visible borders in editor + if($bEditMode) + { + $aStyleProperties[] = 'border: 1px #ccc dashed;'; + + } + $sClass = $bEditMode ? 'layout_cell edit_mode' : 'dashboard'; + for($iRows = 0; $iRows < $iNbRows; $iRows++) { $oPage->add(""); for($iCols = 0; $iCols < $this->iNbCols; $iCols++) { $sCellClass = ($iRows == $iNbRows-1) ? $sClass.' layout_last_used_rank' : $sClass; - $oPage->add(""); for($iCols = 0; $iCols < $this->iNbCols; $iCols++) { - $oPage->add("'); } diff --git a/css/backoffice/components/dashlet/_dashlet-badge.scss b/css/backoffice/components/dashlet/_dashlet-badge.scss index 970dafc64..348b21f0c 100644 --- a/css/backoffice/components/dashlet/_dashlet-badge.scss +++ b/css/backoffice/components/dashlet/_dashlet-badge.scss @@ -22,7 +22,10 @@ $ibo-dashlet-badge--action-icon--margin-right: 6px !default; /* Rules */ .ibo-dashlet-badge{ - min-width: $ibo-dashlet-badge--min-width; + //min-width: $ibo-dashlet-badge--min-width; + flex-basis: $ibo-dashlet-badge--min-width; + flex-grow: 1; + flex-shrink: 1; padding: $ibo-dashlet-badge--padding-y $ibo-dashlet-badge--padding-x; background-color: $ibo-dashlet-badge--background-color; border: $ibo-dashlet-badge--border; @@ -38,6 +41,7 @@ $ibo-dashlet-badge--action-icon--margin-right: 6px !default; } .ibo-dashlet-badge--icon{ width: $ibo-dashlet-badge--icon--size; + min-width: $ibo-dashlet-badge--icon--size; /* To avoid image being shrinked when container is too small */ max-height: $ibo-dashlet-badge--icon--size; } @@ -69,4 +73,4 @@ $ibo-dashlet-badge--action-icon--margin-right: 6px !default; } .ibo-dashlet-badge--action-create-icon{ margin-right: $ibo-dashlet-badge--action-icon--margin-right; -} \ No newline at end of file +} diff --git a/css/backoffice/components/dashlet/_dashlet.scss b/css/backoffice/components/dashlet/_dashlet.scss index 7bcdab614..56eff6318 100644 --- a/css/backoffice/components/dashlet/_dashlet.scss +++ b/css/backoffice/components/dashlet/_dashlet.scss @@ -6,15 +6,13 @@ /* SCSS variables */ $ibo-dashlet--width: 100% !default; $ibo-dashlet--width--is-inline: auto !default; -$ibo-dashlet--margin-bottom--is-last: 16px !default; +$ibo-dashlet--elements-spacing-x: 24px !default; +$ibo-dashlet--elements-spacing-y: 24px !default; /* Rules */ .ibo-dashlet{ width: $ibo-dashlet--width; - - &:not(:last-of-type){ - margin-bottom: $ibo-dashlet--margin-bottom--is-last; - } + margin: calc(#{$ibo-dashlet--elements-spacing-y} / 2) calc(#{$ibo-dashlet--elements-spacing-x} / 2); } .ibo-dashlet--is-inline{ width: $ibo-dashlet--width--is-inline; diff --git a/css/backoffice/layout/dashboard/_dashboard.scss b/css/backoffice/layout/dashboard/_dashboard.scss index 0d64d2aa3..4336387e9 100644 --- a/css/backoffice/layout/dashboard/_dashboard.scss +++ b/css/backoffice/layout/dashboard/_dashboard.scss @@ -5,8 +5,8 @@ /* SCSS variables */ $ibo-dashboard--grid--width: 100% !default; -$ibo-dashboard--grid--elements-spacing: 16px !default; -$ibo-dashboard--grid-row--elements-spacing: 16px !default; +$ibo-dashboard--grid--elements-spacing-x: $ibo-dashlet--elements-spacing-x !default; +$ibo-dashboard--grid--elements-spacing-y: $ibo-dashlet--elements-spacing-y !default; /* Rules */ .ibo-dashboard--content{ @@ -19,23 +19,29 @@ $ibo-dashboard--grid-row--elements-spacing: 16px !default; .ibo-dashboard--grid-row{ display: flex; flex-direction: row; + overflow: hidden; /* Because of the column negative margin (which is for the dashlets spacing) */ - &:not(:first-child){ - padding-top: calc(#{$ibo-dashboard--grid--elements-spacing} / 2); - } + /* Compensate negative margin on inner borders to simulate egal dashlets spacing between rows */ &:not(:last-child){ - padding-bottom: calc(#{$ibo-dashboard--grid--elements-spacing} / 2); + padding-bottom: calc(#{$ibo-dashboard--grid--elements-spacing-y} / 2); + } + &:not(:first-child){ + padding-top: calc(#{$ibo-dashboard--grid--elements-spacing-y} / 2); } } .ibo-dashboard--grid-column{ display: flex; flex-flow: row wrap; justify-content: space-between; + align-items: flex-start; + width: calc(100% + (2 * #{$ibo-dashboard--grid--elements-spacing-x})); + margin: calc(-1 * #{$ibo-dashboard--grid--elements-spacing-y} / 2) calc(-1 * #{$ibo-dashboard--grid--elements-spacing-x} / 2); /* Because of the margin all around the dashlets, we need to compensate it */ + /* Compensate negative margin on inner borders to simulate egal dashlets spacing between columns */ &:not(:last-child) { - padding-right: calc(#{$ibo-dashboard--grid-row--elements-spacing} / 2); + margin-right: 0; } &:not(:first-child) { - padding-left: calc(#{$ibo-dashboard--grid-row--elements-spacing} / 2); + margin-left: 0; } } \ No newline at end of file diff --git a/css/light-grey.scss b/css/light-grey.scss index 86185b93b..199b4d7f8 100644 --- a/css/light-grey.scss +++ b/css/light-grey.scss @@ -2895,7 +2895,7 @@ } td.layout_cell { - height: 50px; /* min-height does not work */ + min-height: 50px; /* min-height seems to work now since we dropped IE support */ vertical-align: top; }
"); + $oPage->add(""); if (array_key_exists($iCellIdx, $aCells)) { $aDashlets = $aCells[$iCellIdx]; @@ -158,11 +170,10 @@ abstract class DashboardLayoutMultiCol extends DashboardLayout } if ($bEditMode) // Add one row for extensibility { - $sStyle = 'style="border: 1px #ccc dashed; width:'.$fColSize.'%;" class="layout_cell edit_mode layout_extension" data-dashboard-grid-cell-index="'.$iCellIdx.'"'; $oPage->add("
"); + $oPage->add(""); $oPage->add(' '); $oPage->add('