Skip to content
Snippets Groups Projects
Commit 520728f8 authored by Olivia206's avatar Olivia206
Browse files

added style to search modal

parent 90b07a0d
No related branches found
No related tags found
No related merge requests found
......@@ -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';
}
}
}
......
......@@ -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
......
.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
......@@ -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) }}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment