Skip to content

Commit 0e92b28

Browse files
nikoshellnikoshell
committed
Search for mobile and mobile menu styles.
1 parent be01dc3 commit 0e92b28

File tree

7 files changed

+314
-141
lines changed

7 files changed

+314
-141
lines changed

‎src/components/BaseHead.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,5 +61,5 @@ const { title, description, image = "/social-card.png" } = Astro.props;
6161

6262
<script
6363
is:inline
64-
src="https://kit.fontawesome.com/14a4971ab3.js"
64+
src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/js/all.min.js"
6565
crossorigin="anonymous"></script>

‎src/components/header/header-actions.astro‎

Lines changed: 87 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
import ButtonLink from "../button-link/button-link.astro";
32
import Button from "@ui/Button.astro";
43
import HeaderButton from "./header-button.astro";
5-
import Search from "astro-pagefind/components/Search";
4+
import Search from "../search/Search.astro";
5+
import Icon from "@ui/Icon.astro";
66
77
export interface Props {
88
mobile?: boolean;
@@ -11,148 +11,104 @@ export interface Props {
1111
const { mobile = false }: Props = Astro.props;
1212
1313
const IS_LIVE = false;
14+
15+
16+
//<Button id="searchButton" icon="search" iconSize="fa-xl" clear title="Search (Crtl+K)"></Button>
1417
---
1518

16-
<div class="flex items-center justify-end gap-2 w-1/3">
17-
<Search
18-
id="search"
19-
className="pagefind-ui"
20-
uiOptions={{
21-
showImages: false,
22-
translations: {
23-
zero_results: "Couldn't find [SEARCH_TERM]",
24-
},
25-
}}
26-
/>
19+
<div class="flex items-center justify-end gap-2 h-[85px] w-1/3">
20+
<Search />
21+
<div class="ml-auto justify-end flex items-center w-full">
2722
{
28-
!mobile ? (
23+
!mobile ?
2924
<>
30-
<Button url="/tickets" icon="ticket">Register Now!</Button>
31-
{IS_LIVE && <Button url="/live">Live</Button>}
25+
26+
<button
27+
id="searchButton"
28+
class="mx-6 md:mx-2"
29+
data-open-modal
30+
aria-label="Search"
31+
aria-keyshortcuts="Control+K"
32+
>
33+
<Icon name="search" />
34+
<span class="hidden md:block" aria-hidden="true">Search</span>
35+
<kbd class="hidden md:flex" >
36+
<kbd>Ctrl</kbd><kbd>K</kbd>
37+
</kbd>
38+
</button>
39+
<Button url="/tickets" icon="ticket" class="w-full max-w-48 max-xl:hidden">Register Now!</Button>
40+
{IS_LIVE && <Button url="/live">Live</Button>}
3241
</>
33-
) : null
42+
: null
3443
}
3544

45+
3646
<label for="nav_toggle" class="flex xl:hidden">
37-
<HeaderButton variant="menu">
38-
{mobile ? "Close Menu" : "Menu"}
39-
</HeaderButton>
47+
<span class="w-[3em] h-[3em] font-bold text-lg px-4 py-4 rounded-lg inline-flex items-center justify-center leading-4 transition-colors duration-200 not-prose border hover:text-black bg-primary text-white hover:bg-primary-hover border-transparent">
48+
{mobile ? <Icon name="close" size="fa-xl" /> : <Icon name="bars" size="fa-xl" />}
49+
</span>
4050
</label>
4151
</div>
42-
<script>
43-
document.addEventListener("DOMContentLoaded", function () {
44-
const searchContainer = document.querySelector(".pagefind-ui");
45-
const searchInput = searchContainer?.querySelector("input");
46-
let selectedIndex = -1;
4752

48-
function updateSelection() {
49-
const results = searchContainer?.querySelectorAll(".pagefind-ui__result");
50-
if (!results) return;
53+
<style>
54+
button[data-open-modal] {
55+
display: flex;
56+
align-items: center;
57+
gap: 0.5rem;
58+
border: 0;
59+
background-color: transparent;
60+
color: grey;
61+
cursor: pointer;
62+
height: 2.5rem;
63+
font-size: 28px;
64+
}
5165

52-
results.forEach((result, index) => {
53-
if (index === selectedIndex) {
54-
result.classList.add("selected");
55-
result.scrollIntoView({ block: "nearest", behavior: "smooth" });
56-
} else {
57-
result.classList.remove("selected");
58-
}
59-
});
60-
}
66+
@media (min-width: 45rem) {
67+
button[data-open-modal] {
68+
border: 1px solid #ccc;
69+
border-radius: 0.5rem;
70+
padding-inline-start: 0.75rem;
71+
padding-inline-end: 0.5rem;
72+
background-color: #fff;
73+
font-size: 16px;
74+
width:100%;
75+
min-width: 10rem;
76+
max-width: 22rem;
77+
color: #5f3d1b;
78+
}
79+
button[data-open-modal]:hover {
80+
border-color: #5f3d1b;
81+
color: #000;
82+
}
6183

62-
document.addEventListener("keydown", function (event) {
63-
if (!searchContainer || !searchInput) return;
84+
button[data-open-modal] > :last-child {
85+
margin-inline-start: auto;
86+
}
87+
}
6488

65-
const results = searchContainer.querySelectorAll(".pagefind-ui__result");
66-
if (document.activeElement === searchInput) {
67-
if (event.key === "ArrowDown") {
68-
event.preventDefault();
69-
selectedIndex = (selectedIndex + 1) % results.length;
70-
updateSelection();
71-
} else if (event.key === "ArrowUp") {
72-
event.preventDefault();
73-
selectedIndex = (selectedIndex - 1 + results.length) % results.length;
74-
updateSelection();
75-
} else if (event.key === "Enter" && selectedIndex >= 0) {
76-
event.preventDefault();
77-
results[selectedIndex].querySelector("a")?.click();
78-
}
79-
}
80-
});
89+
button > kbd {
90+
border-radius: 0.25rem;
91+
font-size: 16px;
92+
gap: 0.25em;
93+
padding-inline: 0.375rem;
94+
background-color: #F1E1D4;
95+
color: #5f3d1b;
96+
}
8197

82-
// Reset selection when the search query changes
83-
searchInput?.addEventListener("input", function () {
84-
selectedIndex = -1;
85-
});
86-
});
87-
</script>
88-
<style is:global>
89-
.pagefind-ui__result.selected {
90-
background-color: #f5f5f5;
91-
background-image: linear-gradient(to right, #3684b6 7px, transparent 5px);
92-
-webkit-transform: translate3d(0, 0, 0);
93-
transform: translate3d(0, 0, 0);
94-
}
95-
.pagefind-ui__drawer {
96-
}
97-
.pagefind-ui__message {
98-
margin: 1em;
99-
}
100-
.pagefind-ui__result mark {
101-
background: #f9eb5d;
102-
background-image: linear-gradient(to right, #f9eb5d 10%, #fcf4a7 100%);
103-
margin: 4px;
104-
padding-right: 6px;
105-
padding-left: 6px;
106-
padding-top: 2px;
107-
padding-bottom: 2px;
108-
color: #000000;
109-
font-family: monospace;
110-
border-radius: 4px;
111-
}
112-
.pagefind-ui {
113-
--pagefind-ui-scale: 1;
114-
--pagefind-ui-primary: #141f36;
115-
--pagefind-ui-text: black;
116-
--pagefind-ui-border: #d8d8d8;
117-
--pagefind-ui-border-width: 2px;
118-
--pagefind-ui-border-radius: 0;
119-
width:50%;
120-
min-width: 10vw;
121-
}
122-
.pagefind-ui.yellow {
123-
--pagefind-ui-background: #efc302;
124-
}
125-
.pagefind-ui.red {
126-
--pagefind-ui-background: #ffb9bb;
127-
width: 50%;
128-
}
129-
.pagefind-ui .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
130-
position: absolute;
131-
left: auto;
132-
right: 0;
133-
margin-top: 0px;
134-
width: 50vw;
135-
z-index: 9999;
136-
overflow-y: auto;
137-
box-shadow:
138-
0 10px 10px -5px rgba(0, 0, 0, 0.2),
139-
0 2px 2px 0 rgba(0, 0, 0, 0.1);
140-
border-bottom-right-radius: var(--pagefind-ui-border-radius);
141-
border-bottom-left-radius: var(--pagefind-ui-border-radius);
142-
background-color: var(--pagefind-ui-background);
143-
}
144-
.pagefind-ui__result {
145-
padding: 0 2em 1em !important;
146-
}
147-
.pagefind-ui .pagefind-ui__result-link {
148-
color: var(--pagefind-ui-primary);
149-
}
150-
.pagefind-ui .pagefind-ui__result-excerpt {
151-
color: var(--pagefind-ui-text);
152-
}
153-
@media (max-width: 1280px) {
154-
.pagefind-ui {
155-
display: none;
156-
}
157-
}
98+
kbd {
99+
font-family: var(--__sl-font);
100+
}
101+
102+
button[data-close-modal] {
103+
position: absolute;
104+
z-index: 1;
105+
align-items: center;
106+
align-self: flex-end;
107+
height: calc(64px * var(--pagefind-ui-scale));
108+
padding: 0.25rem;
109+
border: 0;
110+
background: transparent;
111+
cursor: pointer;
112+
color: #333;
113+
}
158114
</style>

‎src/components/header/header.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const links = JSON.parse(await fs.readFile("./src/data/links.json", "utf-8"));
2727
<div
2828
class="fixed bg-body-background top-0 left-0 w-screen h-screen overflow-scroll hidden peer-checked:block xl:peer-checked:hidden z-50 p-6"
2929
>
30-
<div class="flex items-center">
30+
<div class="flex items-center justify-between">
3131
<HeaderLogo />
3232
<HeaderActions mobile />
3333
</div>

0 commit comments

Comments
 (0)