Skip to content

Commit 9c1a30a

Browse files
nikoshellnikoshell
committed
Search for mobile and mobile menu styles.
1 parent be01dc3 commit 9c1a30a

File tree

8 files changed

+314
-141
lines changed

8 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: 85 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
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 Icon from "@ui/Icon.astro";
65
76
export interface Props {
87
mobile?: boolean;
@@ -11,148 +10,103 @@ export interface Props {
1110
const { mobile = false }: Props = Astro.props;
1211
1312
const IS_LIVE = false;
13+
14+
15+
//<Button id="searchButton" icon="search" iconSize="fa-xl" clear title="Search (Crtl+K)"></Button>
1416
---
1517

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-
/>
18+
<div class="flex items-center justify-end gap-2 h-[85px] w-1/3">
19+
<div class="ml-auto justify-end flex items-center w-full">
2720
{
28-
!mobile ? (
21+
!mobile ?
2922
<>
30-
<Button url="/tickets" icon="ticket">Register Now!</Button>
31-
{IS_LIVE && <Button url="/live">Live</Button>}
23+
24+
<button
25+
id="searchButton"
26+
class="mx-6 md:mx-2"
27+
data-open-modal
28+
aria-label="Search"
29+
aria-keyshortcuts="Control+K"
30+
>
31+
<Icon name="search" />
32+
<span class="hidden md:block" aria-hidden="true">Search</span>
33+
<kbd class="hidden md:flex" >
34+
<kbd>Ctrl</kbd><kbd>K</kbd>
35+
</kbd>
36+
</button>
37+
<Button url="/tickets" icon="ticket" class="w-full max-w-48 max-xl:hidden">Register Now!</Button>
38+
{IS_LIVE && <Button url="/live">Live</Button>}
3239
</>
33-
) : null
40+
: null
3441
}
3542

43+
3644
<label for="nav_toggle" class="flex xl:hidden">
37-
<HeaderButton variant="menu">
38-
{mobile ? "Close Menu" : "Menu"}
39-
</HeaderButton>
45+
<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">
46+
{mobile ? <Icon name="close" size="fa-xl" /> : <Icon name="bars" size="fa-xl" />}
47+
</span>
4048
</label>
4149
</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;
4750

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

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-
}
64+
@media (min-width: 45rem) {
65+
button[data-open-modal] {
66+
border: 1px solid #ccc;
67+
border-radius: 0.5rem;
68+
padding-inline-start: 0.75rem;
69+
padding-inline-end: 0.5rem;
70+
background-color: #fff;
71+
font-size: 16px;
72+
width:100%;
73+
min-width: 10rem;
74+
max-width: 22rem;
75+
color: #5f3d1b;
76+
}
77+
button[data-open-modal]:hover {
78+
border-color: #5f3d1b;
79+
color: #000;
80+
}
6181

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

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-
});
87+
button > kbd {
88+
border-radius: 0.25rem;
89+
font-size: 16px;
90+
gap: 0.25em;
91+
padding-inline: 0.375rem;
92+
background-color: #F1E1D4;
93+
color: #5f3d1b;
94+
}
8195

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-
}
96+
kbd {
97+
font-family: var(--__sl-font);
98+
}
99+
100+
button[data-close-modal] {
101+
position: absolute;
102+
z-index: 1;
103+
align-items: center;
104+
align-self: flex-end;
105+
height: calc(64px * var(--pagefind-ui-scale));
106+
padding: 0.25rem;
107+
border: 0;
108+
background: transparent;
109+
cursor: pointer;
110+
color: #333;
111+
}
158112
</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)