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

Clean up mobile

Browse Source
This commit is contained in:
Nicolas Mowen 2025-10-21 15:55:37 -06:00
parent d9216d39e6
commit 6d662151de
2 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -272,7 +272,15 @@ export function GroupedClassificationCard({
}}
>
<Trigger asChild></Trigger>
<Content className={cn("", isDesktop && "w-auto max-w-[85%]")}>
<Content
className={cn(
"",
isDesktop && "w-auto max-w-[85%]",
!isDesktop &&
"max-h-[75dvh] overflow-hidden rounded-t-2xl px-4 pb-4",
)}
onOpenAutoFocus={(e) => e.preventDefault()}
>
<>
{isDesktop && (
<div className="absolute right-10 top-4 flex flex-row justify-between">
@ -300,7 +308,12 @@ export function GroupedClassificationCard({
)}
</div>
)}
<ContentTitle className="flex items-center gap-1 font-normal capitalize">
<ContentTitle
className={cn(
"flex items-center gap-1 font-normal capitalize",
isMobile && "px-2",
)}
>
{event?.sub_label ? event.sub_label : t("details.unknown")}
{event?.sub_label && (
<div
@ -313,7 +326,7 @@ export function GroupedClassificationCard({
>{`${Math.round((event.data.sub_label_score || 0) * 100)}%`}</div>
)}
</ContentTitle>
<ContentDescription>
<ContentDescription className={cn("", isMobile && "px-2")}>
{time && (
<TimeAgo
className="text-sm text-secondary-foreground"
@ -324,8 +337,9 @@ export function GroupedClassificationCard({
</ContentDescription>
<div
className={cn(
"flex cursor-pointer flex-col gap-2 rounded-lg p-2",
isMobile && "w-full",
"flex cursor-pointer flex-col gap-2 rounded-lg",
isDesktop && "p-2",
isMobile && "scrollbar-container w-full overflow-y-auto",
)}
>
<div

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

@ -51,7 +51,7 @@ import {
useRef,
useState,
} from "react";
import { isDesktop } from "react-device-detect";
import { isDesktop, isMobileOnly } from "react-device-detect";
import { Trans, useTranslation } from "react-i18next";
import {
LuFolderCheck,
@ -694,7 +694,10 @@ function TrainingGrid({
return (
<div
ref={contentRef}
className="scrollbar-container flex flex-wrap gap-2 overflow-y-scroll p-1"
className={cn(
"scrollbar-container gap-2 overflow-y-scroll p-1",
isMobileOnly ? "grid grid-cols-2" : "flex flex-wrap",
)}
>
{Object.entries(faceGroups).map(([key, group]) => {
const event = events?.find((ev) => ev.id == key);