From 64155783783c36fa99be3e579434a67965e0406f Mon Sep 17 00:00:00 2001
From: Olivia206 <olivia.simonet206@gmail.com>
Date: Tue, 26 Sep 2023 17:25:36 +0200
Subject: [PATCH] fixed style
---
assets/js/theme/design-system/dropdowns.js | 2 +-
assets/js/theme/design-system/search.js | 4 +-
assets/sass/_theme/_utils.sass | 22 +++++++++
assets/sass/_theme/design-system/footer.sass | 45 ++++++++++++++++++
assets/sass/_theme/design-system/header.sass | 6 +--
assets/sass/_theme/design-system/nav.sass | 23 +---------
assets/sass/_theme/design-system/search.sass | 12 ++---
layouts/partials/footer/footer-simple.html | 18 ++++----
layouts/partials/footer/i18n.html | 48 ++++++++++++++------
9 files changed, 123 insertions(+), 57 deletions(-)
diff --git a/assets/js/theme/design-system/dropdowns.js b/assets/js/theme/design-system/dropdowns.js
index ec37cfdc..7c62c3af 100644
--- a/assets/js/theme/design-system/dropdowns.js
+++ b/assets/js/theme/design-system/dropdowns.js
@@ -29,7 +29,7 @@ class Dropdown {
}
// Selectors
-['.diplomas-select', '.dropdown-share'].map(selector => {
+['.diplomas-select', '.dropdown-share', '.footer-i18n'].map(selector => {
if (document.querySelector(selector)) {
new Dropdown(selector);
}
diff --git a/assets/js/theme/design-system/search.js b/assets/js/theme/design-system/search.js
index ee91a881..a7c674f1 100644
--- a/assets/js/theme/design-system/search.js
+++ b/assets/js/theme/design-system/search.js
@@ -28,7 +28,9 @@ class Search {
}
});
this.closeButton.addEventListener('click', () => {
- this.searchInstance.triggerSearch(' ');
+ this.input = this.element.querySelector('input');
+ this.input.value = "";
+ this.searchInstance.triggerSearch(" ");
this.toggle(false);
});
diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass
index 87bf8de4..85ea8182 100644
--- a/assets/sass/_theme/_utils.sass
+++ b/assets/sass/_theme/_utils.sass
@@ -389,6 +389,28 @@
figcaption .credit-content
display: block
+@mixin dropdown-i18n
+ position: relative
+ .dropdown-menu
+ margin-top: $header-nav-padding-y
+ padding-left: $spacing1
+ padding-bottom: $spacing0
+ padding-top: $spacing0
+ padding-right: $spacing1
+ right: 0
+ li a
+ padding-bottom: half($spacing0)
+ padding-top: half($spacing0)
+ display: block
+ &.is-checked
+ display: flex
+ justify-content: space-between
+ align-items: center
+ gap: $spacing2
+ text-decoration: none !important
+ @include icon(caret, after)
+ transform: rotate(-14deg) skewX(-30deg)
+
// https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6
@function str-replace($string, $search, $replace: "")
$index: str-index($string, $search)
diff --git a/assets/sass/_theme/design-system/footer.sass b/assets/sass/_theme/design-system/footer.sass
index 36671e6f..e9206479 100644
--- a/assets/sass/_theme/design-system/footer.sass
+++ b/assets/sass/_theme/design-system/footer.sass
@@ -31,6 +31,51 @@ footer#document-footer
&-credit
display: block
margin-top: $spacing0
+ &-search
+ padding-top: $spacing0 !important
+ &-i18n
+ @include dropdown-i18n
+ button
+ @include button-reset
+ @include icon(caret-bottom, after)
+ @include meta
+ align-items: center
+ cursor: pointer
+ display: flex
+ justify-content: start
+ padding-left: 0
+ text-align: left
+ &:focus,
+ &:focus-visible
+ box-shadow: none
+ &[aria-expanded="true"]
+ background: $color-background
+ justify-content: space-between
+ width: 100%
+ + .dropdown-menu
+ animation-duration: unset
+ &::after
+ transform: rotate(-180deg)
+ &::before
+ margin-right: $spacing0
+ &::after
+ margin-left: $spacing0
+ button[aria-expanded="true"],
+ .dropdown-menu
+ outline: px2rem(10) solid $color-background
+ min-width: $spacing4
+ .dropdown-menu
+ @include meta
+ background: $color-background
+ @include media-breakpoint-up(desktop)
+ left: 0
+ margin-top: px2rem(17)
+ max-height: calc(100vh - var(--header-height))
+ overflow: auto
+ padding: 0
+ position: absolute
+ width: fit-content
+
@if $footer-icons-enabled
&-social
.nav-social + .site-links
diff --git a/assets/sass/_theme/design-system/header.sass b/assets/sass/_theme/design-system/header.sass
index 090de0e7..1b26ef82 100644
--- a/assets/sass/_theme/design-system/header.sass
+++ b/assets/sass/_theme/design-system/header.sass
@@ -105,9 +105,6 @@ header#document-header
position: relative
text-transform: uppercase
line-height: 1
- @include media-breakpoint-down(desktop)
- display: flex
- align-items: center
&:focus
box-shadow: none
&:focus-visible
@@ -115,6 +112,9 @@ header#document-header
outline-offset: 5px
outline-style: dashed
outline-width: 1px
+ @include media-breakpoint-down(desktop)
+ display: flex
+ align-items: center
span:first-of-type
@include meta
font-size: 14px
diff --git a/assets/sass/_theme/design-system/nav.sass b/assets/sass/_theme/design-system/nav.sass
index f3b22f7e..58c3952c 100644
--- a/assets/sass/_theme/design-system/nav.sass
+++ b/assets/sass/_theme/design-system/nav.sass
@@ -131,31 +131,12 @@
margin-top: $spacing1
.header-i18n
- position: relative
- [role="button"]
+ @include dropdown-i18n
+ [role="button"],
@include icon(globe, after)
&[aria-expanded][aria-expanded="true"]
&::after
transform: none
- .dropdown-menu
- margin-top: $header-nav-padding-y
- padding-left: $spacing1
- padding-bottom: $spacing0
- padding-top: $spacing0
- padding-right: $spacing1
- right: 0
- li a
- padding-bottom: half($spacing0)
- padding-top: half($spacing0)
- display: block
- &.is-checked
- display: flex
- justify-content: space-between
- align-items: center
- gap: $spacing2
- text-decoration: none !important
- @include icon(caret, after)
- transform: rotate(-14deg) skewX(-30deg)
@include media-breakpoint-down(desktop)
&.is-opened
diff --git a/assets/sass/_theme/design-system/search.sass b/assets/sass/_theme/design-system/search.sass
index 5114c4b3..95a34317 100644
--- a/assets/sass/_theme/design-system/search.sass
+++ b/assets/sass/_theme/design-system/search.sass
@@ -13,7 +13,7 @@
font-size: $body-size-desktop
line-height: inherit
margin-left: px2rem(8)
- @include media-breakpoint-down(md)
+ @include media-breakpoint-down(desktop)
&.pagefind-menu
border-bottom: 1px solid #adb5bd
padding: $spacing1 0
@@ -68,12 +68,12 @@
&::after
align-items: center
display: flex
- height: half($spacing3)
padding-right: px2rem(2)
position: absolute
pointer-events: none
right: 0
- top: 0
+ top: half($spacing0)
+ transform: translate(0,20%)
z-index: 7
@include media-breakpoint-down(md)
right: $spacing1
@@ -166,8 +166,4 @@
bottom: px2rem(44)
.pagefind-footer
- padding: 0
- margin-bottom: calc(#{$spacing3} + #{half($spacing3)})
- @include media-breakpoint-down(md)
- margin-bottom: $spacing3
-
+ padding: 0
\ No newline at end of file
diff --git a/layouts/partials/footer/footer-simple.html b/layouts/partials/footer/footer-simple.html
index 0a5e44da..1791373f 100644
--- a/layouts/partials/footer/footer-simple.html
+++ b/layouts/partials/footer/footer-simple.html
@@ -7,19 +7,21 @@
</div>
</div>
{{ partial "footer/i18n.html" . }}
+{{ if and (site.Params.search.active) (eq site.Params.search.position "footer")}}
+<div class="container footer-search">
+ {{ partial "header/search.html"
+ (dict
+ "position" "footer"
+ "context" .
+ )
+ }}
+ </div>
+ {{ end }}
<div class="container">
<div class="footer-social">
{{ partial "footer/social.html" }}
</div>
<div class="footer-legals">
- {{ if and (site.Params.search.active) (eq site.Params.search.position "footer")}}
- {{ partial "header/search.html"
- (dict
- "position" "footer"
- "context" .
- )
- }}
- {{ end }}
{{ partial "footer/legals.html" }}
</div>
</div>
diff --git a/layouts/partials/footer/i18n.html b/layouts/partials/footer/i18n.html
index 30bdbd9e..f084432a 100644
--- a/layouts/partials/footer/i18n.html
+++ b/layouts/partials/footer/i18n.html
@@ -3,22 +3,40 @@
{{ $siteLang := "" }}
{{ $url := "" }}
{{ if gt (len site.Languages) 1 }}
-<div class="container">
- <div class="footer-i18n">
- {{ with site.Languages }}
- <ul class="small">
- {{ range site.Languages }}
- {{ $siteLang := . }}
- {{ $url = printf "/%s/" .Lang }}
- {{ range $pageWithTranslations }}
- {{ if eq .Lang $siteLang.Lang }}
- {{ $url = .Permalink }}
+ <div class="container">
+ <div class="footer-i18n">
+ <button
+ aria-haspopup="menu"
+ aria-expanded="false"
+ aria-label="{{ i18n "commons.accessibility.menu_lang" }}"
+ tabindex="0">
+ {{- site.Language.LanguageName -}}
+ </button>
+ <div class="dropdown-menu dropdown-languages">
+ <ul>
+ {{ range site.Languages }}
+ {{ $siteLang := . }}
+ {{ $url = printf "/%s/" .Lang }}
+ {{ range $pageWithTranslations }}
+ {{ if eq .Lang $siteLang.Lang }}
+ {{ $url = .Permalink }}
+ {{ end }}
{{ end }}
+ <li>
+ <a
+ href="{{ $url }}"
+ lang="{{ $siteLang }}"
+ hreflang="{{ $siteLang }}"
+ {{ if eq $siteLang site.Language }}
+ class="is-checked"
+ {{ end }}
+ >
+ {{- $siteLang.LanguageName -}}
+ </a>
+ </li>
{{ end }}
- <li><a href="{{ $url }}" lang="{{ $siteLang }}" hreflang="{{ $siteLang }}">{{ $siteLang.LanguageName }}</a></li>
- {{ end }}
- </ul>
- {{ end }}
+ </ul>
+ </div>
+ </div>
</div>
-</div>
{{ end }}
\ No newline at end of file
--
GitLab