chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

UI tweaks and bugfixes (#11692)

Browse Source 
* UI tweaks and bugfixes

* fix linter complaints in unmodified files
This commit is contained in:
Josh Hawkins
2024-06-02 12:00:59 -05:00
committed by GitHub
parent 7031c47fb2
commit 1e80342c41
7 changed files with 51 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -29,7 +29,7 @@ import {
useRef,
useState,
} from "react";
import { isDesktop, isMobile } from "react-device-detect";
import { isDesktop, isMobile, isTablet } from "react-device-detect";
import { LuFolderCheck } from "react-icons/lu";
import { MdCircle } from "react-icons/md";
import useSWR from "swr";
@@ -48,6 +48,7 @@ import { Skeleton } from "@/components/ui/skeleton";
import scrollIntoView from "scroll-into-view-if-needed";
import { Toaster } from "@/components/ui/sonner";
import { toast } from "sonner";
import { cn } from "@/lib/utils";
type EventViewProps = {
reviewItems?: SegmentedReviewData;
@@ -866,7 +867,12 @@ function MotionReview({
<div className="no-scrollbar flex flex-1 flex-wrap content-start gap-2 overflow-y-auto md:gap-4">
<div
ref={contentRef}
className="no-scrollbar grid w-full gap-2 overflow-auto px-1 sm:grid-cols-2 md:mx-2 md:gap-4 xl:grid-cols-3 3xl:grid-cols-4"
className={cn(
"no-scrollbar grid w-full grid-cols-1",
(reviewCameras.length > 3 || isTablet || isDesktop) &&
"grid-cols-2",
"gap-2 overflow-auto px-1 md:mx-2 md:gap-4 xl:grid-cols-3 3xl:grid-cols-4",
)}
>
{reviewCameras.map((camera) => {
let grow;
@@ -874,13 +880,12 @@ function MotionReview({
const aspectRatio = camera.detect.width / camera.detect.height;
if (aspectRatio > 2) {
grow = "aspect-wide";
spans = "sm:col-span-2";
spans = reviewCameras.length > 3 && "col-span-2";
} else if (aspectRatio < 1) {
grow = "md:h-full aspect-tall";
spans = "md:row-span-2";
spans = "row-span-2";
} else {
grow = "aspect-video";
spans = "";
}
const detectionType = getDetectionType(camera.name);
return (

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

@@ -243,9 +243,17 @@ export default function LiveDashboardView({
>
{includeBirdseye && birdseyeConfig?.enabled && (
<div
style={{
aspectRatio: birdseyeConfig.width / birdseyeConfig.height,
}}
className={(() => {
const aspectRatio =
birdseyeConfig.width / birdseyeConfig.height;
if (aspectRatio > 2) {
return `${mobileLayout == "grid" && "col-span-2"} aspect-wide`;
} else if (aspectRatio < 1) {
return `${mobileLayout == "grid" && "row-span-2 md:h-full"} aspect-tall`;
} else {
return "aspect-video";
}
})()}
ref={birdseyeContainerRef}
>
<BirdseyeLivePlayer
@@ -260,9 +268,9 @@ export default function LiveDashboardView({
let grow;
const aspectRatio = camera.detect.width / camera.detect.height;
if (aspectRatio > 2) {
grow = `${mobileLayout == "grid" ? "col-span-2" : ""} aspect-wide`;
grow = `${mobileLayout == "grid" && "col-span-2"} aspect-wide`;
} else if (aspectRatio < 1) {
grow = `${mobileLayout == "grid" ? "row-span-2 aspect-tall md:h-full" : ""} aspect-tall`;
grow = `${mobileLayout == "grid" && "row-span-2 md:h-full"} aspect-tall`;
} else {
grow = "aspect-video";
}

2
web/src/views/system/GeneralMetrics.tsx
View File

@@ -445,7 +445,7 @@ export default function GeneralMetrics({
</Button>
)}
</div>
<div className=" mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
<div className="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
{statsHistory.length != 0 ? (
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">GPU Usage</div>