-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Styleguide: mise à jour du breadcrumb et de la navigation mobile (#718)
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.
- Loading branch information
1 parent
e6a0e9d
commit d02cb1b
Showing
19 changed files
with
482 additions
and
110 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
69 changes: 69 additions & 0 deletions
69
assets/components/molecules/breadcrumb/breadcrumb-dropdown.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| <nav aria-label="breadcrumb" class="breadcrumb-wrapper"> | ||
| <ol class="breadcrumb"> | ||
| <li class="breadcrumb-item"> | ||
| <a class="bread-link bread-home" href="#"> | ||
| {% include '@atoms/icon/icon.twig' with { icon: 'icon-home' } %} | ||
| </a> | ||
| </li> | ||
| <li class="breadcrumb-item expand-links"> | ||
| <button class="btn btn-expand-links" aria-expanded="false" title="Display the complete path"> | ||
| <span class="dots" aria-hidden="true">…</span> | ||
| <span class="sr-only">Display the complete path</span> | ||
| </button> | ||
| </li> | ||
| <li class="breadcrumb-item"> | ||
| <a class="bread-link" href="#">Schools</a> | ||
| <div class="dropdown"> | ||
| <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="dropdown-menu-1"> | ||
| {% include '@atoms/icon/icon.twig' with { icon: 'arrow-down-circle', icon_classes:'feather' } %} | ||
| <span class="sr-only">Display same level pages – Schools</span> | ||
| </button> | ||
| <ul class="dropdown-menu" id="dropdown-menu-1"> | ||
| <li class="dropdown-item"><a href="#">About</a></li> | ||
| <li class="dropdown-item"><a href="#">Education</a></li> | ||
| <li class="dropdown-item"><a href="#">Research</a></li> | ||
| <li class="dropdown-item"><a href="#">Innovation</a></li> | ||
| <li class="dropdown-item current-menu-item-parent"><a href="#">Schools</a></li> | ||
| <li class="dropdown-item"><a href="#">Campus</a></li> | ||
| </ul> | ||
| </div> | ||
| </li> | ||
| <li class="breadcrumb-item"> | ||
| <a class="bread-link" href="#">School of Architecture, Civil and Environmental Engineering</a> | ||
| <div class="dropdown"> | ||
| <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="dropdown-menu-2"> | ||
| {% include '@atoms/icon/icon.twig' with { icon: 'arrow-down-circle', icon_classes:'feather' } %} | ||
| <span class="sr-only">Display same level pages – School of Architecture, Civil and Environmental Engineering</span> | ||
| </button> | ||
| <ul class="dropdown-menu" id="dropdown-menu-2"> | ||
| <li class="dropdown-item current-menu-item-parent"><a href="#">School of Architecture, Civil and Environmental Engineering</a></li> | ||
| <li class="dropdown-item"><a href="#">School of Computer and Communication Sciences</a></li> | ||
| <li class="dropdown-item"><a href="#">School of Basic Sciences</a></li> | ||
| <li class="dropdown-item"><a href="#">School of Engineering</a></li> | ||
| <li class="dropdown-item"><a href="#">School of Life Sciences</a></li> | ||
| <li class="dropdown-item"><a href="#">College of Management of Technology</a></li> | ||
| <li class="dropdown-item"><a href="#">College of Humanities</a></li> | ||
| <li class="dropdown-item"><a href="#">Sections</a></li> | ||
| </ul> | ||
| </div> | ||
| </li> | ||
| <li class="breadcrumb-item"> | ||
| <a class="bread-link" href="#">Sustainability challenges</a> | ||
| </li> | ||
| <li class="breadcrumb-item active" aria-current="page"> | ||
| <span class="bread-item">FUSTIC association</span> | ||
| <div class="dropdown"> | ||
| <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="dropdown-menu-3"> | ||
| {% include '@atoms/icon/icon.twig' with { icon: 'arrow-down-circle', icon_classes:'feather' } %} | ||
| <span class="sr-only">Display same level pages – FUSTIC association</span> | ||
| </button> | ||
| <ul class="dropdown-menu" id="dropdown-menu-3"> | ||
| <li class="dropdown-item"><a href="#">ENAC Clusters</a></li> | ||
| <li class="dropdown-item"><a href="#">Interdisciplinary Centers</a></li> | ||
| <li class="dropdown-item current-menu-item-parent"><a href="#">FUSTIC association</a></li> | ||
| <li class="dropdown-item"><a href="#">Sustainability grants</a></li> | ||
| </ul> | ||
| </div> | ||
| </li> | ||
| </ol> | ||
| </nav> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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'); | ||
| } | ||
| } | ||
| }); | ||
| }; |
Oops, something went wrong.