diff --git a/administrator/components/com_cpanel/tmpl/cpanel/default.php b/administrator/components/com_cpanel/tmpl/cpanel/default.php index 5928ef9ea81b9..088adc9b4a1a7 100644 --- a/administrator/components/com_cpanel/tmpl/cpanel/default.php +++ b/administrator/components/com_cpanel/tmpl/cpanel/default.php @@ -48,33 +48,24 @@ ); ?>
- quickicons) : ?> -
+
- quickicons) : foreach ($this->quickicons as $iconmodule) { echo ModuleHelper::renderModule($iconmodule, array('style' => 'well')); } - ?> -
-
- - -
-
- - modules as $module) { echo ModuleHelper::renderModule($module, array('style' => 'well')); } ?> - authorise('core.create', 'com_modules')) : ?> -
+ +authorise('core.create', 'com_modules')) : ?>
-
+ diff --git a/administrator/modules/mod_submenu/tmpl/default.php b/administrator/modules/mod_submenu/tmpl/default.php index add16541e95ac..3df3a0a1c6a28 100644 --- a/administrator/modules/mod_submenu/tmpl/default.php +++ b/administrator/modules/mod_submenu/tmpl/default.php @@ -17,69 +17,71 @@ ?> getChildren() as $child) : ?> hasChildren()) : ?> -
-

- icon) : ?> - title); ?> -

- +
diff --git a/administrator/templates/atum/scss/blocks/_global.scss b/administrator/templates/atum/scss/blocks/_global.scss index cea9db9c22041..d81860023770b 100644 --- a/administrator/templates/atum/scss/blocks/_global.scss +++ b/administrator/templates/atum/scss/blocks/_global.scss @@ -222,16 +222,23 @@ a[target="_blank"]::before { min-width: 1rem; } -.cpanel-help .card-columns, -.cpanel-system .card-columns { +.card-columns { + display: grid; + grid-gap: 0 15px; + grid-template-columns: 1fr; + @include media-breakpoint-up(md) { - column-count: 3; + grid-template-columns: 1fr 1fr; } } -.card-columns { - @include media-breakpoint-up(md) { - column-count: 2; +.cpanel-help, +.cpanel-system { + + .card-columns { + @include media-breakpoint-up(md) { + grid-template-columns: 1fr 1fr 1fr; + } } } diff --git a/administrator/templates/atum/scss/blocks/_quickicons.scss b/administrator/templates/atum/scss/blocks/_quickicons.scss index 8c090405a31f8..8e83d6f071f32 100644 --- a/administrator/templates/atum/scss/blocks/_quickicons.scss +++ b/administrator/templates/atum/scss/blocks/_quickicons.scss @@ -231,22 +231,6 @@ } } -#cpanel-modules { - - .cpanel-quickicons, - .cpanel { - .card-columns { - @include media-breakpoint-down(md) { - column-count: 2; - } - - @include media-breakpoint-down(sm) { - column-count: 1; - } - } - } -} - #wrapper.closed { .quick-icons { diff --git a/build/media_source/com_cpanel/js/admin-cpanel-default.es6.js b/build/media_source/com_cpanel/js/admin-cpanel-default.es6.js index 4cfcf2f2a4e5c..2c19911eac213 100644 --- a/build/media_source/com_cpanel/js/admin-cpanel-default.es6.js +++ b/build/media_source/com_cpanel/js/admin-cpanel-default.es6.js @@ -73,4 +73,46 @@ // Initialise document.addEventListener('DOMContentLoaded', onBoot); + + // Masonry layout for cpanel cards + const MasonryLayout = { + $gridBox: null, + + // Calculate "grid-row-end" property + resizeGridItem($cell, rowHeight, rowGap) { + const $content = $cell.querySelector('.card'); + const contentHeight = $content.getBoundingClientRect().height + rowGap; + const rowSpan = Math.ceil(contentHeight / (rowHeight + rowGap)); + + $cell.style.gridRowEnd = `span ${rowSpan}`; + }, + + // Check a size of every cell in the grid + resizeAllGridItems() { + const $gridCells = [].slice.call(MasonryLayout.$gridBox.children); + const gridStyle = window.getComputedStyle(MasonryLayout.$gridBox); + const gridAutoRows = parseInt(gridStyle.getPropertyValue('grid-auto-rows'), 10) || 0; + const gridRowGap = parseInt(gridStyle.getPropertyValue('grid-row-gap'), 10) || 10; + + $gridCells.forEach(($cell) => { + MasonryLayout.resizeGridItem($cell, gridAutoRows, gridRowGap); + }); + }, + + initialise() { + MasonryLayout.$gridBox = document.querySelector('#cpanel-modules .card-columns'); + MasonryLayout.resizeAllGridItems(); + + // Watch on window resize + let resizeTimer; + window.addEventListener('resize', () => { + window.clearTimeout(resizeTimer); + resizeTimer = window.setTimeout(MasonryLayout.resizeAllGridItems, 300); + }); + }, + }; + + // Initialise Masonry layout on full load, + // to be sure all images/fonts are loaded, and so cards have a "final" size + window.addEventListener('load', MasonryLayout.initialise); })(window, document, window.Joomla);