From 520728f8586070476970907ed2bdd132d37adfa6 Mon Sep 17 00:00:00 2001
From: Olivia206 <olivia.simonet206@gmail.com>
Date: Fri, 22 Sep 2023 16:39:45 +0200
Subject: [PATCH] added style to search modal
---
assets/js/theme/design-system/search.js | 23 ++++--
assets/sass/_theme/design-system/header.sass | 2 +-
assets/sass/_theme/design-system/search.sass | 83 ++++++++++++++------
layouts/partials/commons/menu.html | 4 +-
4 files changed, 78 insertions(+), 34 deletions(-)
diff --git a/assets/js/theme/design-system/search.js b/assets/js/theme/design-system/search.js
index 19a6b4b6..9bebb911 100644
--- a/assets/js/theme/design-system/search.js
+++ b/assets/js/theme/design-system/search.js
@@ -17,11 +17,16 @@ class Search {
listen() {
this.button.addEventListener('click', () => {
this.toggle(true);
- this.searchInput = this.element.querySelector('.pagefind-ui__search-input');
- this.searchInput.focus();
+ this.closeButton.focus();
+ this.removedItems = this.element.querySelector('.pagefind-ui__suppressed', '.pagefind-ui__search-clear');
+ if (this.removedItems) {
+ this.removedItems.remove();
+ }
});
this.closeButton.addEventListener('click', () => {
+ this.element.querySelector('form').reset();
this.toggle(false);
+ this.button.focus();
});
window.addEventListener('keydown', (event) => {
@@ -30,7 +35,7 @@ class Search {
this.button.focus();
} else if (event.key === "Tab" && this.state.isOpened) {
this.innerFocus(event);
- event.preventDefault();
+ // event.preventDefault();
}
});
}
@@ -38,7 +43,7 @@ class Search {
innerFocus(event) {
const focusables = 'a, button, input, textarea, select, details, [tabindex], [contenteditable="true"]';
const elements = this.element.querySelectorAll(focusables);
-
+
const focusableInDialog = Array.from(elements).filter(element => element.tabIndex >= 0);
const firstFocusable = focusableInDialog[0];
const lastFocusable = focusableInDialog.at(-1);
@@ -48,17 +53,23 @@ class Search {
}
if (!this.element.contains(event.target) && event.shiftKey) {
lastFocusable.focus();
+ event.preventDefault();
}
- else if (!this.element.contains(event.target)) {
+ else if (!this.element.contains(event.target)) {
firstFocusable.focus();
+ event.preventDefault();
}
- firstFocusable.focus();
}
toggle(open = !this.state.isOpened) {
this.state.isOpened = open;
this.element.setAttribute('aria-hidden', !this.state.isOpened);
this.button.setAttribute('aria-expanded', this.state.isOpened);
+ if (open) {
+ document.body.style.overflow = 'hidden';
+ } else {
+ document.body.style.overflow = 'unset';
+ }
}
}
diff --git a/assets/sass/_theme/design-system/header.sass b/assets/sass/_theme/design-system/header.sass
index 67a35ae7..090de0e7 100644
--- a/assets/sass/_theme/design-system/header.sass
+++ b/assets/sass/_theme/design-system/header.sass
@@ -96,7 +96,7 @@ header#document-header
display: flex
flex-wrap: wrap
justify-content: space-between
- button[type="button"]
+ button[type="button"]:not(.pagefind-ui__button)
@include button-reset
display: none
border: 0
diff --git a/assets/sass/_theme/design-system/search.sass b/assets/sass/_theme/design-system/search.sass
index 5ba73a88..95ddbfe1 100644
--- a/assets/sass/_theme/design-system/search.sass
+++ b/assets/sass/_theme/design-system/search.sass
@@ -1,24 +1,39 @@
-
-.pagefind-ui__toggle
+.pagefind-ui__toggle,
+.search__close
+ @include button-reset
@include meta
+ box-shadow: none !important
+.pagefind-ui__toggle
cursor: pointer
padding: half($spacing0) $spacing0
-.search
- &__close
- @include button-reset
- @include meta
- @include icon-block(close, after)
- position: absolute
- right: $spacing3
+ text-align: left
+ @include media-breakpoint-down(md)
+ border-bottom: 1px solid #adb5bd
+ padding: $spacing1 0
+ width: 100%
+.search__close
+ @include icon-block(close, after)
+ position: absolute
+ right: $spacing3
+ @include media-breakpoint-down(md)
+ right: 0
+ top: half($spacing0)
#search
background: $color-background
height: 100vh
left: 0
- padding: $spacing4 $spacing3 $spacing3
+ padding-top: $spacing4
+ padding-bottom: $spacing3
+ padding-right: $spacing1
+ padding-left: $spacing1
position: fixed
+ overflow: auto
top: 0
width: 100vw
z-index: 80
+ @include media-breakpoint-up(md)
+ padding-right: $spacing3
+ padding-left: $spacing3
&[aria-hidden=true]
display: none
.pagefind-ui
@@ -29,24 +44,36 @@
border-top: 0
padding-right: $spacing1 !important
position: relative
- &__form
- position: relative
+ @include media-breakpoint-down(md)
+ width: 100%
+ margin-bottom: $spacing1
+ &__button[type="button"]
+ background: $color-text
+ border-radius: 0
+ color: $color-background
+ display: block
+ margin: $spacing4 auto 0
+ @include media-breakpoint-down(md)
+ margin-top: $spacing2
&__message
+ @include meta
+ color: $color-text-alt
text-align: right
- position: absolute
- top: $spacing3
- &__search-clear
- @include button-reset
- color: $color-accent
+ &__search-clear,
+ &__suppressed
+ display: none
+ pointer-events: none
&__drawer
+ position: relative
z-index: 99
- &__results-area
- margin-top: $spacing3
&__result
list-style: none
position: relative
&-thumb
- grid-column: 1/3
+ grid-column: 1/4
+ > *
+ aspect-ratio: 3/2
+ object-fit: cover
@include media-breakpoint-down(md)
display: none
+ li
@@ -54,16 +81,22 @@
@include media-breakpoint-up(md)
@include grid
&-inner
- grid-column: 3/9
- &__inner
- mark
- background-color: $color-accent
+ grid-column: 4/13
+ &__result-excerpt mark
+ background-color: $color-accent !important
+ color: $color-background !important
&__result-title a
@include h4
@include stretched-link
@include media-breakpoint-up(md)
&__form
+ position: relative
width: col(8)
&__search-input,
&__message
- width: col(8,8)
+ width: col(8,8)
+ &__message
+ position: absolute
+ top: $spacing0
+ &__results-area
+ padding-top: $spacing3
\ No newline at end of file
diff --git a/layouts/partials/commons/menu.html b/layouts/partials/commons/menu.html
index 02093437..76f875f2 100644
--- a/layouts/partials/commons/menu.html
+++ b/layouts/partials/commons/menu.html
@@ -63,9 +63,9 @@
{{- end -}}
{{ end -}}
{{ if and (eq $kind "primary") (site.Params.search.active)}}
- <li class="pagefind-ui__toggle" role="button" aria-expanded="false">
+ <button class="pagefind-ui__toggle" aria-expanded="false">
{{ i18n (printf "commons.search.title") }}
- </li>
+ </button>
{{- partial "header/search.html" . -}}
{{ end }}
{{ if and (eq $kind "primary") (site.Params.menu.i18n.display) }}
--
GitLab