From 0f93b1bddff9287bf6a870414dfbc078fc30cf8c Mon Sep 17 00:00:00 2001 From: Aline Date: Tue, 30 Apr 2024 11:59:56 +0200 Subject: [PATCH 01/24] Add link classes to base breadcrumb template --- assets/components/molecules/breadcrumb/breadcrumb.twig | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/components/molecules/breadcrumb/breadcrumb.twig b/assets/components/molecules/breadcrumb/breadcrumb.twig index c25d16e07..25aef250b 100644 --- a/assets/components/molecules/breadcrumb/breadcrumb.twig +++ b/assets/components/molecules/breadcrumb/breadcrumb.twig @@ -1,11 +1,11 @@ From 8afb12966a051612ba41c29d4c8bec7b99fa79dd Mon Sep 17 00:00:00 2001 From: Aline Date: Tue, 30 Apr 2024 12:00:16 +0200 Subject: [PATCH 02/24] Create dropdown variant --- .../breadcrumb/breadcrumb-dropdown.twig | 19 +++++++++++++++++++ .../molecules/breadcrumb/breadcrumb.scss | 3 ++- .../molecules/breadcrumb/breadcrumb.yml | 2 ++ 3 files changed, 23 insertions(+), 1 deletion(-) create mode 100644 assets/components/molecules/breadcrumb/breadcrumb-dropdown.twig diff --git a/assets/components/molecules/breadcrumb/breadcrumb-dropdown.twig b/assets/components/molecules/breadcrumb/breadcrumb-dropdown.twig new file mode 100644 index 000000000..732930d0b --- /dev/null +++ b/assets/components/molecules/breadcrumb/breadcrumb-dropdown.twig @@ -0,0 +1,19 @@ + diff --git a/assets/components/molecules/breadcrumb/breadcrumb.scss b/assets/components/molecules/breadcrumb/breadcrumb.scss index d05c6e8c0..63f6551a2 100644 --- a/assets/components/molecules/breadcrumb/breadcrumb.scss +++ b/assets/components/molecules/breadcrumb/breadcrumb.scss @@ -134,7 +134,7 @@ color: $black; } } - + .tag { vertical-align: baseline; } @@ -150,5 +150,6 @@ &.active { color: $gray-700; + font-weight: bold; } } diff --git a/assets/components/molecules/breadcrumb/breadcrumb.yml b/assets/components/molecules/breadcrumb/breadcrumb.yml index 138f5f891..ca1fd220f 100644 --- a/assets/components/molecules/breadcrumb/breadcrumb.yml +++ b/assets/components/molecules/breadcrumb/breadcrumb.yml @@ -5,3 +5,5 @@ notes: | variants: - name: tagged title: Tagged + - name: dropdown + title: Dropdown From 6225c1f4d4219e5a4bef6d8c60cfe65ea862b53f Mon Sep 17 00:00:00 2001 From: Aline Date: Tue, 30 Apr 2024 16:05:06 +0200 Subject: [PATCH 03/24] Add breadcrumb dropdown menus --- .../breadcrumb/breadcrumb-dropdown.twig | 46 +++++++++- .../molecules/breadcrumb/breadcrumb.scss | 91 ++++++++++++++++--- .../molecules/breadcrumb/breadcrumb.yml | 2 + 3 files changed, 125 insertions(+), 14 deletions(-) diff --git a/assets/components/molecules/breadcrumb/breadcrumb-dropdown.twig b/assets/components/molecules/breadcrumb/breadcrumb-dropdown.twig index 732930d0b..0a394badd 100644 --- a/assets/components/molecules/breadcrumb/breadcrumb-dropdown.twig +++ b/assets/components/molecules/breadcrumb/breadcrumb-dropdown.twig @@ -7,13 +7,57 @@
  • Schools +
    + + +
  • School of Architecture, Civil and Environmental Engineering +
    + + +
  • Sustainability challenges
    • -
  • FUSTIC association
    • +
  • + FUSTIC association +
    + + +
    +
    • diff --git a/assets/components/molecules/breadcrumb/breadcrumb.scss b/assets/components/molecules/breadcrumb/breadcrumb.scss index 63f6551a2..6e828ea9d 100644 --- a/assets/components/molecules/breadcrumb/breadcrumb.scss +++ b/assets/components/molecules/breadcrumb/breadcrumb.scss @@ -33,13 +33,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; } } @@ -82,7 +79,7 @@ } .breadcrumb-item { - display: inline-block; + display: inline; position: relative; font-size: $font-size-sm; line-height: 1.5rem; @@ -93,13 +90,7 @@ @include media-breakpoint-down(sm) { - &:not(.breadcrumb-tags-wrapper) { - display: none; - } - &.breadcrumb-tags-wrapper:after { - display: none; - } } &:before { @@ -120,9 +111,9 @@ } &:after { - content: '\203A'; - padding-left: 0.3rem; - color: $gray-700; + content: "/"; + color: $gray-500; + padding-inline: 0.25rem; } a { @@ -153,3 +144,77 @@ font-weight: bold; } } + +// Dropdown + +.breadcrumb .dropdown { + display: inline; + position: static; +} + +.breadcrumb .dropdown-toggle { + border: 0; + border-radius: 50%; + display: inline-flex; + justify-content: center; + align-items: center; + padding: 0; + height: 1.25rem; + margin-left: 0; + width: 1.25rem; + top: -0.08em; + + .icon { + color: currentColor; + font-size: 1rem; + top: 0; + transition: all 0.2s ease-in-out; + transform: rotate(0); + } + + &: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 + left: -0.625rem !important; + top: 2rem !important; + transform: none !important; + } +} + +.breadcrumb .dropdown-item { + font-size: 0.83rem; + padding: 0.125em 0.625rem; + + a { + display: block; + } + + &.current-menu-item, + &.current-menu-item-parent { + font-weight: bold; + } +} diff --git a/assets/components/molecules/breadcrumb/breadcrumb.yml b/assets/components/molecules/breadcrumb/breadcrumb.yml index ca1fd220f..2f2019324 100644 --- a/assets/components/molecules/breadcrumb/breadcrumb.yml +++ b/assets/components/molecules/breadcrumb/breadcrumb.yml @@ -7,3 +7,5 @@ variants: title: Tagged - name: dropdown title: Dropdown + notes: | + Breadcrumb dropdowns are used to display same level pages. From 33ab348af0e410e27be591bd92ebe43cca7aba9e Mon Sep 17 00:00:00 2001 From: Aline Date: Tue, 30 Apr 2024 17:28:39 +0200 Subject: [PATCH 04/24] Add "expand breadcrumb button" for small devices --- .../breadcrumb/breadcrumb-dropdown.twig | 6 +++ .../molecules/breadcrumb/breadcrumb.js | 10 ++++- .../molecules/breadcrumb/breadcrumb.scss | 40 +++++++++++++++++-- .../molecules/breadcrumb/breadcrumb.twig | 6 +++ 4 files changed, 57 insertions(+), 5 deletions(-) diff --git a/assets/components/molecules/breadcrumb/breadcrumb-dropdown.twig b/assets/components/molecules/breadcrumb/breadcrumb-dropdown.twig index 0a394badd..fcc73ae66 100644 --- a/assets/components/molecules/breadcrumb/breadcrumb-dropdown.twig +++ b/assets/components/molecules/breadcrumb/breadcrumb-dropdown.twig @@ -5,6 +5,12 @@ {% include '@atoms/icon/icon.twig' with { icon: 'icon-home' } %}
    • +
  • + +
  • Schools
    diff --git a/assets/components/molecules/breadcrumb/breadcrumb.js b/assets/components/molecules/breadcrumb/breadcrumb.js index 60bb30e76..8d0c7c1ec 100644 --- a/assets/components/molecules/breadcrumb/breadcrumb.js +++ b/assets/components/molecules/breadcrumb/breadcrumb.js @@ -1,8 +1,15 @@ /* globals $ */ export default () => { - const breadcrumb = $('#breadcrumb-wrapper'); + //const breadcrumb = $('#breadcrumb-wrapper'); + const expandBreadcrumb = $('.btn-expand-links'); + expandBreadcrumb.click(function(){ + $(".breadcrumb-wrapper .breadcrumb").addClass("has-expanded-links"); + }); + + + /* if ($(breadcrumb).length > 0) { // don't expect to have the breadcrumb on every case const breadcrumbNode = breadcrumb[0]; const breadcrumbComponent = breadcrumb.find('.breadcrumb'); @@ -48,4 +55,5 @@ export default () => { breadcrumb.find('*').on('dragstart', () => false); } } + */ }; diff --git a/assets/components/molecules/breadcrumb/breadcrumb.scss b/assets/components/molecules/breadcrumb/breadcrumb.scss index 6e828ea9d..0f24a977d 100644 --- a/assets/components/molecules/breadcrumb/breadcrumb.scss +++ b/assets/components/molecules/breadcrumb/breadcrumb.scss @@ -79,7 +79,7 @@ } .breadcrumb-item { - display: inline; + display: inline-block; position: relative; font-size: $font-size-sm; line-height: 1.5rem; @@ -88,9 +88,8 @@ display: inline; } - @include media-breakpoint-down(sm) { - - + @include media-breakpoint-down(md) { + display: inline; } &:before { @@ -143,6 +142,35 @@ color: $gray-700; font-weight: bold; } + + &.expand-links { + display: none; + } +} + +// Expand links button + +.breadcrumb .btn-expand-links { + padding: 0; + font-size: inherit; + border: 0; + height: auto; + 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.has-expanded-links .breadcrumb-item { + display: inline; + } } // Dropdown @@ -217,4 +245,8 @@ &.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 25aef250b..33cb21eb1 100644 --- a/assets/components/molecules/breadcrumb/breadcrumb.twig +++ b/assets/components/molecules/breadcrumb/breadcrumb.twig @@ -5,6 +5,12 @@ {% include '@atoms/icon/icon.twig' with { icon: 'icon-home' } %}
    • +
  • + +
  • Schools
  • ENAC
    • From 2df37f24243528eee50ee87a699d33c61106f416 Mon Sep 17 00:00:00 2001 From: Aline Date: Tue, 30 Apr 2024 17:33:56 +0200 Subject: [PATCH 05/24] Fix styleint order --- .../molecules/breadcrumb/breadcrumb.scss | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/assets/components/molecules/breadcrumb/breadcrumb.scss b/assets/components/molecules/breadcrumb/breadcrumb.scss index 0f24a977d..8d62f2238 100644 --- a/assets/components/molecules/breadcrumb/breadcrumb.scss +++ b/assets/components/molecules/breadcrumb/breadcrumb.scss @@ -181,23 +181,23 @@ } .breadcrumb .dropdown-toggle { - border: 0; - border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; - padding: 0; + top: -0.08em; + width: 1.25rem; height: 1.25rem; margin-left: 0; - width: 1.25rem; - top: -0.08em; + padding: 0; + border: 0; + border-radius: 50%; .icon { - color: currentColor; - font-size: 1rem; top: 0; - transition: all 0.2s ease-in-out; + font-size: 1rem; + color: currentColor; transform: rotate(0); + transition: all 0.2s ease-in-out; } &:after { @@ -227,15 +227,15 @@ .breadcrumb .dropdown-menu { &.show { // dropdown position depends on the
  • , not the button - left: -0.625rem !important; top: 2rem !important; + left: -0.625rem !important; transform: none !important; } } .breadcrumb .dropdown-item { - font-size: 0.83rem; padding: 0.125em 0.625rem; + font-size: 0.83rem; a { display: block; From 4aaddf4505ae07e7d9770fbf1338096b761cf295 Mon Sep 17 00:00:00 2001 From: Aline Date: Tue, 30 Apr 2024 17:50:38 +0200 Subject: [PATCH 06/24] Remove unused breadcrumb js function --- .../molecules/breadcrumb/breadcrumb.js | 50 ------------------- 1 file changed, 50 deletions(-) diff --git a/assets/components/molecules/breadcrumb/breadcrumb.js b/assets/components/molecules/breadcrumb/breadcrumb.js index 8d0c7c1ec..5f9682981 100644 --- a/assets/components/molecules/breadcrumb/breadcrumb.js +++ b/assets/components/molecules/breadcrumb/breadcrumb.js @@ -1,59 +1,9 @@ /* globals $ */ export default () => { - //const breadcrumb = $('#breadcrumb-wrapper'); const expandBreadcrumb = $('.btn-expand-links'); expandBreadcrumb.click(function(){ $(".breadcrumb-wrapper .breadcrumb").addClass("has-expanded-links"); }); - - - /* - 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); - } - } - */ }; From 937ed071a7f594679188aa34984e676157f8fc6c Mon Sep 17 00:00:00 2001 From: Aline Date: Tue, 30 Apr 2024 17:55:28 +0200 Subject: [PATCH 07/24] Add 'expand breadcrumb' button to tagged breadcrumb --- .../components/molecules/breadcrumb/breadcrumb-tagged.twig | 6 ++++++ assets/components/molecules/breadcrumb/breadcrumb.scss | 1 + 2 files changed, 7 insertions(+) diff --git a/assets/components/molecules/breadcrumb/breadcrumb-tagged.twig b/assets/components/molecules/breadcrumb/breadcrumb-tagged.twig index 89931be07..1f72c09c3 100644 --- a/assets/components/molecules/breadcrumb/breadcrumb-tagged.twig +++ b/assets/components/molecules/breadcrumb/breadcrumb-tagged.twig @@ -10,6 +10,12 @@ Innovation W3C
    • +
  • + +
  • Schools
  • ENAC
  • Formations
    • diff --git a/assets/components/molecules/breadcrumb/breadcrumb.scss b/assets/components/molecules/breadcrumb/breadcrumb.scss index 8d62f2238..a884bde81 100644 --- a/assets/components/molecules/breadcrumb/breadcrumb.scss +++ b/assets/components/molecules/breadcrumb/breadcrumb.scss @@ -168,6 +168,7 @@ .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; } From aa8ec513f3054990e60cbd58e5075b047209f0bd Mon Sep 17 00:00:00 2001 From: Aline Date: Wed, 1 May 2024 14:40:52 +0200 Subject: [PATCH 08/24] Update "breadcrumb tagged" --- .../breadcrumb/breadcrumb-tagged.twig | 57 +++++++++++++++++-- .../molecules/breadcrumb/breadcrumb.yml | 4 +- 2 files changed, 55 insertions(+), 6 deletions(-) diff --git a/assets/components/molecules/breadcrumb/breadcrumb-tagged.twig b/assets/components/molecules/breadcrumb/breadcrumb-tagged.twig index 1f72c09c3..8483d2c62 100644 --- a/assets/components/molecules/breadcrumb/breadcrumb-tagged.twig +++ b/assets/components/molecules/breadcrumb/breadcrumb-tagged.twig @@ -16,9 +16,58 @@ Display the complete path -
  • Schools
    • -
  • ENAC
    • -
  • Formations
    • -
  • Projets
    • +
  • + Schools +
    + + +
    +
    • +
  • + School of Architecture, Civil and Environmental Engineering +
    + + +
    +
    • +
  • + ENAC Faculty +
    + + +
    +
    • diff --git a/assets/components/molecules/breadcrumb/breadcrumb.yml b/assets/components/molecules/breadcrumb/breadcrumb.yml index 2f2019324..81074cc0b 100644 --- a/assets/components/molecules/breadcrumb/breadcrumb.yml +++ b/assets/components/molecules/breadcrumb/breadcrumb.yml @@ -3,9 +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: tagged - title: Tagged - name: dropdown title: Dropdown notes: | Breadcrumb dropdowns are used to display same level pages. + - name: tagged + title: Tagged From 0c311772dfa4b82fa11c9a63d042fd4eb8f84a73 Mon Sep 17 00:00:00 2001 From: Aline Date: Wed, 1 May 2024 15:01:06 +0200 Subject: [PATCH 09/24] Create Nav Mobile component --- assets/components/entrypoint.scss | 1 + .../organisms/nav-mobile/nav-mobile.scss | 67 +++++++++++++++++++ .../organisms/nav-mobile/nav-mobile.twig | 16 +++++ .../organisms/nav-mobile/nav-mobile.yml | 5 ++ 4 files changed, 89 insertions(+) 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/organisms/nav-mobile/nav-mobile.scss b/assets/components/organisms/nav-mobile/nav-mobile.scss new file mode 100644 index 000000000..f21a8ba31 --- /dev/null +++ b/assets/components/organisms/nav-mobile/nav-mobile.scss @@ -0,0 +1,67 @@ + +.nav-toggle-layout > .nav-container { + margin: 0; + padding: 0; + width: auto; + + @include media-breakpoint-down(lg) { + background: #fff; + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 100%; + border-top: 1px solid #c1c1c1; + overflow-y: scroll; + transform: translateX(-100%); + transition: transform 0.2s; + z-index: 120; + + .mobile-menu-open & { + transform: translateX(0); + } + } +} + +.nav-main-mobile { + border: 0; + position: static; + transform: none !important; + + @include media-breakpoint-up(xl) { + display: none; + } + + .nav-wrapper { + height: auto; + } + + .nav-container { + margin-left: 0; + padding-left: 0; + } + + .nav-container .nav-menu { + border-bottom: 1px solid $gray-300; + display: grid; + grid-template-columns: repeat(3,1fr); + padding-block: 1rem; + position: static; + width: 100%; + + li { + border: 0; + } + + li a { + margin-block: 0; + padding-block: 0.4 * $spacer; + } + + li.current-menu-item > a:first-child { + background: transparent; + color: $black; + } + } +} + diff --git a/assets/components/organisms/nav-mobile/nav-mobile.twig b/assets/components/organisms/nav-mobile/nav-mobile.twig new file mode 100644 index 000000000..0e316fb58 --- /dev/null +++ b/assets/components/organisms/nav-mobile/nav-mobile.twig @@ -0,0 +1,16 @@ +
    + +
    diff --git a/assets/components/organisms/nav-mobile/nav-mobile.yml b/assets/components/organisms/nav-mobile/nav-mobile.yml new file mode 100644 index 000000000..3c22330d9 --- /dev/null +++ b/assets/components/organisms/nav-mobile/nav-mobile.yml @@ -0,0 +1,5 @@ +title: Nav mobile +name: nav-mobile +wrapper: nav-toggle-layout +notes: | + The mobile navigation is opened by clicking the [Nav Toggle Button](/#/atoms/nav-toggle-mobile). From 8c307180f4bb08e265a98474da69c1d6a890e15f Mon Sep 17 00:00:00 2001 From: Aline Date: Wed, 1 May 2024 15:01:23 +0200 Subject: [PATCH 10/24] Base: remove "browse" button (nav-toggle) --- assets/components/templates/base/base.twig | 1 - 1 file changed, 1 deletion(-) diff --git a/assets/components/templates/base/base.twig b/assets/components/templates/base/base.twig index 606d7f3a9..57c7bb6b5 100644 --- a/assets/components/templates/base/base.twig +++ b/assets/components/templates/base/base.twig @@ -11,7 +11,6 @@ {% block breadcrumb %} {% if not isSpecial %}
    -
    {% include '@atoms/nav-toggle/nav-toggle.twig' %}
    {% include '@molecules/breadcrumb/breadcrumb-tagged.twig' %}
    {% endif %} From 007589482a4d7e9d64aaf466bd1c2fabebfcbf56 Mon Sep 17 00:00:00 2001 From: Aline Date: Wed, 1 May 2024 15:01:34 +0200 Subject: [PATCH 11/24] Base: replace 'nav-main' with 'nav-mobile' --- assets/components/templates/base/base.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/components/templates/base/base.twig b/assets/components/templates/base/base.twig index 57c7bb6b5..c8f330f50 100644 --- a/assets/components/templates/base/base.twig +++ b/assets/components/templates/base/base.twig @@ -19,7 +19,7 @@ {% block nav %} - {% include '@organisms/nav-main/nav-main.twig' %} + {% include '@organisms/nav-mobile/nav-mobile.twig' %} {% endblock %}
    From 97753464447e6d514595369851e1c213d2510723 Mon Sep 17 00:00:00 2001 From: Aline Date: Wed, 1 May 2024 15:06:27 +0200 Subject: [PATCH 12/24] Base: move 'nav-aside' inside 'nav-mobile' --- assets/components/organisms/nav-aside/nav-aside.scss | 2 +- assets/components/organisms/nav-aside/nav-aside.yml | 4 ++++ assets/components/organisms/nav-mobile/nav-mobile.scss | 7 +++++++ assets/components/organisms/nav-mobile/nav-mobile.twig | 8 ++++++++ assets/components/templates/base/base.twig | 10 +--------- 5 files changed, 21 insertions(+), 10 deletions(-) diff --git a/assets/components/organisms/nav-aside/nav-aside.scss b/assets/components/organisms/nav-aside/nav-aside.scss index 72b3410d3..27a9608a9 100644 --- a/assets/components/organisms/nav-aside/nav-aside.scss +++ b/assets/components/organisms/nav-aside/nav-aside.scss @@ -67,7 +67,7 @@ } &.active:not(.menu-item-has-children)+li>a:before { - content: none; + //content: none; } @include media-breakpoint-down(lg) { diff --git a/assets/components/organisms/nav-aside/nav-aside.yml b/assets/components/organisms/nav-aside/nav-aside.yml index a111877a3..e3c28b0be 100644 --- a/assets/components/organisms/nav-aside/nav-aside.yml +++ b/assets/components/organisms/nav-aside/nav-aside.yml @@ -1,2 +1,6 @@ title: Nav aside name: nav-aside +notes: | + **Mobile version** + + On small devices, the side navigation can be displayed inside the mobile navigation, below the main menu. See [Nav Mobile](/#/organisms/nav-mobile) diff --git a/assets/components/organisms/nav-mobile/nav-mobile.scss b/assets/components/organisms/nav-mobile/nav-mobile.scss index f21a8ba31..3b8f8ab82 100644 --- a/assets/components/organisms/nav-mobile/nav-mobile.scss +++ b/assets/components/organisms/nav-mobile/nav-mobile.scss @@ -65,3 +65,10 @@ } } +.nav-aside-layout .nav-aside-wrapper { + @include media-breakpoint-up(xl) { + height: 100%; + } +} + + diff --git a/assets/components/organisms/nav-mobile/nav-mobile.twig b/assets/components/organisms/nav-mobile/nav-mobile.twig index 0e316fb58..4d3e90a48 100644 --- a/assets/components/organisms/nav-mobile/nav-mobile.twig +++ b/assets/components/organisms/nav-mobile/nav-mobile.twig @@ -13,4 +13,12 @@
    + + {% if not isSpecial %} + + {% endif %} diff --git a/assets/components/templates/base/base.twig b/assets/components/templates/base/base.twig index c8f330f50..ba49fc63e 100644 --- a/assets/components/templates/base/base.twig +++ b/assets/components/templates/base/base.twig @@ -16,7 +16,7 @@ {% endif %} {% endblock %} - +
    {% block nav %} {% include '@organisms/nav-mobile/nav-mobile.twig' %} @@ -31,14 +31,6 @@ {% endblock %}
    - - {% if not isSpecial %} - - {% endif %} {% block footer_container %} From 4ec7032da769e793c7619bcfa15394f7ad133e40 Mon Sep 17 00:00:00 2001 From: Aline Date: Wed, 1 May 2024 15:07:06 +0200 Subject: [PATCH 13/24] Update side nav structure on Lab demo page --- assets/components/organisms/nav-aside/nav-aside.twig | 12 +++++++++++- .../components/pages/lab-homepage/lab-homepage.twig | 6 ++++-- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/assets/components/organisms/nav-aside/nav-aside.twig b/assets/components/organisms/nav-aside/nav-aside.twig index b05430415..2363652b0 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

    +
      {% if nav_aside_items %} {% for item in nav_aside_items %} + {% if item.siblings_before and loop.index0 == nav_aside_active %} + {% for child in item.siblings_before %} +
    • {{child}}
      • + {% endfor %} + {% endif %} {{item.label}} @@ -23,6 +28,11 @@
    {% endif %} + {% if item.siblings_after and loop.index0 == nav_aside_active %} + {% for child in item.siblings_after %} +
  • {{child}}
    • + {% endfor %} + {% endif %} {% endfor %} {% else %}
  • S'inscrire au Master
    • diff --git a/assets/components/pages/lab-homepage/lab-homepage.twig b/assets/components/pages/lab-homepage/lab-homepage.twig index 6c4783400..89796a2b7 100644 --- a/assets/components/pages/lab-homepage/lab-homepage.twig +++ b/assets/components/pages/lab-homepage/lab-homepage.twig @@ -5,8 +5,10 @@ {% endblock %} {% set nav_aside_items = [{ - label: "Laboratory Full Name", - children: ["Projects", "Publications", "News", "Team", "Teaching"] + label: "ENAC Faculty", + siblings_before: ["News"], + siblings_after: ["Education", "Research", "Sustainability challenges", "Intranet ENAC"], + children: ["Organization", "Projects", "Publications", "Team", "Teaching"] }] %} {% set nav_aside_active = 0 %} From a726cc77d62893a6274fcc82de6ea13a5d350e65 Mon Sep 17 00:00:00 2001 From: Aline Date: Wed, 1 May 2024 16:51:08 +0200 Subject: [PATCH 14/24] Base: add condition to display regular or tagged breadcrumb --- assets/components/templates/base/base.twig | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/assets/components/templates/base/base.twig b/assets/components/templates/base/base.twig index ba49fc63e..449dad5fe 100644 --- a/assets/components/templates/base/base.twig +++ b/assets/components/templates/base/base.twig @@ -11,7 +11,11 @@ {% block breadcrumb %} {% if not isSpecial %}
    - {% include '@molecules/breadcrumb/breadcrumb-tagged.twig' %} + {% if hasTaggedBreadcrumb %} + {% include '@molecules/breadcrumb/breadcrumb-tagged.twig' %} + {% else %} + {% include '@molecules/breadcrumb/breadcrumb-dropdown.twig' %} + {% endif %}
    {% endif %} {% endblock %} From a8782b797023595b93e9dd39e7c4b750c33f9e8e Mon Sep 17 00:00:00 2001 From: Aline Date: Wed, 1 May 2024 16:51:27 +0200 Subject: [PATCH 15/24] Update page templates --- assets/components/pages/about/about.twig | 2 ++ .../association-list/association-list.twig | 2 ++ .../pages/lab-homepage/lab-homepage.twig | 2 ++ .../study-plan-course/study-plan-course.twig | 32 ++++++++++++++++--- .../pages/study-plan/study-plan.twig | 28 ++++++++++++++-- 5 files changed, 58 insertions(+), 8 deletions(-) diff --git a/assets/components/pages/about/about.twig b/assets/components/pages/about/about.twig index 6bf5dd918..af5dc9188 100644 --- a/assets/components/pages/about/about.twig +++ b/assets/components/pages/about/about.twig @@ -1,3 +1,5 @@ +{% set isSpecial = true %} + {% extends "@templates/base/base.twig" %} {% block content %} diff --git a/assets/components/pages/association-list/association-list.twig b/assets/components/pages/association-list/association-list.twig index 1b263d40b..1630bca0b 100644 --- a/assets/components/pages/association-list/association-list.twig +++ b/assets/components/pages/association-list/association-list.twig @@ -1,3 +1,5 @@ +{% set isSpecial = true %} + {% extends "@templates/base/base.twig" %} {% block content %} diff --git a/assets/components/pages/lab-homepage/lab-homepage.twig b/assets/components/pages/lab-homepage/lab-homepage.twig index 89796a2b7..82f7406ab 100644 --- a/assets/components/pages/lab-homepage/lab-homepage.twig +++ b/assets/components/pages/lab-homepage/lab-homepage.twig @@ -1,3 +1,5 @@ +{% set hasTaggedBreadcrumb = true %} + {% extends "@templates/base/base.twig" %} {% block header %} diff --git a/assets/components/pages/study-plan-course/study-plan-course.twig b/assets/components/pages/study-plan-course/study-plan-course.twig index e41506310..7ddbdb1f4 100644 --- a/assets/components/pages/study-plan-course/study-plan-course.twig +++ b/assets/components/pages/study-plan-course/study-plan-course.twig @@ -24,14 +24,36 @@ diff --git a/assets/components/pages/study-plan/study-plan.twig b/assets/components/pages/study-plan/study-plan.twig index 8b15d7d15..c442498ab 100644 --- a/assets/components/pages/study-plan/study-plan.twig +++ b/assets/components/pages/study-plan/study-plan.twig @@ -23,12 +23,34 @@ From 1529e324438305f2462fb8162f385338cbe50396 Mon Sep 17 00:00:00 2001 From: Aline Date: Wed, 1 May 2024 16:58:24 +0200 Subject: [PATCH 16/24] Fix CSS order --- assets/components/organisms/nav-mobile/nav-mobile.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/assets/components/organisms/nav-mobile/nav-mobile.scss b/assets/components/organisms/nav-mobile/nav-mobile.scss index 3b8f8ab82..c624f2029 100644 --- a/assets/components/organisms/nav-mobile/nav-mobile.scss +++ b/assets/components/organisms/nav-mobile/nav-mobile.scss @@ -1,16 +1,16 @@ .nav-toggle-layout > .nav-container { + width: auto; margin: 0; padding: 0; - width: auto; @include media-breakpoint-down(lg) { - background: #fff; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; + background: #fff; border-top: 1px solid #c1c1c1; overflow-y: scroll; transform: translateX(-100%); @@ -24,8 +24,8 @@ } .nav-main-mobile { - border: 0; position: static; + border: 0; transform: none !important; @include media-breakpoint-up(xl) { @@ -42,12 +42,12 @@ } .nav-container .nav-menu { - border-bottom: 1px solid $gray-300; display: grid; grid-template-columns: repeat(3,1fr); - padding-block: 1rem; position: static; width: 100%; + padding-block: 1rem; + border-bottom: 1px solid $gray-300; li { border: 0; From 26c64872afa773cf42f39250e9b786eb87075894 Mon Sep 17 00:00:00 2001 From: Aline Date: Wed, 1 May 2024 17:13:44 +0200 Subject: [PATCH 17/24] Mobile nav aside fine tunning --- .../organisms/nav-aside/nav-aside.scss | 18 ++++++++++++++++++ .../organisms/nav-aside/nav-aside.twig | 2 +- .../organisms/nav-mobile/nav-mobile.scss | 8 -------- 3 files changed, 19 insertions(+), 9 deletions(-) diff --git a/assets/components/organisms/nav-aside/nav-aside.scss b/assets/components/organisms/nav-aside/nav-aside.scss index 27a9608a9..93e18c1f1 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: 1rem; + font-size: 1rem; + } + } + } + + @include media-breakpoint-up(xl) { + height: 100%; + } + @include media-breakpoint-up(xxl){ flex: 0 0 16.1%; max-width: 16.1%; diff --git a/assets/components/organisms/nav-aside/nav-aside.twig b/assets/components/organisms/nav-aside/nav-aside.twig index 2363652b0..75a4b4aeb 100644 --- a/assets/components/organisms/nav-aside/nav-aside.twig +++ b/assets/components/organisms/nav-aside/nav-aside.twig @@ -5,7 +5,7 @@ aria-describedby="nav-aside-title" > -
      +
        {% if nav_aside_items %} {% for item in nav_aside_items %} {% if item.siblings_before and loop.index0 == nav_aside_active %} diff --git a/assets/components/organisms/nav-mobile/nav-mobile.scss b/assets/components/organisms/nav-mobile/nav-mobile.scss index c624f2029..b2207257c 100644 --- a/assets/components/organisms/nav-mobile/nav-mobile.scss +++ b/assets/components/organisms/nav-mobile/nav-mobile.scss @@ -64,11 +64,3 @@ } } } - -.nav-aside-layout .nav-aside-wrapper { - @include media-breakpoint-up(xl) { - height: 100%; - } -} - - From 11431468688ef27bc60e7cbac72fe203055353e1 Mon Sep 17 00:00:00 2001 From: Aline Date: Wed, 1 May 2024 17:22:26 +0200 Subject: [PATCH 18/24] Fix styleint css order --- assets/components/molecules/breadcrumb/breadcrumb.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/components/molecules/breadcrumb/breadcrumb.scss b/assets/components/molecules/breadcrumb/breadcrumb.scss index a884bde81..26056c9a4 100644 --- a/assets/components/molecules/breadcrumb/breadcrumb.scss +++ b/assets/components/molecules/breadcrumb/breadcrumb.scss @@ -139,8 +139,8 @@ } &.active { - color: $gray-700; font-weight: bold; + color: $gray-700; } &.expand-links { @@ -151,10 +151,10 @@ // Expand links button .breadcrumb .btn-expand-links { + height: auto; padding: 0; - font-size: inherit; border: 0; - height: auto; + font-size: inherit; line-height: 1; } From 8b7aa4a75f8967e622a4aeb995a63963cbb38dad Mon Sep 17 00:00:00 2001 From: Aline Date: Thu, 16 May 2024 15:51:22 +0200 Subject: [PATCH 19/24] Fix dropdown item classes (study plan templates) --- .../components/pages/study-plan-course/study-plan-course.twig | 2 +- assets/components/pages/study-plan/study-plan.twig | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/components/pages/study-plan-course/study-plan-course.twig b/assets/components/pages/study-plan-course/study-plan-course.twig index 7ddbdb1f4..fe5b3cd28 100644 --- a/assets/components/pages/study-plan-course/study-plan-course.twig +++ b/assets/components/pages/study-plan-course/study-plan-course.twig @@ -43,7 +43,7 @@