From d02cb1bd16eac529e41d1f3787169def8f81794d Mon Sep 17 00:00:00 2001 From: Aline Keller Date: Tue, 21 May 2024 15:06:02 +0200 Subject: [PATCH] =?UTF-8?q?Styleguide:=20mise=20=C3=A0=20jour=20du=20bread?= =?UTF-8?q?crumb=20et=20de=20la=20navigation=20mobile=20(#718)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Breadcrumb - Ajout des dropdowns qui contiennent les pages de même niveau; - Sur desktop: toutes les étapes sont affichées, si nécessaire le breadcrumb passe sur plusieurs lignes; - Sur mobile / tablette: par défaut, uniquement la maison et la dernière étape sont affichées. Entre deux se trouve un bouton avec trois petit points; lorsqu'on clique dessus, le chemin entier est affiché (sur plusieurs lignes si nécessaire). Navigation mobile Le menu mobile comprend désormais deux navigations: - Le menu principal, affiché de manière plus simple, sur deux lignes; - La navigation latérale (nav aside) qui contient les pages de même niveau que la page courante, ainsi que ses pages enfants. Pour un exemple complet du breadcrumb et de la navigation mobile, voir le modèle de page Lab Homepage. --- assets/components/entrypoint.scss | 1 + .../breadcrumb/breadcrumb-dropdown.twig | 69 ++++++++ .../breadcrumb/breadcrumb-tagged.twig | 63 +++++++- .../molecules/breadcrumb/breadcrumb.js | 68 +++----- .../molecules/breadcrumb/breadcrumb.scss | 147 ++++++++++++++---- .../molecules/breadcrumb/breadcrumb.twig | 10 +- .../molecules/breadcrumb/breadcrumb.yml | 4 + .../organisms/nav-aside/nav-aside.scss | 26 +++- .../organisms/nav-aside/nav-aside.twig | 14 +- .../organisms/nav-aside/nav-aside.yml | 4 + .../organisms/nav-mobile/nav-mobile.scss | 66 ++++++++ .../organisms/nav-mobile/nav-mobile.twig | 24 +++ .../organisms/nav-mobile/nav-mobile.yml | 5 + assets/components/pages/about/about.twig | 2 + .../association-list/association-list.twig | 2 + .../pages/lab-homepage/lab-homepage.twig | 8 +- .../study-plan-course/study-plan-course.twig | 32 +++- .../pages/study-plan/study-plan.twig | 28 +++- assets/components/templates/base/base.twig | 19 +-- 19 files changed, 482 insertions(+), 110 deletions(-) create mode 100644 assets/components/molecules/breadcrumb/breadcrumb-dropdown.twig create mode 100644 assets/components/organisms/nav-mobile/nav-mobile.scss create mode 100644 assets/components/organisms/nav-mobile/nav-mobile.twig create mode 100644 assets/components/organisms/nav-mobile/nav-mobile.yml 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

    -