diff --git a/core/themes/olivero/css/layout/layout-views-grid.css b/core/themes/olivero/css/layout/layout-views-grid.css new file mode 100644 index 0000000000..e6c209039b --- /dev/null +++ b/core/themes/olivero/css/layout/layout-views-grid.css @@ -0,0 +1,60 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +/** + * @file + * Responsive styles for views grid horizontal layout. + * + * This creates the correct count of columns and automatically resizes the + * grid-items to fit into it. The grid-items will flow onto the next row when + * they reach the --views-grid-item--min-width value. + */ + +/* + * Media query breakpoints. + * Processed by postcss/postcss-custom-media. + */ + +/* Navigation related breakpoints */ + +/* Grid related breakpoints */ + +/* Grid shifts from 6 to 14 columns. */ + +/* Width of the entire grid maxes out. */ + +.views-view-grid { + --views-grid--layout-gap: var(--sp); + --views-grid--column-count: 4; /* Will be overridden by an inline style. */ + --views-grid-item--min-width: 6.25rem; +} + +.views-view-grid--horizontal { + /** + * Calculated values. + */ + --views-grid--gap-count: calc(var(--views-grid--column-count) - 1); + --views-grid--total-gap-width: calc(var(--views-grid--gap-count)*var(--views-grid--layout-gap)); + --views-grid-item--max-width: calc((100% - var(--views-grid--total-gap-width))/var(--views-grid--column-count)); + + display: grid; + grid-template-columns: repeat(auto-fit, minmax(max(var(--views-grid-item--min-width), var(--views-grid-item--max-width)), 1fr)); + grid-gap: var(--views-grid--layout-gap); +} + +.views-view-grid--vertical { + margin-bottom: calc(var(--views-grid-layout-gap)*-1); /* Offset the bottom row's padding. */ + column-width: var(--views-grid-item--min-width); + column-count: var(--views-grid--column-count); + grid-column-gap: var(--views-grid-layout-gap) +} + +.views-view-grid--vertical .views-view-grid__item > * { + padding-bottom: var(--views-grid-layout-gap); + page-break-inside: avoid; + break-inside: avoid; + } diff --git a/core/themes/olivero/css/layout/layout-views-grid.pcss.css b/core/themes/olivero/css/layout/layout-views-grid.pcss.css new file mode 100644 index 0000000000..4e9ce72a26 --- /dev/null +++ b/core/themes/olivero/css/layout/layout-views-grid.pcss.css @@ -0,0 +1,43 @@ +/** + * @file + * Responsive styles for views grid horizontal layout. + * + * This creates the correct count of columns and automatically resizes the + * grid-items to fit into it. The grid-items will flow onto the next row when + * they reach the --views-grid-item--min-width value. + */ + +@import "../base/media-queries.pcss.css"; + +.views-view-grid { + --views-grid--layout-gap: var(--sp); + --views-grid--column-count: 4; /* Will be overridden by an inline style. */ + --views-grid-item--min-width: 100px; +} + +.views-view-grid--horizontal { + /** + * Calculated values. + */ + --views-grid--gap-count: calc(var(--views-grid--column-count) - 1); + --views-grid--total-gap-width: calc(var(--views-grid--gap-count) * var(--views-grid--layout-gap)); + --views-grid-item--max-width: calc((100% - var(--views-grid--total-gap-width)) / var(--views-grid--column-count)); + + display: grid; + grid-template-columns: repeat(auto-fit, minmax(max(var(--views-grid-item--min-width), var(--views-grid-item--max-width)), 1fr)); + grid-gap: var(--views-grid--layout-gap); +} + +.views-view-grid--vertical { + margin-block-end: calc(-1 * var(--views-grid-layout-gap)); /* Offset the bottom row's padding. */ + column-width: var(--views-grid-item--min-width); + column-count: var(--views-grid--column-count); + column-gap: var(--views-grid-layout-gap); + + & .views-view-grid__item { + & > * { + padding-block-end: var(--views-grid-layout-gap); + break-inside: avoid; + } + } +} diff --git a/core/themes/olivero/js/navigation-utils.es6.js b/core/themes/olivero/js/navigation-utils.es6.js index 4530c9a03b..c3ce385f8d 100644 --- a/core/themes/olivero/js/navigation-utils.es6.js +++ b/core/themes/olivero/js/navigation-utils.es6.js @@ -79,12 +79,7 @@ */ function toggleStickyHeaderState(pinnedState) { if (isDesktopNav()) { - if (pinnedState === true) { - siteHeaderFixable.classList.add('is-expanded'); - } else { - siteHeaderFixable.classList.remove('is-expanded'); - } - + siteHeaderFixable.classList.toggle('is-expanded', pinnedState); stickyHeaderToggleButton.setAttribute('aria-checked', pinnedState); setStickyHeaderStorage(pinnedState); } @@ -133,11 +128,9 @@ entries.forEach((entry) => { // Firefox doesn't seem to support entry.isIntersecting properly, // so we check the intersectionRatio. - if (entry.intersectionRatio < 1) { - fixableElements.forEach((el) => el.classList.add('is-fixed')); - } else { - fixableElements.forEach((el) => el.classList.remove('is-fixed')); - } + fixableElements.forEach((el) => + el.classList.toggle('is-fixed', entry.intersectionRatio < 1), + ); }); } diff --git a/core/themes/olivero/js/navigation-utils.js b/core/themes/olivero/js/navigation-utils.js index fb22bee3ea..c24ec65252 100644 --- a/core/themes/olivero/js/navigation-utils.js +++ b/core/themes/olivero/js/navigation-utils.js @@ -32,12 +32,7 @@ function toggleStickyHeaderState(pinnedState) { if (isDesktopNav()) { - if (pinnedState === true) { - siteHeaderFixable.classList.add('is-expanded'); - } else { - siteHeaderFixable.classList.remove('is-expanded'); - } - + siteHeaderFixable.classList.toggle('is-expanded', pinnedState); stickyHeaderToggleButton.setAttribute('aria-checked', pinnedState); setStickyHeaderStorage(pinnedState); } @@ -63,11 +58,7 @@ function toggleDesktopNavVisibility(entries) { if (!isDesktopNav()) return; entries.forEach(entry => { - if (entry.intersectionRatio < 1) { - fixableElements.forEach(el => el.classList.add('is-fixed')); - } else { - fixableElements.forEach(el => el.classList.remove('is-fixed')); - } + fixableElements.forEach(el => el.classList.toggle('is-fixed', entry.intersectionRatio < 1)); }); } diff --git a/core/themes/olivero/js/navigation.es6.js b/core/themes/olivero/js/navigation.es6.js index 61ee137224..a206a7b62f 100644 --- a/core/themes/olivero/js/navigation.es6.js +++ b/core/themes/olivero/js/navigation.es6.js @@ -28,16 +28,9 @@ function toggleNav(props, state) { const value = !!state; props.navButton.setAttribute('aria-expanded', value); - - if (value) { - props.body.classList.add('is-overlay-active'); - props.body.classList.add('is-fixed'); - props.navWrapper.classList.add('is-active'); - } else { - props.body.classList.remove('is-overlay-active'); - props.body.classList.remove('is-fixed'); - props.navWrapper.classList.remove('is-active'); - } + props.body.classList.toggle('is-overlay-active', value); + props.body.classList.toggle('is-fixed', value); + props.navWrapper.classList.toggle('is-active', value); } /** diff --git a/core/themes/olivero/js/navigation.js b/core/themes/olivero/js/navigation.js index f60a84575c..db0f1f27d4 100644 --- a/core/themes/olivero/js/navigation.js +++ b/core/themes/olivero/js/navigation.js @@ -13,16 +13,9 @@ function toggleNav(props, state) { const value = !!state; props.navButton.setAttribute('aria-expanded', value); - - if (value) { - props.body.classList.add('is-overlay-active'); - props.body.classList.add('is-fixed'); - props.navWrapper.classList.add('is-active'); - } else { - props.body.classList.remove('is-overlay-active'); - props.body.classList.remove('is-fixed'); - props.navWrapper.classList.remove('is-active'); - } + props.body.classList.toggle('is-overlay-active', value); + props.body.classList.toggle('is-fixed', value); + props.navWrapper.classList.toggle('is-active', value); } function init(props) { diff --git a/core/themes/olivero/js/search.es6.js b/core/themes/olivero/js/search.es6.js index 4fc8f35396..ddf1059164 100644 --- a/core/themes/olivero/js/search.es6.js +++ b/core/themes/olivero/js/search.es6.js @@ -42,15 +42,13 @@ */ function toggleSearchVisibility(visibility) { searchWideButton.setAttribute('aria-expanded', visibility === true); + searchWideWrapper.classList.toggle('is-active', visibility); searchWideWrapper.addEventListener('transitionend', handleFocus, { once: true, }); if (visibility === true) { Drupal.olivero.closeAllSubNav(); - searchWideWrapper.classList.add('is-active'); - } else { - searchWideWrapper.classList.remove('is-active'); } } diff --git a/core/themes/olivero/js/search.js b/core/themes/olivero/js/search.js index 7db869bfcf..581ad91f75 100644 --- a/core/themes/olivero/js/search.js +++ b/core/themes/olivero/js/search.js @@ -25,15 +25,13 @@ function toggleSearchVisibility(visibility) { searchWideButton.setAttribute('aria-expanded', visibility === true); + searchWideWrapper.classList.toggle('is-active', visibility); searchWideWrapper.addEventListener('transitionend', handleFocus, { once: true }); if (visibility === true) { Drupal.olivero.closeAllSubNav(); - searchWideWrapper.classList.add('is-active'); - } else { - searchWideWrapper.classList.remove('is-active'); } } diff --git a/core/themes/olivero/js/second-level-navigation.es6.js b/core/themes/olivero/js/second-level-navigation.es6.js index 70d1c51ebf..3c8aafa7ff 100644 --- a/core/themes/olivero/js/second-level-navigation.es6.js +++ b/core/themes/olivero/js/second-level-navigation.es6.js @@ -42,23 +42,17 @@ ).classList.remove('is-active-menu-parent'); }); } - button.setAttribute('aria-expanded', 'true'); - topLevelMenuItem - .querySelector('[data-drupal-selector="primary-nav-menu--level-2"]') - .classList.add('is-active-menu-parent'); - topLevelMenuItem - .querySelector('[data-drupal-selector="primary-nav-menu-🥕"]') - .classList.add('is-active-menu-parent'); } else { - button.setAttribute('aria-expanded', 'false'); topLevelMenuItem.classList.remove('is-touch-event'); - topLevelMenuItem - .querySelector('[data-drupal-selector="primary-nav-menu--level-2"]') - .classList.remove('is-active-menu-parent'); - topLevelMenuItem - .querySelector('[data-drupal-selector="primary-nav-menu-🥕"]') - .classList.remove('is-active-menu-parent'); } + + button.setAttribute('aria-expanded', state.toString()); + topLevelMenuItem + .querySelector('[data-drupal-selector="primary-nav-menu--level-2"]') + .classList.toggle('is-active-menu-parent', state); + topLevelMenuItem + .querySelector('[data-drupal-selector="primary-nav-menu-🥕"]') + .classList.toggle('is-active-menu-parent', state); } Drupal.olivero.toggleSubNav = toggleSubNav; diff --git a/core/themes/olivero/js/second-level-navigation.js b/core/themes/olivero/js/second-level-navigation.js index 01a12da407..0d008e09ae 100644 --- a/core/themes/olivero/js/second-level-navigation.js +++ b/core/themes/olivero/js/second-level-navigation.js @@ -24,16 +24,13 @@ el.querySelector('[data-drupal-selector="primary-nav-menu-🥕"]').classList.remove('is-active-menu-parent'); }); } - - button.setAttribute('aria-expanded', 'true'); - topLevelMenuItem.querySelector('[data-drupal-selector="primary-nav-menu--level-2"]').classList.add('is-active-menu-parent'); - topLevelMenuItem.querySelector('[data-drupal-selector="primary-nav-menu-🥕"]').classList.add('is-active-menu-parent'); } else { - button.setAttribute('aria-expanded', 'false'); topLevelMenuItem.classList.remove('is-touch-event'); - topLevelMenuItem.querySelector('[data-drupal-selector="primary-nav-menu--level-2"]').classList.remove('is-active-menu-parent'); - topLevelMenuItem.querySelector('[data-drupal-selector="primary-nav-menu-🥕"]').classList.remove('is-active-menu-parent'); } + + button.setAttribute('aria-expanded', state.toString()); + topLevelMenuItem.querySelector('[data-drupal-selector="primary-nav-menu--level-2"]').classList.toggle('is-active-menu-parent', state); + topLevelMenuItem.querySelector('[data-drupal-selector="primary-nav-menu-🥕"]').classList.toggle('is-active-menu-parent', state); } Drupal.olivero.toggleSubNav = toggleSubNav; diff --git a/core/themes/olivero/js/tabs.es6.js b/core/themes/olivero/js/tabs.es6.js index c5d3e0d528..3cdf0cb2d0 100644 --- a/core/themes/olivero/js/tabs.es6.js +++ b/core/themes/olivero/js/tabs.es6.js @@ -32,13 +32,14 @@ * The event object. */ function handleTriggerClick(e) { - if (!tabs.classList.contains(expandedClass)) { - e.currentTarget.setAttribute('aria-expanded', 'true'); - tabs.classList.add(expandedClass); - } else { - e.currentTarget.setAttribute('aria-expanded', 'false'); - tabs.classList.remove(expandedClass); - } + e.currentTarget.setAttribute( + 'aria-expanded', + !tabs.classList.contains(expandedClass), + ); + tabs.classList.toggle( + expandedClass, + !tabs.classList.contains(expandedClass), + ); } if (isTabsMobileLayout() && !activeTab.matches('.tabs__tab:first-child')) { diff --git a/core/themes/olivero/js/tabs.js b/core/themes/olivero/js/tabs.js index 418b2e45e1..903dc5fc52 100644 --- a/core/themes/olivero/js/tabs.js +++ b/core/themes/olivero/js/tabs.js @@ -16,13 +16,8 @@ } function handleTriggerClick(e) { - if (!tabs.classList.contains(expandedClass)) { - e.currentTarget.setAttribute('aria-expanded', 'true'); - tabs.classList.add(expandedClass); - } else { - e.currentTarget.setAttribute('aria-expanded', 'false'); - tabs.classList.remove(expandedClass); - } + e.currentTarget.setAttribute('aria-expanded', !tabs.classList.contains(expandedClass)); + tabs.classList.toggle(expandedClass, !tabs.classList.contains(expandedClass)); } if (isTabsMobileLayout() && !activeTab.matches('.tabs__tab:first-child')) {