Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-01-23 02:15:01 +00:00
Code Issues Projects Releases Wiki Activity

Move search input

Browse source
This commit is contained in:
Jordan Eldredge 2025-12-29 17:38:14 -08:00
parent 1fb930cd63
commit f74d7a6cdf
2 changed files with 54 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

18
packages/skin-database/app/(modern)/scroll/BottomMenuBar.tsx
View file

@ -2,7 +2,6 @@
import {
Smartphone,
Search,
Info,
Grid3x3,
Menu,
@ -80,14 +79,6 @@ export default function BottomMenuBar() {
setIsHamburgerOpen(false);
}}
/>
<HamburgerMenuItem
href="/upload"
icon={<Upload size={20} />}
label="Upload"
onClick={() => {
setIsHamburgerOpen(false);
}}
/>{" "}
<HamburgerMenuItem
href="/scroll/feedback"
icon={<MessageSquare size={20} />}
@ -147,12 +138,11 @@ export default function BottomMenuBar() {
label="Feed"
isActive={pathname.startsWith("/scroll/skin")}
/>
<MenuButton
href="/"
icon={<Search size={24} />}
label="Search"
isActive={false}
href="/upload"
icon={<Upload size={24} />}
label="Upload"
isActive={pathname === "/upload"}
/>
<MenuButton
icon={<Menu size={24} />}

50
packages/skin-database/app/(modern)/scroll/Grid.tsx
View file

@ -14,6 +14,7 @@ import { useWindowSize } from "../../../legacy-client/src/hooks";
import {
SCREENSHOT_WIDTH,
SKIN_RATIO,
MOBILE_MAX_WIDTH,
} from "../../../legacy-client/src/constants";
import { getMuseumPageSkins, GridSkin } from "./getMuseumPageSkins";
@ -166,6 +167,55 @@ export default function SkinTable({
return (
<div id="infinite-skins">
{/* Floating Search Bar */}
<div
style={{
position: "fixed",
bottom: "5rem",
left: "50%",
transform: "translateX(-50%)",
width: "calc(100% - 2rem)",
maxWidth: MOBILE_MAX_WIDTH,
padding: "0 1rem",
zIndex: 998,
}}
>
<form
action="/"
method="GET"
style={{
width: "100%",
}}
>
<input
type="search"
name="q"
placeholder="Search skins..."
style={{
width: "100%",
padding: "0.75rem 1rem",
fontSize: "1rem",
backgroundColor: "rgba(26, 26, 26, 0.85)",
backdropFilter: "blur(10px)",
border: "1px solid rgba(255, 255, 255, 0.2)",
borderRadius: "9999px",
color: "#fff",
outline: "none",
fontFamily: "inherit",
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
}}
onFocus={(e) => {
e.currentTarget.style.backgroundColor = "rgba(26, 26, 26, 0.95)";
e.currentTarget.style.borderColor = "rgba(255, 255, 255, 0.3)";
}}
onBlur={(e) => {
e.currentTarget.style.backgroundColor = "rgba(26, 26, 26, 0.85)";
e.currentTarget.style.borderColor = "rgba(255, 255, 255, 0.2)";
}}
/>
</form>
</div>
<Grid
ref={gridRef}
itemKey={itemKey}