Skip to content

Commit cb7341a

Browse files
moonmeistermoonmeister
committed
style: work on styling and layout across screen sizes and stabalize box from jumping around
1 parent f7eebcc commit cb7341a

File tree

3 files changed

+56
-58
lines changed

3 files changed

+56
-58
lines changed

‎src/components/search/search-box.jsx‎

Lines changed: 52 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -91,70 +91,68 @@ export default function SearchBar() {
9191
return (
9292
<dialog
9393
ref={dialog}
94-
className="m-auto bg-transparent p-0 backdrop:backdrop-blur-sm"
94+
className="mx-auto mt-[10vh] bg-transparent p-0 backdrop:backdrop-blur-sm md:mt-[20vh]"
9595
// eslint-disable-next-line react/no-unknown-property
9696
closedby="any"
9797
onClose={handleClose}
9898
>
99-
<section className="relative w-full max-w-3xl rounded-lg bg-gray-800 p-6 shadow-lg md:w-[70vw]">
100-
<div
101-
aria-haspopup="listbox"
102-
aria-controls="search-results"
103-
className="h rounded-lg bg-gray-800 p-6 shadow-lg"
104-
>
105-
<div className="relative">
106-
<input
107-
value={inputValue}
108-
onChange={handleInputChange}
109-
autoFocus
110-
type="text"
111-
placeholder="What are you searching for?"
112-
aria-label="Search input"
113-
className="w-full rounded-sm border border-gray-700 bg-gray-700 p-2 pr-10 text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:outline-hidden"
114-
/>
115-
<button
116-
type="button"
117-
className="absolute top-1/2 right-2 -translate-y-1/2 transform text-xs text-gray-400 hover:text-white"
118-
onClick={() => {
119-
dialog.current?.close();
120-
}}
121-
aria-label="Close search"
122-
>
123-
<XCircleIcon className="h-5 w-5" />
124-
</button>
125-
</div>
99+
<section className="relative w-[85dvi] max-w-3xl rounded-lg bg-gray-800 p-4 md:w-[70vw] md:p-6">
100+
<div className="relative">
101+
<input
102+
aria-haspopup="listbox"
103+
aria-controls="search-results"
104+
value={inputValue}
105+
onChange={handleInputChange}
106+
autoFocus
107+
type="text"
108+
placeholder="What are you searching for?"
109+
aria-label="Search input"
110+
className="w-full rounded-sm border border-gray-700 bg-gray-700 p-2 pr-10 text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:outline-hidden"
111+
/>
112+
<button
113+
type="button"
114+
className="absolute top-1/2 right-2 -translate-y-1/2 transform text-xs text-gray-400 hover:text-white"
115+
onClick={() => {
116+
dialog.current?.close();
117+
}}
118+
aria-label="Close search"
119+
>
120+
<XCircleIcon className="h-5 w-5" />
121+
</button>
122+
</div>
123+
{inputValue.length > 0 && (
126124
<div
127125
id="search-results"
128126
aria-live="polite"
129127
aria-label="Search results"
128+
className="mt-6 transition duration-300 ease-in-out"
130129
>
131-
{inputValue.length > 0 &&
132-
(isLoading ? (
133-
<div className="flex items-center justify-center p-4">
134-
<ArrowPathIcon className="h-5 w-5 animate-spin text-gray-400" />
135-
<span className="sr-only">Searching</span>
136-
</div>
137-
) : (
138-
<SearchResults
139-
items={items}
140-
onSelectItem={(item) => {
141-
dialog.current?.close();
142-
sendSelectItemEvent({
143-
list: {
144-
id: "search_results",
145-
name: "Search Results",
146-
},
147-
item: {
148-
item_id: item.path,
149-
item_name: item.title,
150-
item_category: item.type,
151-
},
152-
});
153-
}}
154-
/>
155-
))}
130+
{isLoading ? (
131+
<div className="flex items-center justify-center">
132+
<ArrowPathIcon className="h-5 w-5 animate-spin text-gray-400" />
133+
<span className="sr-only">Searching</span>
134+
</div>
135+
) : (
136+
<SearchResults
137+
items={items}
138+
onSelectItem={(item) => {
139+
dialog.current?.close();
140+
sendSelectItemEvent({
141+
list: {
142+
id: "search_results",
143+
name: "Search Results",
144+
},
145+
item: {
146+
item_id: item.path,
147+
item_name: item.title,
148+
item_category: item.type,
149+
},
150+
});
151+
}}
152+
/>
153+
)}
156154
</div>
157-
</div>
155+
)}
158156
</section>
159157
</dialog>
160158
);

‎src/components/search/search-results-list.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Link from "@/components/link";
22

33
export default function SearchResults({ items, onSelectItem }) {
44
return (
5-
<ul className="max-h-96 overflow-y-auto">
5+
<ul className="custom-scrollbar max-h-[75dvh] overflow-y-auto md:max-h-96">
66
{items.map((item) => {
77
if (!item?.id || !item?.title || !item?.path) {
88
console.warn("Invalid item in search results:", item);
@@ -12,14 +12,14 @@ export default function SearchResults({ items, onSelectItem }) {
1212
return (
1313
<li
1414
key={item.id}
15-
className="border-b border-gray-700 px-4 py-2 hover:bg-gray-800"
15+
className="border-b border-gray-700 py-6 pr-4 first:pt-4 hover:bg-gray-800"
1616
>
1717
<Link
1818
href={item.path}
1919
onClick={() => {
2020
onSelectItem(item);
2121
}}
22-
className="flex w-full cursor-pointer items-center justify-between px-4 py-4"
22+
className="flex w-full cursor-pointer items-center justify-between"
2323
>
2424
<span className="text-left">{item.title}</span>
2525
<span className="text-right text-sm text-gray-400">

‎src/components/search/search-results.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default function SearchResults({ items, onSelectItem }) {
66
{items.length > 0 ? (
77
<SearchResultsList items={items} onSelectItem={onSelectItem} />
88
) : (
9-
<p className="p-4 text-white">No results found.</p>
9+
<p className="text-white">No results found.</p>
1010
)}
1111
</>
1212
);

0 commit comments

Comments
 (0)