ClipFusion-org/clipfusion
1
1
Fork 0
mirror of https://github.com/ClipFusion-org/clipfusion.git synced 2025-08-03 16:55:08 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixed search bars in settings

Browse Source
This commit is contained in:
corgifist 2025-07-28 15:22:22 +03:00
parent 153047fbf2
commit fb5cf87b43
3 changed files with 33 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/app/settings/page.tsx
View File

@ -18,23 +18,20 @@ import Link from "next/link";
export default function Settings(): ReactNode { export default function Settings(): ReactNode {
const isMobile = useIsMobile(); const isMobile = useIsMobile();
const SearchContainer = isMobile ? "div" : SidebarTriggerAdjustable;
const cardWidth = isMobile ? "w-full" : "w-2xl"; const cardWidth = isMobile ? "w-full" : "w-2xl";
return ( return (
<div className="p-5 w-full h-full"> <div className="p-5 w-full h-full">
<div className="flex flex-col gap-2"> <div className="flex flex-row items-center gap-2">
<div className="flex flex-row items-center gap-2"> <StaticSidebarTrigger />
<StaticSidebarTrigger /> <ScrollFadingTitle>
<ScrollFadingTitle> <h2 className="font-bold break-keep text-xl sm:text-2xl md:text-3xl lg:text-4xl leading-none">Settings</h2>
<h2 className="font-bold break-keep text-xl sm:text-2xl md:text-3xl lg:text-4xl leading-none">Settings</h2> </ScrollFadingTitle>
</ScrollFadingTitle> </div>
</div> <div className="flex flex-col sticky top-safe bg-background gap-2 mt-2 pb-2 pt-2 p-5 w-[100% + 5 * var(--spacing)] z-10 -mx-5">
<div className="flex flex-col sticky top-safe bg-background gap-2 mt-2 pb-2 pt-2 p-5 w-[100% + 5 * var(--spacing)] z-10 -mx-5"> <SidebarTriggerAdjustable className={cn("flex justify-center",)}>
<SearchContainer className={cn("flex justify-center",)}> <Search placeholder="Search Settings" className={cardWidth} />
<Search placeholder="Search Settings" className={cardWidth} /> </SidebarTriggerAdjustable>
</SearchContainer>
</div>
</div> </div>
<div className="flex flex-col justify-center items-center w-full gap-1 md:lg:gap-2 mt-2"> <div className="flex flex-col justify-center items-center w-full gap-1 md:lg:gap-2 mt-2">
<Link href="/settings/storage" className="w-full flex items-center justify-center"> <Link href="/settings/storage" className="w-full flex items-center justify-center">

35
src/app/settings/storage/page.tsx
View File

@ -33,28 +33,25 @@ export default function Storage() {
setStatus(localStorage.getItem("persistence-status")); setStatus(localStorage.getItem("persistence-status"));
}, []); }, []);
const SearchContainer = isMobile ? "div" : SidebarTriggerAdjustable;
const cardWidth = isMobile ? "w-full" : "w-2xl"; const cardWidth = isMobile ? "w-full" : "w-2xl";
return ( return (
<div className="p-5 w-full h-screen"> <div className="p-5 w-full">
<div className="flex flex-col gap-2"> <div className="flex flex-row items-center gap-2">
<div className="flex flex-row items-center gap-2"> <StaticSidebarTrigger>
<StaticSidebarTrigger> <Button className="fixed size-7 ml-10 z-40 transition-colors" variant="ghost" size="icon" onClick={() => router.back()}>
<Button className="fixed size-7 ml-10 z-40 transition-colors" variant="ghost" size="icon" onClick={() => router.back()}> <ArrowLeftIcon />
<ArrowLeftIcon/> </Button>
</Button> </StaticSidebarTrigger>
</StaticSidebarTrigger> <ScrollFadingTitle className="flex flex-row items-center">
<ScrollFadingTitle className="flex flex-row items-center"> <div className="ml-10" />
<div className="ml-10"/> <h2 className="font-bold break-keep text-xl sm:text-2xl md:text-3xl lg:text-4xl leading-none">Storage</h2>
<h2 className="font-bold break-keep text-xl sm:text-2xl md:text-3xl lg:text-4xl leading-none">Storage</h2> </ScrollFadingTitle>
</ScrollFadingTitle> </div>
</div> <div className="flex flex-col sticky top-safe bg-background gap-2 mt-2 pb-2 pt-2 p-5 w-[100% + 5 * var(--spacing)] z-10 -mx-5">
<div className="flex flex-col sticky top-safe bg-background gap-2 mt-2 pb-2 pt-2 p-5 w-[100% + 5 * var(--spacing)] z-10 -mx-5"> <SidebarTriggerAdjustable adjustWidth="20" className={cn("flex justify-center", cardWidth)}>
<SearchContainer className={cn("flex justify-center", cardWidth)}> <Search placeholder="Search Settings" className={cardWidth} />
<Search placeholder="Search Settings" className={cardWidth} /> </SidebarTriggerAdjustable>
</SearchContainer>
</div>
</div> </div>
<div className="flex flex-row justify-between items-center w-full max-w-96"> <div className="flex flex-row justify-between items-center w-full max-w-96">
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">

11
src/components/sidebar-trigger-adjustable/SidebarTriggerAdjustable.tsx
View File

@ -16,7 +16,10 @@ const cssLerp = (a: string, b: string, t: string) => (
); );
export const SidebarTriggerAdjustable = (props: ComponentProps<"div">) => { export const SidebarTriggerAdjustable = (props: ComponentProps<"div"> & {
adjustWidth?: number | `${number}`;
}) => {
const adjustWidth = props.adjustWidth ? +props.adjustWidth : 12;
const isMobile = useIsMobile(); const isMobile = useIsMobile();
useEffect(() => { useEffect(() => {
@ -31,9 +34,9 @@ export const SidebarTriggerAdjustable = (props: ComponentProps<"div">) => {
const slideAmount = easeSlide( const slideAmount = easeSlide(
Math.max(0, Math.min(1, window.scrollY / (window.innerHeight / 20))) Math.max(0, Math.min(1, window.scrollY / (window.innerHeight / 20)))
); );
triggerDiv.style.transform = `translateX(calc(var(--spacing) * ${12 * slideAmount}))`; triggerDiv.style.transform = `translateX(calc(var(--spacing) * ${adjustWidth * slideAmount}))`;
triggerDiv.style.paddingTop = `calc(var(--spacing) * ${(isMobile ? 1 : 3) * slideAmount})`; triggerDiv.style.paddingTop = `calc(var(--spacing) * ${(isMobile ? 1 : 3) * slideAmount})`;
triggerDiv.style.width = `calc(100% - var(--spacing) * ${lerp(0, 12, 1 - slideAmount)})`; triggerDiv.style.width = `calc(100% - var(--spacing) * ${lerp(0, adjustWidth, 1 - slideAmount)})`;
}; };
handleScroll(); handleScroll();
@ -44,5 +47,5 @@ export const SidebarTriggerAdjustable = (props: ComponentProps<"div">) => {
}; };
}, [isMobile]); }, [isMobile]);
return <div data-sidebar-trigger="true" {...props} className={props.className}></div>; return <div data-sidebar-trigger="true" className={props.className}>{props.children}</div>;
} }