mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-06-26 06:11:54 +03:00
Some checks are pending
CI / Synaptics Build (push) Blocked by required conditions
CI / AMD64 Extra Build (push) Blocked by required conditions
CI / ARM Extra Build (push) Blocked by required conditions
CI / AMD64 Build (push) Waiting to run
CI / ARM Build (push) Waiting to run
CI / Jetson Jetpack 6 (push) Waiting to run
CI / Assemble and push default build (push) Blocked by required conditions
* increase camera group icon size on mobile add an animated slider when there is not enough space for all defined camera groups * change desktop and mobile edit camera groups icon to pencil and add desktop tooltip * apply safe area insets to mobile layout in PWA mode using viewport-fit=cover * adaptively size bottom bar nav targets to 48px when they fit, else compact icon size now targets the standardized 48×48px mobile touch target (Material Design 3 / Android 48dp bottom-nav minimum)
43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
type LiveIconProps = {
|
|
layout?: "list" | "grid";
|
|
};
|
|
|
|
export function LiveGridIcon({ layout }: LiveIconProps) {
|
|
return (
|
|
<div className="flex size-full flex-col gap-0.5 overflow-hidden rounded-md">
|
|
<div
|
|
className={`w-full flex-1 ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
|
|
/>
|
|
<div className="flex w-full flex-1 gap-0.5">
|
|
<div
|
|
className={`w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
|
|
/>
|
|
<div
|
|
className={`w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
|
|
/>
|
|
</div>
|
|
<div className="flex w-full flex-1 gap-0.5">
|
|
<div
|
|
className={`w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
|
|
/>
|
|
<div
|
|
className={`w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function LiveListIcon({ layout }: LiveIconProps) {
|
|
return (
|
|
<div className="flex size-full flex-col gap-0.5 overflow-hidden rounded-md">
|
|
<div
|
|
className={`size-full ${layout == "list" ? "bg-selected" : "bg-secondary-foreground"}`}
|
|
/>
|
|
<div
|
|
className={`size-full ${layout == "list" ? "bg-selected" : "bg-secondary-foreground"}`}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|