administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-11 17:47:37 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix iOS mobile card

Browse Source
This commit is contained in:
Nicolas Mowen 2025-11-05 06:58:30 -07:00
parent f9b0cc920b
commit 8bc3f2727c
1 changed files with 8 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,7 @@ import {
} from "@/types/classification"; } from "@/types/classification";
import { Event } from "@/types/event"; import { Event } from "@/types/event";
import { forwardRef, useMemo, useRef, useState } from "react"; import { forwardRef, useMemo, useRef, useState } from "react";
import { isDesktop, isMobile } from "react-device-detect"; import { isDesktop, isMobile, isMobileOnly } from "react-device-detect";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import TimeAgo from "../dynamic/TimeAgo"; import TimeAgo from "../dynamic/TimeAgo";
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"; import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
@ -264,8 +264,8 @@ export function GroupedClassificationCard({
const Overlay = isDesktop ? Dialog : MobilePage; const Overlay = isDesktop ? Dialog : MobilePage;
const Trigger = isDesktop ? DialogTrigger : MobilePageTrigger; const Trigger = isDesktop ? DialogTrigger : MobilePageTrigger;
const Header = isDesktop ? DialogHeader : MobilePageHeader;
const Content = isDesktop ? DialogContent : MobilePageContent; const Content = isDesktop ? DialogContent : MobilePageContent;
const Header = isDesktop ? DialogHeader : MobilePageHeader;
const ContentTitle = isDesktop ? DialogTitle : MobilePageTitle; const ContentTitle = isDesktop ? DialogTitle : MobilePageTitle;
const ContentDescription = isDesktop const ContentDescription = isDesktop
? DialogDescription ? DialogDescription
@ -298,26 +298,21 @@ export function GroupedClassificationCard({
<Trigger asChild></Trigger> <Trigger asChild></Trigger>
<Content <Content
className={cn( className={cn(
"", "scrollbar-container",
isDesktop && "min-w-[50%] max-w-[65%]", isDesktop && "min-w-[50%] max-w-[65%]",
isMobile && "flex flex-col", isMobile && "overflow-y-auto",
)} )}
onOpenAutoFocus={(e) => e.preventDefault()} onOpenAutoFocus={(e) => e.preventDefault()}
> >
<> <>
<Header <Header
className={cn( className={cn(
"flex flex-row items-center gap-4 px-2", "mx-2 flex flex-row items-center gap-4",
isMobile && "flex-shrink-0", isMobileOnly && "top-0 mx-4",
)} )}
> >
<div> <div>
<ContentTitle <ContentTitle className="flex items-center gap-2 font-normal capitalize">
className={cn(
"flex items-center gap-2 font-normal capitalize",
isMobile && "px-2",
)}
>
{event?.sub_label && event.sub_label !== "none" {event?.sub_label && event.sub_label !== "none"
? event.sub_label ? event.sub_label
: t(noClassificationLabel)} : t(noClassificationLabel)}
@ -390,7 +385,7 @@ export function GroupedClassificationCard({
className={cn( className={cn(
"grid w-full auto-rows-min grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-6 2xl:grid-cols-8", "grid w-full auto-rows-min grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-6 2xl:grid-cols-8",
isDesktop && "p-2", isDesktop && "p-2",
isMobile && "scrollbar-container flex-1 overflow-y-auto p-2", isMobile && "px-4 pb-4",
)} )}
> >
{group.map((data: ClassificationItemData) => ( {group.map((data: ClassificationItemData) => (