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

Fix layout

Browse Source
This commit is contained in:
Nicolas Mowen 2025-10-21 20:49:33 -06:00
parent c66daf2946
commit 029fd544b8
3 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -98,7 +98,8 @@ export const ClassificationCard = forwardRef<
<div <div
ref={ref} ref={ref}
className={cn( className={cn(
"relative flex size-48 cursor-pointer flex-col overflow-hidden rounded-lg outline outline-[3px]", "relative flex cursor-pointer flex-col overflow-hidden rounded-lg outline outline-[3px]",
isMobile ? "!size-full" : "size-48",
selected selected
? "shadow-selected outline-selected" ? "shadow-selected outline-selected"
: "outline-transparent duration-500", : "outline-transparent duration-500",

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

@ -51,7 +51,7 @@ import {
useRef, useRef,
useState, useState,
} from "react"; } from "react";
import { isDesktop, isMobileOnly } from "react-device-detect"; import { isDesktop, isMobile, isMobileOnly } from "react-device-detect";
import { Trans, useTranslation } from "react-i18next"; import { Trans, useTranslation } from "react-i18next";
import { import {
LuFolderCheck, LuFolderCheck,
@ -696,15 +696,16 @@ function TrainingGrid({
ref={contentRef} ref={contentRef}
className={cn( className={cn(
"scrollbar-container gap-3 overflow-y-scroll p-1", "scrollbar-container gap-3 overflow-y-scroll p-1",
isMobileOnly ? "grid grid-cols-2" : "flex flex-wrap", isMobile
? "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8"
: "flex flex-wrap",
)} )}
> >
{Object.entries(faceGroups).map(([key, group]) => { {Object.entries(faceGroups).map(([key, group]) => {
const event = events?.find((ev) => ev.id == key); const event = events?.find((ev) => ev.id == key);
return ( return (
<div> <div key={key} className={cn(isMobile && "aspect-square size-full")}>
<FaceAttemptGroup <FaceAttemptGroup
key={key}
config={config} config={config}
group={group} group={group}
event={event} event={event}

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

@ -929,13 +929,18 @@ function ObjectTrainGrid({
ref={contentRef} ref={contentRef}
className={cn( className={cn(
"scrollbar-container gap-3 overflow-y-scroll p-1", "scrollbar-container gap-3 overflow-y-scroll p-1",
isMobileOnly ? "grid grid-cols-2 px-2" : "flex flex-wrap", isMobile
? "grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8"
: "flex flex-wrap",
)} )}
> >
{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);
return ( return (
<div> <div
key={key}
className={cn(isMobile && "aspect-square size-full")}
>
<GroupedClassificationCard <GroupedClassificationCard
key={key} key={key}
group={group} group={group}