Skip to content
Snippets Groups Projects
Unverified Commit 9f585d6b authored by Olivia Simonet's avatar Olivia Simonet Committed by GitHub
Browse files

Permettre de placer le menu des langues dans le upper menu (#858)

parent 190883e3
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 153 additions and 112 deletions
assets/js/theme/design-system/dropdowns.js
+ 1
− 1
View file @ 9f585d6b
class Dropdown {
constructor (selector) {
this.element = document.querySelector(selector);
this.dropdownButton = this.element.querySelector('button');
this.dropdownButton = this.element.querySelector('button, [role="button"]');
this.state = {
isOpened: false
......
assets/sass/_theme/design-system/dropdown.sass
+ 9
− 8
View file @ 9f585d6b
......@@ -8,6 +8,11 @@
margin: -$spacing-2
@include icon(arrow-down-s-line, after)
margin-left: 5px
// When dropdown expanded
&[aria-expanded="true"]
@include icon(arrow-up-s-line, after)
+ .dropdown-menu
display: block
.dropdown-menu
@include list-reset
top: calc(100% + #{$spacing-2})
......@@ -29,11 +34,7 @@
padding: $spacing-2
text-decoration: none
white-space: normal
&:hover
background-color: var(--dropdown-hover-background)
color: var(--dropdown-hover-color)
// When dropdown expanded
button[aria-expanded="true"]
@include icon(arrow-up-s-line, after)
+ .dropdown-menu
display: block
\ No newline at end of file
@include media-breakpoint-up(desktop)
&:hover
background-color: var(--dropdown-hover-background)
color: var(--dropdown-hover-color)
\ No newline at end of file
assets/sass/_theme/design-system/footer.sass
+ 55
− 10
View file @ 9f585d6b
......@@ -21,6 +21,54 @@ footer#document-footer
@include list-reset
li + li
margin-top: $spacing-2
.footer-i18n
margin-top: $spacing-4
.footer-i18n
--dropdown-background: #{$dropdown-i18n-background-color}
--dropdown-color: #{$dropdown-i18n-color}
display: inline-block
min-width: calc(var(--column-width) + var(--grid-gutter))
@include dropdown
@include media-breakpoint-up(desktop)
--dropdown-border-color: transparent
.dropdown-languages
bottom: calc(100% + #{$spacing-1})
top: unset
right: 0
margin-left: -($spacing-2)
a
padding-bottom: $spacing-1
padding-top: $spacing-1
button,
span[role="button"]
padding-bottom: $spacing-1
&[aria-expanded="true"]
background: $dropdown-i18n-background-color
color: $dropdown-i18n-color
&:focus-visible
border-radius: 3px
@include media-breakpoint-up(desktop)
display: block
margin-right: 0
@include media-breakpoint-down(desktop)
width: 100%
button,
span[role="button"]
margin-left: var(--grid-gutter-negative)
margin-right: var(--grid-gutter-negative)
padding-left: var(--grid-gutter)
padding-right: var(--grid-gutter)
&[aria-expanded="true"]
border-bottom: 1px solid var(--color-border)
border-top: 1px solid var(--color-border)
display: flex
justify-content: space-between
.dropdown-languages
li
border-bottom: 1px solid var(--color-border)
a
padding-left: var(--grid-gutter)
padding-right: var(--grid-gutter)
@include media-breakpoint-down(desktop)
.container
......@@ -47,19 +95,16 @@ footer#document-footer
@include meta
&-credit
display: block
margin-top: $spacing-2
a
text-decoration-color: alphaColor(currentColor, 0.3)
&-search
padding-top: $spacing-2 !important
&-i18n
--dropdown-background: #{$dropdown-i18n-background-color}
--dropdown-color: #{$dropdown-i18n-color}
@include dropdown
@include media-breakpoint-up(desktop)
--dropdown-border-color: transparent
button:focus-visible
border-radius: 3px
padding-top: $spacing-2
&-credit
margin-top: $spacing-4
&-legals
.without-i18n + .footer-search
padding-top: 0
margin-top: $spacing-4
@if $footer-icons-enabled
&-social
......
assets/sass/_theme/design-system/header.sass
+ 53
− 10
View file @ 9f585d6b
......@@ -50,6 +50,27 @@ header#document-header
@include media-breakpoint-up(desktop)
height: $header-logo-height-desktop
// i18n
.primary-i18n,
.upper-menu-i18n
position: relative
[role="button"]
@include icon(global-line, after)
margin-left: pxToRem(5)
text-transform: uppercase
&[aria-expanded][aria-expanded="true"]
&::after
transform: none
.dropdown-menu
@include media-breakpoint-up(desktop)
margin-top: $header-nav-padding-y
padding: $spacing-2 $spacing-3
position: absolute
right: 0
li a
padding: $spacing-1 0
display: flex
// Top menu
.upper-menu
background: $header-upper-menu-background
......@@ -93,8 +114,6 @@ header#document-header
background: $header-upper-menu-sticky-background
display: block
.nav-level-1
a
text-decoration: none
> li
line-height: 1
border: none
......@@ -102,20 +121,44 @@ header#document-header
align-items: center
@include media-breakpoint-down(desktop)
height: 100%
> a,
> span
display: block
white-space: nowrap
line-height: 1
> *
@include media-breakpoint-up(desktop)
padding: $header-upper-menu-padding-y 0
&:not(.upper-menu-i18n)
> a,
> span
display: block
white-space: nowrap
line-height: 1
// apply active style to active page (default) or active site
$upper-menu-active-selector: '.active'
@if $header-upper-menu-active-style-for-sites
$upper-menu-active-selector: ':not([href*="https://"], [href*="http://"])'
a#{$upper-menu-active-selector}
box-shadow: $header-upper-menu-active-box-shadow
@include media-breakpoint-up(desktop)
> a,
> span,
> button
padding: $header-upper-menu-padding-y 0
&:not(.upper-menu-i18n)
a
text-decoration: none
&.upper-menu-i18n
span[role="button"]
cursor: pointer
.dropdown-menu
background: $header-upper-menu-background
@include media-breakpoint-up(desktop)
left: -($spacing-3) // align dropdown text to language
margin-top: 0
right: unset
top: calc(100% + #{$header-upper-menu-border-bottom-width})
a
@include link($header-dropdown-color)
@include media-breakpoint-down(desktop)
margin-left: $spacing-3
margin-right: var(--grid-gutter-negative)
li
align-items: center
display: flex
@include media-breakpoint-down(desktop)
&.has-upper-menu
.menu
......
assets/sass/_theme/design-system/nav.sass
+ 2
− 25
View file @ 9f585d6b
......@@ -125,26 +125,13 @@
p
@include small
.header-i18n
position: relative
[role="button"]
text-transform: uppercase
.dropdown-menu
@include media-breakpoint-up(desktop)
right: 0
margin-top: $header-nav-padding-y
padding: $spacing-2 $spacing-3
li a
padding: $spacing-1 0
display: flex
@include media-breakpoint-up(desktop)
.nav-level-1
align-items: baseline
.nav-level-3
li
margin-top: $spacing-2
.has-children:not(.header-i18n)
.has-children:not(.upper-menu-i18n, .primary-i18n)
@if $header-dropdown-full
.dropdown-menu
@include inset(100%, 0, auto, 0)
......@@ -190,13 +177,6 @@
+ li.has-children
margin-top: $spacing-3
.header-i18n
[role="button"]
@include icon(global-line, after)
&[aria-expanded][aria-expanded="true"]
&::after
transform: none
@include media-breakpoint-down(desktop)
display: none
flex-basis: 100vw
......@@ -260,7 +240,4 @@
[aria-expanded="false"] ~ .dropdown-menu
display: none
[aria-expanded="true"] ~ .dropdown-menu
display: block
animation-duration: 0.3s
animation-fill-mode: both
animation-name: showIn
\ No newline at end of file
display: block
\ No newline at end of file
hugo.yaml
+ 5
− 2
View file @ 9f585d6b
......@@ -46,8 +46,6 @@ params:
active: false
source: "Summary" # "Summary" | "meta_description"
truncate: 125
i18n:
display: true
breadcrumb:
position: hero-start # hero-start | hero-end | after-hero | none
design:
......@@ -61,6 +59,11 @@ params:
# - upper-menu
# - fixed
# - footer
i18n:
positions:
- primary
# - upper-menu
- footer
home:
head:
title: both # both | page | site
......
layouts/partials/header/i18n.html → layouts/partials/commons/i18n.html
+ 8
− 10
View file @ 9f585d6b
......@@ -2,18 +2,21 @@
{{ $pageWithTranslations := $page.Translations | append $page }}
{{ $siteLang := "" }}
{{ $url := "" }}
{{ $position := .position }}
{{ if gt (len site.Languages) 1 }}
<li class="header-i18n has-children">
<li class="{{ $position }}-i18n has-children">
{{ with site.Languages }}
{{ $language := cond (eq $position "footer") site.Language.LanguageName site.Language }}
<span
role="button"
aria-controls="header-i18n-list"
aria-controls="{{ $position }}-i18n-list"
aria-expanded="false"
aria-label="{{ i18n "commons.accessibility.menu_lang" }}"
tabindex="0">
{{- site.Language -}}
{{- $language -}}
</span>
<div class="dropdown-menu dropdown-languages" id="header-i18n-list">
<div class="dropdown-menu dropdown-languages" id="{{ $position }}-i18n-list">
<ul>
{{ range site.Languages }}
{{ $siteLang := . }}
......@@ -25,16 +28,11 @@
{{ end }}
{{ if not (eq $siteLang site.Language) }}
<li>
<a
href="{{ $url }}"
lang="{{ $siteLang }}"
hreflang="{{ $siteLang }}"
>
<a href="{{ $url }}" lang="{{ $siteLang }}" hreflang="{{ $siteLang }}" >
{{- $siteLang.LanguageName -}}
</a>
</li>
{{ end }}
{{ end }}
</ul>
</div>
......
layouts/partials/commons/menu.html
+ 8
− 2
View file @ 9f585d6b
......@@ -103,7 +103,13 @@
{{ partial "commons/search/button.html" $kind }}
</li>
{{ end }}
{{ if .i18n }}
{{ partial "header/i18n.html" .context }}
{{ if eq $kind "legal" }}
{{ $kind = "footer" }}
{{ end }}
{{ if in site.Params.i18n.positions $kind }}
{{ partial "commons/i18n.html" (dict
"context" .context
"position" $kind
)}}
{{ end }}
</ul>
layouts/partials/footer/footer-simple.html
+ 6
− 7
View file @ 9f585d6b
......@@ -6,13 +6,6 @@
{{ partial "footer/site.html" }}
</div>
</div>
{{ partial "footer/i18n.html" . }}
{{ if and site.Params.search.active (in site.Params.search.positions "footer") }}
<div class="container footer-search">
{{ partial "commons/search/button.html" "footer" }}
</div>
{{ end }}
<div class="container">
<div class="footer-social">
......@@ -20,5 +13,11 @@
</div>
<div class="footer-legals">
{{ partial "footer/legals.html" }}
{{ if and site.Params.search.active (in site.Params.search.positions "footer") }}
<div class="footer-search">
{{ partial "commons/search/button.html" "footer" }}
</div>
{{ end }}
{{ partial "footer/credit.html" }}
</div>
</div>
layouts/partials/footer/i18n.html deleted 100644 → 0
+ 0
− 34
View file @ 190883e3
{{ $page := . }}
{{ $pageWithTranslations := $page.Translations | append $page }}
{{ $siteLang := "" }}
{{ $url := "" }}
{{ if gt (len site.Languages) 1 }}
<div class="container">
<div class="footer-i18n">
<button
aria-expanded="false"
aria-controls="footer-i18n-list"
aria-label="{{ i18n "commons.accessibility.menu_lang" }}">
{{- site.Language.LanguageName -}}
</button>
<ul class="dropdown-menu dropdown-languages" id="footer-i18n-list">
{{ range site.Languages }}
{{ $siteLang := . }}
{{ $url = printf "/%s/" .Lang }}
{{ range $pageWithTranslations }}
{{ if eq .Lang $siteLang.Lang }}
{{ $url = .Permalink }}
{{ end }}
{{ end }}
{{ if not (eq $siteLang site.Language) }}
<li>
<a href="{{ $url }}" lang="{{ $siteLang }}" hreflang="{{ $siteLang }}">
{{- $siteLang.LanguageName -}}
</a>
</li>
{{ end }}
{{ end }}
</ul>
</div>
</div>
{{ end }}
\ No newline at end of file
layouts/partials/footer/legals.html
+ 6
− 2
View file @ 9f585d6b
{{ $menu := partial "GetMenu" "legal" }}
{{ $class := "nav-legal" }}
{{ if $menu }}
{{ if not (in site.Params.i18n.positions "footer") }}
{{ $class = printf "%s without-i18n" $class }}
{{ end }}
{{ partial "commons/menu.html"
(dict
"kind" "legal"
"level" 1
"class" "nav-legal"
"class" $class
)}}
{{ end }}
{{ partial "footer/credit.html" }}
layouts/partials/header/header.html
+ 0
− 1
View file @ 9f585d6b
......@@ -29,7 +29,6 @@
"kind" "primary"
"dropdown" true
"level" 1
"i18n" site.Params.menu.i18n.display
"context" .
)}}
</div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment