administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-05-05 13:07:44 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Rework layout for mobile

Browse Source
This commit is contained in:
Nicolas Mowen 2025-03-28 09:26:11 -06:00
parent 44b8262811
commit fe700aa8e3
1 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web/src/pages/FaceLibrary.tsx
View File

@ -506,7 +506,10 @@ function TrainingGrid({
return ( return (
<div <div
key={key} key={key}
className="flex flex-col gap-2 rounded-lg bg-card p-2" className={cn(
"flex flex-col gap-2 rounded-lg bg-card p-2",
isMobile && "w-full",
)}
> >
<div className="flex flex-row justify-between"> <div className="flex flex-row justify-between">
<div className="capitalize"> <div className="capitalize">
@ -538,7 +541,12 @@ function TrainingGrid({
)} )}
</div> </div>
<div className="flex flex-row flex-wrap gap-2"> <div
className={cn(
"gap-2",
isDesktop ? "flex flex-row flex-wrap" : "grid grid-cols-2",
)}
>
{group.map((data: RecognizedFaceData) => ( {group.map((data: RecognizedFaceData) => (
<FaceAttempt <FaceAttempt
key={data.filename} key={data.filename}
@ -661,10 +669,10 @@ function FaceAttempt({
: "outline-transparent duration-500", : "outline-transparent duration-500",
)} )}
> >
<div className="relative w-full overflow-hidden rounded-lg border border-t-0 *:text-card-foreground"> <div className="relative w-full overflow-hidden rounded-lg *:text-card-foreground">
<img <img
ref={imgRef} ref={imgRef}
className="size-44" className={cn("size-44", isMobile && "w-full")}
src={`${baseUrl}clips/faces/train/${data.filename}`} src={`${baseUrl}clips/faces/train/${data.filename}`}
onClick={(e) => onClick(data, e.metaKey || e.ctrlKey)} onClick={(e) => onClick(data, e.metaKey || e.ctrlKey)}
/> />
@ -736,7 +744,9 @@ function FaceGrid({ faceImages, pageToggle, onDelete }: FaceGridProps) {
<div <div
className={cn( className={cn(
"scrollbar-container gap-2 overflow-y-scroll", "scrollbar-container gap-2 overflow-y-scroll",
isDesktop ? "flex flex-wrap" : "grid grid-cols-2", isDesktop
? "flex flex-wrap"
: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
)} )}
> >
{faceImages.map((image: string) => ( {faceImages.map((image: string) => (