N°2847 - Multi columns layout: Fix alignment with parent (also some renaming to match conventions)

css/backoffice/layout/multi-column/_column.scss

@@ -3,11 +3,20 @@
  * license     http://opensource.org/licenses/AGPL-3.0
  */
 
+$ibo-column--min-width: 300px !default;
+$ibo-column--padding-x: abs($ibo-multi-column--margin-x) !default;
+$ibo-column--padding-y: 0 !default;
+
+$ibo-column--margin-bottom--is-last-element: 20px !default;
+
 .ibo-column {
-  min-width: 300px;
+  min-width: $ibo-column--min-width;
   flex-grow: 1;
   flex-shrink: 1;
-  padding: 0 20px;
+  padding: $ibo-column--padding-y $ibo-column--padding-x;
   flex-basis: 10%;
-  margin-bottom: 20px;
+
+  :not(:last-child){
+    margin-bottom: $ibo-column--margin-bottom--is-last-element;
+  }
 }

css/backoffice/layout/multi-column/_multi-column.scss

@@ -3,8 +3,11 @@
  * license     http://opensource.org/licenses/AGPL-3.0
  */
 
+$ibo-multi-column--margin-x: -16px !default; /* This is to compensate columns padding and make the whole multicolumn align with the parent borders (cf. Bootstrap rows / cols) */
+$ibo-multi-column--margin-y: 0 !default;
+
 .ibo-multi-column {
-  width: 100%;
   display: flex;
   flex-wrap: wrap;
+  margin: $ibo-multi-column--margin-y $ibo-multi-column--margin-x;
 }

sources/application/UI/Layout/MultiColumn/Column/Column.php

@@ -19,5 +19,5 @@ use Combodo\iTop\Application\UI\Layout\UIContentBlock;
 class Column extends UIContentBlock {
 	// Overloaded constants
 	public const BLOCK_CODE = 'ibo-column';
-	public const HTML_TEMPLATE_REL_PATH = 'layouts/multicolumn/column/layout';
+	public const HTML_TEMPLATE_REL_PATH = 'layouts/multi-column/column/layout';
 }

sources/application/UI/Layout/MultiColumn/MultiColumn.php

@@ -19,8 +19,8 @@ use Combodo\iTop\Application\UI\UIBlock;
  */
 class MultiColumn extends UIBlock {
 	// Overloaded constants
-	public const BLOCK_CODE = 'ibo-multicolumn';
-	public const HTML_TEMPLATE_REL_PATH = 'layouts/multicolumn/layout';
+	public const BLOCK_CODE = 'ibo-multi-column';
+	public const HTML_TEMPLATE_REL_PATH = 'layouts/multi-column/layout';
 
 	/** @var \Combodo\iTop\Application\UI\Layout\MultiColumn\Column\Column[] */
 	protected $aColumns;