administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-12-16 18:16:44 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Improve mobile layout

Browse Source
This commit is contained in:
Nicolas Mowen 2025-10-21 17:19:00 -06:00
parent d1957535d0
commit 6c33dda19f
3 changed files with 51 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
web/src/components/card/ClassificationCard.tsx
View File

@ -20,16 +20,18 @@ import {
Dialog, Dialog,
DialogContent, DialogContent,
DialogDescription, DialogDescription,
DialogHeader,
DialogTitle, DialogTitle,
DialogTrigger, DialogTrigger,
} from "../ui/dialog"; } from "../ui/dialog";
import { import {
Drawer, MobilePage,
DrawerTrigger, MobilePageContent,
DrawerContent, MobilePageDescription,
DrawerTitle, MobilePageHeader,
DrawerDescription, MobilePageTitle,
} from "../ui/drawer"; MobilePageTrigger,
} from "../mobile/MobilePage";
type ClassificationCardProps = { type ClassificationCardProps = {
imgClassName?: string; imgClassName?: string;
@ -247,11 +249,14 @@ export function GroupedClassificationCard({
return null; return null;
} }
const Overlay = isDesktop ? Dialog : Drawer; const Overlay = isDesktop ? Dialog : MobilePage;
const Trigger = isDesktop ? DialogTrigger : DrawerTrigger; const Trigger = isDesktop ? DialogTrigger : MobilePageTrigger;
const Content = isDesktop ? DialogContent : DrawerContent; const Header = isDesktop ? DialogHeader : MobilePageHeader;
const ContentTitle = isDesktop ? DialogTitle : DrawerTitle; const Content = isDesktop ? DialogContent : MobilePageContent;
const ContentDescription = isDesktop ? DialogDescription : DrawerDescription; const ContentTitle = isDesktop ? DialogTitle : MobilePageTitle;
const ContentDescription = isDesktop
? DialogDescription
: MobilePageDescription;
return ( return (
<> <>
@ -282,8 +287,7 @@ export function GroupedClassificationCard({
className={cn( className={cn(
"", "",
isDesktop && "w-auto max-w-[85%]", isDesktop && "w-auto max-w-[85%]",
!isDesktop && isMobile && "flex flex-col",
"max-h-[75dvh] overflow-hidden rounded-t-2xl px-4 pb-4",
)} )}
onOpenAutoFocus={(e) => e.preventDefault()} onOpenAutoFocus={(e) => e.preventDefault()}
> >
@ -314,38 +318,42 @@ export function GroupedClassificationCard({
)} )}
</div> </div>
)} )}
<ContentTitle <Header className={cn("mx-2", isMobile && "flex-shrink-0")}>
className={cn( <div>
"flex items-center gap-1 font-normal capitalize", <ContentTitle
isMobile && "px-2",
)}
>
{event?.sub_label ? event.sub_label : t("details.unknown")}
{event?.sub_label && (
<div
className={cn( className={cn(
"", "flex items-center gap-1 font-normal capitalize",
bestScoreStatus == "match" && "text-success", isMobile && "px-2",
bestScoreStatus == "potential" && "text-orange-400",
bestScoreStatus == "unknown" && "text-danger",
)} )}
>{`${Math.round((event.data.sub_label_score || 0) * 100)}%`}</div> >
)} {event?.sub_label ? event.sub_label : t("details.unknown")}
</ContentTitle> {event?.sub_label && (
<ContentDescription className={cn("", isMobile && "px-2")}> <div
{time && ( className={cn(
<TimeAgo "",
className="text-sm text-secondary-foreground" bestScoreStatus == "match" && "text-success",
time={time} bestScoreStatus == "potential" && "text-orange-400",
dense bestScoreStatus == "unknown" && "text-danger",
/> )}
)} >{`${Math.round((event.data.sub_label_score || 0) * 100)}%`}</div>
</ContentDescription> )}
</ContentTitle>
<ContentDescription className={cn("", isMobile && "px-2")}>
{time && (
<TimeAgo
className="text-sm text-secondary-foreground"
time={time}
dense
/>
)}
</ContentDescription>
</div>
</Header>
<div <div
className={cn( className={cn(
"flex cursor-pointer flex-col gap-2 rounded-lg", "flex cursor-pointer flex-col gap-2 rounded-lg",
isDesktop && "p-2", isDesktop && "p-2",
isMobile && "scrollbar-container w-full overflow-y-auto", isMobile && "scrollbar-container w-full flex-1 overflow-y-auto",
)} )}
> >
<div <div
@ -353,7 +361,7 @@ export function GroupedClassificationCard({
"gap-2", "gap-2",
isDesktop isDesktop
? "flex flex-row flex-wrap" ? "flex flex-row flex-wrap"
: "grid grid-cols-2 sm:grid-cols-5 lg:grid-cols-6", : "grid grid-cols-2 justify-items-center gap-2 px-2 sm:grid-cols-5 lg:grid-cols-6",
)} )}
> >
{group.map((data: ClassificationItemData) => ( {group.map((data: ClassificationItemData) => (

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

@ -695,7 +695,7 @@ function TrainingGrid({
<div <div
ref={contentRef} ref={contentRef}
className={cn( className={cn(
"scrollbar-container gap-2 overflow-y-scroll p-1", "scrollbar-container gap-3 overflow-y-scroll p-1",
isMobileOnly ? "grid grid-cols-2" : "flex flex-wrap", isMobileOnly ? "grid grid-cols-2" : "flex flex-wrap",
)} )}
> >

4
web/src/views/classification/ModelTrainingView.tsx
View File

@ -791,7 +791,7 @@ function StateTrainGrid({
<div <div
ref={contentRef} ref={contentRef}
className={cn( className={cn(
"scrollbar-container flex flex-wrap gap-2 overflow-y-auto p-2", "scrollbar-container flex flex-wrap gap-3 overflow-y-auto p-2",
isMobile && "justify-center", isMobile && "justify-center",
)} )}
> >
@ -927,7 +927,7 @@ function ObjectTrainGrid({
<div <div
ref={contentRef} ref={contentRef}
className="scrollbar-container flex flex-wrap gap-2 overflow-y-scroll p-1" className="scrollbar-container flex flex-wrap gap-3 overflow-y-scroll p-1"
> >
{Object.entries(groups).map(([key, group]) => { {Object.entries(groups).map(([key, group]) => {
const event = events?.find((ev) => ev.id == key); const event = events?.find((ev) => ev.id == key);