mirrors/smov
mirrors/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-20 14:37:43 +01:00
Code Issues Wiki Activity

mobile close button for popouts

Browse source
This commit is contained in:
mrjvs 2023-10-20 16:59:07 +02:00
parent 5d6c672136
commit 8b3bd97dd4
2 changed files with 21 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/overlays/OverlayRouter.tsx
View file

@ -72,7 +72,11 @@ function RouterBase(props: { id: string; children: ReactNode }) {
}, [routeMeta?.height, routeMeta?.width, isMobile, api]);
return (
<a.div ref={ref} style={dimensions} className="overflow-hidden">
<a.div
ref={ref}
style={dimensions}
className="overflow-hidden relative z-10"
>
<Flare.Base className="group w-full bg-video-context-border h-full rounded-2xl transition-colors duration-100 text-video-context-type-main">
<Flare.Light
flareSize={400}

17
src/components/overlays/positions/OverlayMobilePosition.tsx
View file

@ -1,20 +1,35 @@
import classNames from "classnames";
import { ReactNode } from "react";
import { useInternalOverlayRouter } from "@/hooks/useOverlayRouter";
interface MobilePositionProps {
children?: ReactNode;
className?: string;
}
export function OverlayMobilePosition(props: MobilePositionProps) {
const router = useInternalOverlayRouter("hello world :)");
return (
<div
className={classNames([
"pointer-events-auto z-10 bottom-0 block origin-top-left inset-x-0 absolute overflow-hidden",
"pointer-events-auto px-4 pb-6 z-10 bottom-0 block origin-top-left inset-x-0 absolute overflow-hidden",
props.className,
])}
>
{props.children}
{/* Close button */}
<button
className="w-full text-video-context-type-main bg-video-context-background z-10 relative hover:bg-video-context-border active:scale-95 rounded-2xl pointer-events-auto transition-all duration-100 flex justify-center items-center py-3 mt-3 font-bold border border-video-context-border hover:text-white"
type="button"
onClick={() => router.close()}
>
Close
</button>
{/* Gradient to hide the progress */}
<div className="pointer-events-none absolute z-0 bottom-0 left-0 w-full h-32 bg-gradient-to-t from-black to-transparent" />
</div>
);
}