administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-12-17 02:26:43 +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

38
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,6 +318,8 @@ export function GroupedClassificationCard({
)} )}
</div> </div>
)} )}
<Header className={cn("mx-2", isMobile && "flex-shrink-0")}>
<div>
<ContentTitle <ContentTitle
className={cn( className={cn(
"flex items-center gap-1 font-normal capitalize", "flex items-center gap-1 font-normal capitalize",
@ -341,11 +347,13 @@ export function GroupedClassificationCard({
/> />
)} )}
</ContentDescription> </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);