diff --git a/assets/components/entrypoint.scss b/assets/components/entrypoint.scss index 252c5a566..5e54c151b 100644 --- a/assets/components/entrypoint.scss +++ b/assets/components/entrypoint.scss @@ -83,6 +83,7 @@ @import 'organisms/fullwidth-teaser/fullwidth-teaser'; @import 'organisms/nav-main/nav-main'; @import 'organisms/nav-aside/nav-aside'; +@import 'organisms/nav-mobile/nav-mobile'; @import 'organisms/contact/contact'; @import 'organisms/footer/footer'; @import 'organisms/form/form'; diff --git a/assets/components/molecules/breadcrumb/breadcrumb-dropdown.twig b/assets/components/molecules/breadcrumb/breadcrumb-dropdown.twig new file mode 100644 index 000000000..fcc73ae66 --- /dev/null +++ b/assets/components/molecules/breadcrumb/breadcrumb-dropdown.twig @@ -0,0 +1,69 @@ + diff --git a/assets/components/molecules/breadcrumb/breadcrumb-tagged.twig b/assets/components/molecules/breadcrumb/breadcrumb-tagged.twig index 89931be07..8483d2c62 100644 --- a/assets/components/molecules/breadcrumb/breadcrumb-tagged.twig +++ b/assets/components/molecules/breadcrumb/breadcrumb-tagged.twig @@ -10,9 +10,64 @@ Innovation W3C -
  • Schools
    • -
  • ENAC
    • -
  • Formations
    • -
  • Projets
    • +
  • + +
    • +
  • + Schools +
    + + +
    +
    • +
  • + School of Architecture, Civil and Environmental Engineering +
    + + +
    +
    • +
  • + ENAC Faculty +
    + + +
    +
    • diff --git a/assets/components/molecules/breadcrumb/breadcrumb.js b/assets/components/molecules/breadcrumb/breadcrumb.js index 60bb30e76..6b4496183 100644 --- a/assets/components/molecules/breadcrumb/breadcrumb.js +++ b/assets/components/molecules/breadcrumb/breadcrumb.js @@ -1,51 +1,27 @@ /* globals $ */ export default () => { - const breadcrumb = $('#breadcrumb-wrapper'); - - if ($(breadcrumb).length > 0) { // don't expect to have the breadcrumb on every case - const breadcrumbNode = breadcrumb[0]; - const breadcrumbComponent = breadcrumb.find('.breadcrumb'); - - if ($(window).width() > 1199 && - $(breadcrumbComponent).length > 0 && // don't expect to have the breadcrumbComponent on every case - breadcrumb.width() < breadcrumbComponent[0].scrollWidth) { - let isDown = false; - let startX; - let scrollLeft; - - breadcrumb.on('mousedown', (e) => { - isDown = true; - breadcrumb.addClass('moving'); - startX = e.pageX - breadcrumbNode.offsetLeft; - // eslint-disable-next-line - scrollLeft = breadcrumbNode.scrollLeft; - }); - - breadcrumb.on('mouseleave', () => { - isDown = false; - breadcrumb.removeClass('moving'); - }); - - breadcrumb.on('mouseup', () => { - isDown = false; - breadcrumb.removeClass('moving'); - }); - - breadcrumb.on('mousemove', (e) => { - if (!isDown) return; // stop the fn from running - e.preventDefault(); - const x = e.pageX - breadcrumbNode.offsetLeft; - const walk = (x - startX) * 3; - breadcrumbNode.scrollLeft = scrollLeft - walk; - }); - - breadcrumb.mousewheel((e, delta) => { - e.preventDefault(); - breadcrumbNode.scrollLeft -= delta * 40; - }); - - breadcrumb.find('*').on('dragstart', () => false); + const expandBreadcrumb = $('.btn-expand-links'); + const breadcrumbDropToggle = $('.dropdown-toggle'); + + // add class 'has-expanded-links' + expandBreadcrumb.on('click', () => { + $('.breadcrumb-wrapper .breadcrumb').addClass('has-expanded-links'); + }); + + // improve dropdown position + breadcrumbDropToggle.on('click', (e) => { + const btnPos = $(e.currentTarget).offset().left; + const documentWitdh = $(document).width(); + const dropdown = $(e.currentTarget).siblings('.dropdown-menu'); + const dropdownWidth = dropdown.width(); + const btnOffset = documentWitdh - btnPos; + + // remove class 'open-left' from all .dropdown-menu elements + $('.dropdown-menu').removeClass('open-left'); + // add the class back if the dropdown is too close to the right side of the window + if (dropdownWidth > btnOffset) { + dropdown.addClass('open-left'); } - } + }); }; diff --git a/assets/components/molecules/breadcrumb/breadcrumb.scss b/assets/components/molecules/breadcrumb/breadcrumb.scss index d05c6e8c0..e2d47940b 100644 --- a/assets/components/molecules/breadcrumb/breadcrumb.scss +++ b/assets/components/molecules/breadcrumb/breadcrumb.scss @@ -5,17 +5,6 @@ position: relative; margin-bottom: $spacer * 1.6; - &:before { - content: ' '; - position: absolute; - top: 0; - right: 0; - width: $spacer * 3; - height: calc(100% - 2px); - background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, $white 80%, $white 100%); - z-index: $zindex-breadcrumbs + 10; - } - @include media-breakpoint-down(lg) { //height: $mm-breadcrumbs-height; padding: 0 ($spacer * 0.8); @@ -33,13 +22,10 @@ .breadcrumb-wrapper { max-width: 100%; width: 100%; - //min-height: 2.15rem; border-bottom: 1px solid gray('200'); @include media-breakpoint-up(lg) { - overflow-x: auto; overflow-y: visible; - //white-space: nowrap; user-select: none; } } @@ -91,17 +77,6 @@ display: inline; } - @include media-breakpoint-down(sm) { - - &:not(.breadcrumb-tags-wrapper) { - display: none; - } - - &.breadcrumb-tags-wrapper:after { - display: none; - } - } - &:before { content: ' '; display: block; @@ -120,9 +95,9 @@ } &:after { - content: '\203A'; - padding-left: 0.3rem; - color: $gray-700; + content: "/"; + color: $gray-500; + padding-inline: 0.25rem; } a { @@ -134,7 +109,7 @@ color: $black; } } - + .tag { vertical-align: baseline; } @@ -149,6 +124,120 @@ } &.active { + font-weight: bold; color: $gray-700; } + + &.expand-links { + display: none; + } +} + +// Expand links button + +.breadcrumb .btn-expand-links { + height: auto; + padding: 0; + border: 0; + font-size: inherit; + line-height: 1; +} + +@include media-breakpoint-down(md) { + .breadcrumb .breadcrumb-item, + .breadcrumb.has-expanded-links .breadcrumb-item.expand-links { + display: none; + } + + .breadcrumb .breadcrumb-item:first-of-type, + .breadcrumb .breadcrumb-item.expand-links, + .breadcrumb .breadcrumb-item:last-of-type, + .breadcrumb .breadcrumb-item.active, + .breadcrumb .breadcrumb-item.breadcrumb-tags-wrapper, + .breadcrumb.has-expanded-links .breadcrumb-item { + display: inline-block; + } +} + +// Dropdown + +.breadcrumb .dropdown { + display: inline; + position: static; +} + +.breadcrumb .dropdown-toggle { + display: inline-flex; + justify-content: center; + align-items: center; + top: -0.08em; + width: 1.25rem; + height: 1.25rem; + margin-left: 0; + padding: 0; + border: 0; + border-radius: 50%; + + .icon { + top: 0; + font-size: 1rem; + color: currentColor; + transform: rotate(0); + transition: all 0.2s ease-in-out; + } + + &:after { + content: none; + } + + &:hover, + &:active { + background: $red !important; + color: $white !important; + } + + &:focus, + &:focus-visible { + outline-offset: 0; + } + + &:focus:not(:focus-visible) { + outline-color: transparent !important; + } + + &[aria-expanded="true"] .icon { + transform: rotate(180deg); + } +} + +.breadcrumb .dropdown-menu { + &.show { + // dropdown position depends on the
  • , not the button + top: 1.65rem !important; + left: -0.625rem !important; + transform: none !important; + + &.open-left { + right: -0.625rem !important; + left: auto !important; + } + } +} + +.breadcrumb .dropdown-item { + padding: 0.125em 0.625rem; + font-size: 0.83rem; + + a { + display: block; + } + + &.current-menu-item, + &.current-menu-item-parent { + font-weight: bold; + } + + @include media-breakpoint-down(md) { + white-space: normal; + } } diff --git a/assets/components/molecules/breadcrumb/breadcrumb.twig b/assets/components/molecules/breadcrumb/breadcrumb.twig index c25d16e07..33cb21eb1 100644 --- a/assets/components/molecules/breadcrumb/breadcrumb.twig +++ b/assets/components/molecules/breadcrumb/breadcrumb.twig @@ -1,11 +1,17 @@ diff --git a/assets/components/molecules/breadcrumb/breadcrumb.yml b/assets/components/molecules/breadcrumb/breadcrumb.yml index 138f5f891..81074cc0b 100644 --- a/assets/components/molecules/breadcrumb/breadcrumb.yml +++ b/assets/components/molecules/breadcrumb/breadcrumb.yml @@ -3,5 +3,9 @@ name: breadcrumb notes: | The breadcrumb is your compass, on every page. It helps you to understand where you are, so you can decide where to go next. variants: + - name: dropdown + title: Dropdown + notes: | + Breadcrumb dropdowns are used to display same level pages. - name: tagged title: Tagged diff --git a/assets/components/organisms/nav-aside/nav-aside.scss b/assets/components/organisms/nav-aside/nav-aside.scss index 72b3410d3..912eec69d 100644 --- a/assets/components/organisms/nav-aside/nav-aside.scss +++ b/assets/components/organisms/nav-aside/nav-aside.scss @@ -25,6 +25,24 @@ .nav-aside-layout .nav-aside-wrapper { display: block; + @include media-breakpoint-down(lg) { + padding: 1rem; + + .nav-aside { + [class^="h"] { + padding: 0; + } + a { + padding-inline: 1.5rem; + font-size: 1rem; + } + } + } + + @include media-breakpoint-up(xl) { + height: 100%; + } + @include media-breakpoint-up(xxl){ flex: 0 0 16.1%; max-width: 16.1%; @@ -66,12 +84,10 @@ &:before { content: none; } } - &.active:not(.menu-item-has-children)+li>a:before { - content: none; - } - @include media-breakpoint-down(lg) { - &.active > a { margin-right: $spacer * 2; } + &.active > a { + margin-inline: 0; + } } } & > ul > li:first-child > a:before { content: none; } diff --git a/assets/components/organisms/nav-aside/nav-aside.twig b/assets/components/organisms/nav-aside/nav-aside.twig index b05430415..75a4b4aeb 100644 --- a/assets/components/organisms/nav-aside/nav-aside.twig +++ b/assets/components/organisms/nav-aside/nav-aside.twig @@ -4,10 +4,15 @@ role="navigation" aria-describedby="nav-aside-title" > -

    Dans la même section

    -