Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-10-27 10:52:11 +01:00
Code Issues Projects Releases Wiki Activity

Some small layout tweaks for portrait cams and motion review (#11766)

Browse Source 
* Some small layout tweaks for portrait cams and motion review

* spans

* fix desktop
This commit is contained in:
Josh Hawkins 2024-06-05 09:53:17 -05:00 committed by GitHub
parent 36ae42a011
commit 8c96dfe1d1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/views/events/EventView.tsx
View File

@ -29,7 +29,7 @@ import {
useRef, useRef,
useState, useState,
} from "react"; } from "react";
import { isDesktop, isMobile, isTablet } from "react-device-detect"; import { isDesktop, isMobile } from "react-device-detect";
import { LuFolderCheck } from "react-icons/lu"; import { LuFolderCheck } from "react-icons/lu";
import { MdCircle } from "react-icons/md"; import { MdCircle } from "react-icons/md";
import useSWR from "swr"; import useSWR from "swr";
@ -869,8 +869,10 @@ function MotionReview({
ref={contentRef} ref={contentRef}
className={cn( className={cn(
"no-scrollbar grid w-full grid-cols-1", "no-scrollbar grid w-full grid-cols-1",
(reviewCameras.length > 3 || isTablet || isDesktop) && isMobile && "landscape:grid-cols-2",
"grid-cols-2", reviewCameras.length > 3 &&
isMobile &&
"portrait:md:grid-cols-2 landscape:md:grid-cols-3",
"gap-2 overflow-auto px-1 md:mx-2 md:gap-4 xl:grid-cols-3 3xl:grid-cols-4", "gap-2 overflow-auto px-1 md:mx-2 md:gap-4 xl:grid-cols-3 3xl:grid-cols-4",
)} )}
> >
@ -880,10 +882,10 @@ function MotionReview({
const aspectRatio = camera.detect.width / camera.detect.height; const aspectRatio = camera.detect.width / camera.detect.height;
if (aspectRatio > 2) { if (aspectRatio > 2) {
grow = "aspect-wide"; grow = "aspect-wide";
spans = reviewCameras.length > 3 && "col-span-2"; spans = "sm:col-span-2";
} else if (aspectRatio < 1) { } else if (aspectRatio < 1) {
grow = "md:h-full aspect-tall"; grow = "h-full aspect-tall";
spans = "row-span-2"; spans = "md:row-span-2";
} else { } else {
grow = "aspect-video"; grow = "aspect-video";
} }

4
web/src/views/live/LiveDashboardView.tsx
View File

@ -255,7 +255,7 @@ export default function LiveDashboardView({
if (aspectRatio > 2) { if (aspectRatio > 2) {
return `${mobileLayout == "grid" && "col-span-2"} aspect-wide`; return `${mobileLayout == "grid" && "col-span-2"} aspect-wide`;
} else if (aspectRatio < 1) { } else if (aspectRatio < 1) {
return `${mobileLayout == "grid" && "row-span-2 md:h-full"} aspect-tall`; return `${mobileLayout == "grid" && "row-span-2 h-full"} aspect-tall`;
} else { } else {
return "aspect-video"; return "aspect-video";
} }
@ -276,7 +276,7 @@ export default function LiveDashboardView({
if (aspectRatio > 2) { if (aspectRatio > 2) {
grow = `${mobileLayout == "grid" && "col-span-2"} aspect-wide`; grow = `${mobileLayout == "grid" && "col-span-2"} aspect-wide`;
} else if (aspectRatio < 1) { } else if (aspectRatio < 1) {
grow = `${mobileLayout == "grid" && "row-span-2 md:h-full"} aspect-tall`; grow = `${mobileLayout == "grid" && "row-span-2 h-full"} aspect-tall`;
} else { } else {
grow = "aspect-video"; grow = "aspect-video";
} }