Skip to content

Commit 1e2c19c

Browse files
therobrobMoritzWeber0lenderom
authored
feat: Make search usable from all pages (#391)
- added search for all pages - refactored search implementation - refactored overlay implementation - structure changes in i11n --------- Signed-off-by: lennartrommeiss <61516567+lenderom@users.noreply.github.com> Co-authored-by: MoritzWeber0 <kontakt@moritz-weber.net> Co-authored-by: lennartrommeiss <61516567+lenderom@users.noreply.github.com>
1 parent 7021cdb commit 1e2c19c

21 files changed

+343
-205
lines changed

‎assets/js/darkmode.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
}
5050

5151
function updateToggleButtons(theme) {
52-
const toggleButtons = document.querySelectorAll(".a-theme-toggle");
52+
const toggleButtons = document.querySelectorAll(".o-header__theme-toggle");
5353

5454
toggleButtons.forEach((button) => {
5555
let icon;
@@ -78,7 +78,7 @@
7878
const savedTheme = getSavedTheme();
7979
updateToggleButtons(savedTheme);
8080

81-
const toggleButtons = document.querySelectorAll(".a-theme-toggle");
81+
const toggleButtons = document.querySelectorAll(".o-header__theme-toggle");
8282
toggleButtons.forEach((button) => {
8383
button.addEventListener("click", toggleTheme);
8484
});

‎assets/js/main.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,5 @@ import "./contentNavigation.js";
66
import "./anchorlinks.js";
77
import "./dropdown.js";
88
import "./darkmode.js";
9+
import "./search.js";
910
import "./interactiveMap.js";

‎assets/js/search.js‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
2+
const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
3+
4+
const initSearch = () => {
5+
const search = document.getElementById("search");
6+
const searchButtons = document.querySelectorAll(".o-header__search");
7+
const isHome = document.querySelector(".o-startpage");
8+
const overlay = document.getElementById("overlay");
9+
let placeholderText = search.dataset.placeholder;
10+
let searchLabelText = search.dataset.label;
11+
12+
if (!isMobile) {
13+
if (isMac) {
14+
placeholderText += " (⌘ + K)";
15+
} else {
16+
placeholderText += " (CTRL + K)";
17+
}
18+
}
19+
20+
new PagefindUI({
21+
element: "#search",
22+
highlightParam: "highlight",
23+
showSubResults: true,
24+
translations: {
25+
placeholder: placeholderText,
26+
search_label: searchLabelText,
27+
},
28+
});
29+
30+
const searchElement = search.querySelector("input");
31+
32+
const closeSearch = () => {
33+
search.querySelector(".pagefind-ui__search-clear").click();
34+
overlay.classList.remove("overlay--show", "overlay--show-lv5");
35+
search.classList.remove("o-search--show");
36+
};
37+
38+
// Scroll to search on click
39+
if (search && isHome) {
40+
search.addEventListener("click", function () {
41+
overlay.classList.add("overlay--show", "overlay--show-lv5");
42+
search.scrollIntoView({ behavior: "smooth", block: "start" });
43+
});
44+
}
45+
46+
function showSearchOnContentPage() {
47+
search.classList.add("o-search--show");
48+
overlay.classList.add("overlay--show", "overlay--show-lv5");
49+
searchElement.focus();
50+
}
51+
52+
function showSearchOnStartPage() {
53+
overlay.classList.add("overlay--show", "overlay--show-lv5");
54+
searchElement.focus();
55+
search.scrollIntoView({ behavior: "smooth", block: "start" });
56+
}
57+
58+
searchButtons.forEach((button) => {
59+
if (isHome) {
60+
button.addEventListener("click", showSearchOnStartPage);
61+
} else {
62+
button.addEventListener("click", showSearchOnContentPage);
63+
}
64+
});
65+
66+
// Open search on Ctrl + K or Cmd + K
67+
document.addEventListener("keydown", (e) => {
68+
if ((e.ctrlKey || e.metaKey) && e.key === "k") {
69+
e.preventDefault();
70+
if (isHome) {
71+
showSearchOnStartPage();
72+
} else {
73+
showSearchOnContentPage();
74+
}
75+
}
76+
});
77+
78+
// Close search on ESC
79+
document.addEventListener("keydown", (e) => {
80+
if (e.key === "Escape") {
81+
closeSearch();
82+
}
83+
});
84+
85+
overlay.addEventListener("click", closeSearch);
86+
};
87+
88+
if (document.readyState === "interactive") {
89+
initSearch();
90+
} else {
91+
window.addEventListener("DOMContentLoaded", () => {
92+
initSearch();
93+
});
94+
}

‎assets/sass/_variables.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ $color-onLight: #000000;
1616
$color-table-border: #5b5b5b;
1717

1818
html {
19-
--pagefind-ui-scale: 1;
19+
--pagefind-ui-scale: 1 !important;
2020
--pagefind-ui-text: #000;
2121
--link-default: #{$link-default};
2222
--link-hovered: #{$link-hovered};

‎assets/sass/contentNavigation.scss‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,6 @@
108108
bottom: 0;
109109
left: 0;
110110
width: 100%;
111-
max-height: 100vh;
112111
gap: 0;
113112
overflow: hidden;
114113
flex-flow: column;
@@ -191,15 +190,3 @@
191190
display: none;
192191
}
193192
}
194-
195-
.overlay--show {
196-
backdrop-filter: blur(4px);
197-
background-color: rgba(0, 0, 0, 0.6);
198-
position: fixed;
199-
inset: 0;
200-
z-index: 3;
201-
}
202-
203-
body:has(.overlay--show) {
204-
overflow: hidden;
205-
}

‎assets/sass/navigation.scss‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
top: 0;
55
box-shadow: 0 0.4rem 1rem 0 rgba(0, 0, 0, 0.1);
66
background-color: var(--bg-default);
7-
z-index: 5;
7+
z-index: 7;
88
height: 6rem;
99
padding-left: calc((100vw - 100%) / 2);
1010
border-bottom: var(--border);
@@ -286,7 +286,7 @@ body:has(.o-header__nav--open) {
286286
overflow: hidden;
287287
}
288288

289-
.a-theme-toggle {
289+
.o-header__button {
290290
padding: 1rem;
291291
border: none;
292292
background: transparent;
@@ -298,21 +298,21 @@ body:has(.o-header__nav--open) {
298298
&:hover {
299299
color: var(--link-hovered);
300300
}
301+
}
301302

302-
&--desktop {
303-
display: none;
303+
.o-header__item--desktop {
304+
display: none;
304305

305-
@media (min-width: #{$breakpoint-md}) {
306-
display: inline-flex;
307-
}
306+
@media (min-width: #{$breakpoint-md}) {
307+
display: inline-flex;
308308
}
309+
}
309310

310-
&--mobile {
311-
display: inline-flex;
311+
.o-header__item--mobile {
312+
display: inline-flex;
312313

313-
@media (min-width: #{$breakpoint-md}) {
314-
display: none;
315-
}
314+
@media (min-width: #{$breakpoint-md}) {
315+
display: none;
316316
}
317317
}
318318

‎assets/sass/search.scss‎

Lines changed: 76 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,97 @@
11
#search {
22
width: 100%;
3-
height: 6rem;
43
display: flex;
5-
z-index: 2;
4+
z-index: 6;
5+
6+
@media print {
7+
display: none;
8+
}
69

710
.pagefind-ui__search-input,
8-
.pagefind-ui__message,
9-
.pagefind-ui__search-clear {
11+
.pagefind-ui__message {
1012
font-family: "Roboto", Arial, Helvetica, sans-serif;
13+
font-weight: 400;
1114
}
1215

13-
.pagefind-ui__search-input {
14-
z-index: 3;
16+
.pagefind-ui__message {
17+
padding: 1rem;
18+
}
19+
20+
.pagefind-ui__results-area {
21+
margin-top: 0;
22+
}
23+
24+
.pagefind-ui__results li:last-child {
25+
border-bottom: none;
26+
}
27+
28+
input.pagefind-ui__search-input {
29+
z-index: 6;
1530
outline: 0.2rem solid transparent;
1631
border: var(--border);
1732
box-shadow: var(--box-shadow);
33+
border-radius: var(--border-radius-l);
1834

1935
@include focus-indicator(0.2rem);
2036

2137
&::placeholder {
2238
opacity: 0.7;
2339
color: var(--color-body);
2440
}
41+
42+
// This selector is used to identify if search results are visible
43+
&:has(
44+
+ .pagefind-ui__search-clear
45+
+ .pagefind-ui__drawer
46+
.pagefind-ui__results-area
47+
) {
48+
border-radius: var(--border-radius-l) var(--border-radius-l) 0 0;
49+
}
2550
}
2651

27-
.pagefind-ui__search-clear {
28-
z-index: 3;
29-
height: auto;
30-
padding: 1rem;
31-
top: 1rem;
32-
margin-right: 0.7rem;
52+
button.pagefind-ui__search-clear {
53+
display: none;
3354
}
3455

3556
.pagefind-ui__suppressed {
3657
display: none;
3758
}
3859

3960
.pagefind-ui__form::before {
40-
z-index: 4;
61+
z-index: 7;
4162
}
4263

4364
.pagefind-ui__drawer {
4465
background-color: var(--bg-default);
45-
padding: 0 1rem 1rem 1rem;
66+
padding: 0 1rem;
4667
overscroll-behavior: contain;
47-
height: 35rem;
48-
top: 0.4rem;
4968
overflow-y: scroll;
50-
position: relative;
51-
border-radius: var(--pagefind-ui-border-radius);
52-
z-index: 3;
69+
position: absolute;
70+
top: 7rem;
71+
width: 100%;
72+
z-index: 6;
73+
max-height: 50vh;
74+
border: var(--border);
75+
border-radius: 0 0 var(--border-radius-l) var(--border-radius-l);
76+
}
77+
78+
.pagefind-ui__result {
79+
padding: 2rem 0;
80+
margin: 0 1rem;
81+
border-top: 0.2rem solid grey;
82+
}
83+
84+
.pagefind-ui__result-inner,
85+
.pagefind-ui__result-thumb {
86+
margin-top: 0;
87+
}
88+
89+
.pagefind-ui__result-thumb {
90+
width: 10rem;
91+
92+
@media (max-width: #{$breakpoint-md}) {
93+
display: none;
94+
}
5395
}
5496

5597
.pagefind-ui__result-link {
@@ -81,11 +123,13 @@
81123
color: var(--color-body);
82124
}
83125

84-
.pagefind-ui__button {
126+
button.pagefind-ui__button {
85127
border: 0.2rem solid var(--link-default);
86128
border-radius: var(--border-radius-m);
87129
background: transparent;
88130
color: var(--body-color);
131+
margin-top: 0;
132+
margin-bottom: 1rem;
89133

90134
&:hover,
91135
&:focus {
@@ -94,18 +138,19 @@
94138
}
95139
}
96140

97-
.curtain {
98-
background-color: rgba(0, 0, 0, 0.8);
99-
z-index: 2;
100-
transition: opacity 0.3s ease;
101-
opacity: 0;
102-
}
141+
.o-search {
142+
&--contentpage {
143+
position: absolute;
144+
display: none;
145+
opacity: 0;
146+
visibility: hidden;
147+
transition: opacity 0.5s ease;
148+
}
103149

104-
main:has(#search:focus-within),
105-
main:has(.pagefind-ui__drawer:not(.pagefind-ui__hidden)) {
106-
.curtain {
150+
&--show {
151+
display: block;
107152
opacity: 1;
108-
position: fixed;
109-
inset: 0;
153+
visibility: visible;
154+
z-index: 6;
110155
}
111156
}

‎assets/sass/styles.scss‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@ main {
119119
width: 100%;
120120
margin-left: auto;
121121
margin-right: auto;
122+
position: relative;
122123
}
123124

124125
.o-card {
@@ -382,3 +383,23 @@ details > summary {
382383
content: " (" attr(href) ") ";
383384
}
384385
}
386+
387+
.overlay--show {
388+
backdrop-filter: blur(4px);
389+
background-color: rgba(0, 0, 0, 0.6);
390+
position: fixed;
391+
inset: 0;
392+
z-index: 3;
393+
394+
@media print {
395+
display: none;
396+
}
397+
}
398+
399+
.overlay--show-lv5 {
400+
z-index: 5;
401+
}
402+
403+
body:has(.overlay--show) {
404+
overflow: hidden;
405+
}

0 commit comments

Comments
 (0)