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

Make all corners less rounded on mobile (#11068)

Browse Source 
* make corners less rounded on mobile

* fix live dashboard classes
This commit is contained in:
Josh Hawkins
2024-04-22 10:12:45 -05:00
committed by GitHub
parent ba3930ab02
commit d6e93d039d
19 changed files with 67 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -249,7 +249,7 @@ export default function EventView({
</div>
</ToggleGroupItem>
<ToggleGroupItem
className={`px-3 py-4 rounded-2xl ${
className={`px-3 py-4 rounded-lg ${
severityToggle == "significant_motion"
? ""
: "text-muted-foreground"
@@ -891,7 +891,7 @@ function MotionReview({
{motionData ? (
<>
<PreviewPlayer
className={`rounded-2xl ${spans} ${grow}`}
className={`rounded-lg md:rounded-2xl ${spans} ${grow}`}
camera={camera.name}
timeRange={currentTimeRange}
startTime={previewStart}
@@ -917,7 +917,7 @@ function MotionReview({
</>
) : (
<Skeleton
className={`rounded-2xl size-full ${spans} ${grow}`}
className={`rounded-lg md:rounded-2xl size-full ${spans} ${grow}`}
/>
)}
</div>

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

@@ -175,7 +175,7 @@ export default function LiveDashboardView({
)}
<div
className={`mt-2 px-2 grid ${layout == "grid" ? "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" : ""} gap-2 md:gap-4 *:rounded-2xl *:bg-black`}
className={`mt-2 px-2 grid ${layout == "grid" ? "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" : ""} gap-2 md:gap-4`}
>
{includeBirdseye && birdseyeConfig?.enabled && (
<BirdseyeLivePlayer
@@ -198,7 +198,7 @@ export default function LiveDashboardView({
<LivePlayer
cameraRef={cameraRef}
key={camera.name}
className={grow}
className={`${grow} rounded-lg md:rounded-2xl bg-black`}
windowVisible={
windowVisible && visibleCameras.includes(camera.name)
}

8
web/src/views/system/CameraMetrics.tsx
View File

@@ -189,7 +189,7 @@ export default function CameraMetrics({
<div className="text-muted-foreground text-sm font-medium">Overview</div>
<div className="grid grid-cols-1 md:grid-cols-3">
{statsHistory.length != 0 ? (
<div className="p-2.5 bg-background_alt rounded-2xl">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="mb-5">DPS</div>
<CameraLineGraph
graphId="overall-stats"
@@ -200,7 +200,7 @@ export default function CameraMetrics({
/>
</div>
) : (
<Skeleton className="w-full h-32" />
<Skeleton className="w-full rounded-lg md:rounded-2xl h-32" />
)}
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -214,7 +214,7 @@ export default function CameraMetrics({
</div>
<div key={camera.name} className="grid sm:grid-cols-2 gap-2">
{Object.keys(cameraCpuSeries).includes(camera.name) ? (
<div className="p-2.5 bg-background_alt rounded-2xl">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="mb-5">CPU</div>
<CameraLineGraph
graphId={`${camera.name}-cpu`}
@@ -230,7 +230,7 @@ export default function CameraMetrics({
<Skeleton className="size-full aspect-video" />
)}
{Object.keys(cameraFpsSeries).includes(camera.name) ? (
<div className="p-2.5 bg-background_alt rounded-2xl">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="mb-5">DPS</div>
<CameraLineGraph
graphId={`${camera.name}-dps`}

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

@@ -334,7 +334,7 @@ export default function GeneralMetrics({
className={`w-full mt-4 grid grid-cols-1 gap-2 ${detTempSeries == undefined ? "sm:grid-cols-3" : "sm:grid-cols-4"}`}
>
{statsHistory.length != 0 ? (
<div className="p-2.5 bg-background_alt rounded-2xl">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="mb-5">Detector Inference Speed</div>
{detInferenceTimeSeries.map((series) => (
<ThresholdBarGraph
@@ -349,12 +349,12 @@ export default function GeneralMetrics({
))}
</div>
) : (
<Skeleton className="w-full aspect-video" />
<Skeleton className="w-full rounded-lg md:rounded-2xl aspect-video" />
)}
{statsHistory.length != 0 ? (
<>
{detTempSeries && (
<div className="p-2.5 bg-background_alt rounded-2xl">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="mb-5">Detector Temperature</div>
{detTempSeries.map((series) => (
<ThresholdBarGraph
@@ -374,7 +374,7 @@ export default function GeneralMetrics({
<Skeleton className="w-full aspect-video" />
)}
{statsHistory.length != 0 ? (
<div className="p-2.5 bg-background_alt rounded-2xl">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="mb-5">Detector CPU Usage</div>
{detCpuSeries.map((series) => (
<ThresholdBarGraph
@@ -392,7 +392,7 @@ export default function GeneralMetrics({
<Skeleton className="w-full aspect-video" />
)}
{statsHistory.length != 0 ? (
<div className="p-2.5 bg-background_alt rounded-2xl">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="mb-5">Detector Memory Usage</div>
{detMemSeries.map((series) => (
<ThresholdBarGraph
@@ -429,7 +429,7 @@ export default function GeneralMetrics({
</div>
<div className=" mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
{statsHistory.length != 0 ? (
<div className="p-2.5 bg-background_alt rounded-2xl">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="mb-5">GPU Usage</div>
{gpuSeries.map((series) => (
<ThresholdBarGraph
@@ -449,7 +449,7 @@ export default function GeneralMetrics({
{statsHistory.length != 0 ? (
<>
{gpuMemSeries && (
<div className="p-2.5 bg-background_alt rounded-2xl">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="mb-5">GPU Memory</div>
{gpuMemSeries.map((series) => (
<ThresholdBarGraph
@@ -477,7 +477,7 @@ export default function GeneralMetrics({
</div>
<div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
{statsHistory.length != 0 ? (
<div className="p-2.5 bg-background_alt rounded-2xl">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="mb-5">Process CPU Usage</div>
{otherProcessCpuSeries.map((series) => (
<ThresholdBarGraph
@@ -495,7 +495,7 @@ export default function GeneralMetrics({
<Skeleton className="w-full aspect-tall" />
)}
{statsHistory.length != 0 ? (
<div className="p-2.5 bg-background_alt rounded-2xl">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="mb-5">Process Memory Usage</div>
{otherProcessMemSeries.map((series) => (
<ThresholdBarGraph

8
web/src/views/system/StorageMetrics.tsx
View File

@@ -45,7 +45,7 @@ export default function StorageMetrics({
<div className="size-full mt-4 flex flex-col overflow-y-auto">
<div className="text-muted-foreground text-sm font-medium">Overview</div>
<div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
<div className="p-2.5 bg-background_alt rounded-2xl flex-col">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl flex-col">
<div className="mb-5">Recordings</div>
<StorageGraph
graphId="general-recordings"
@@ -53,7 +53,7 @@ export default function StorageMetrics({
total={totalStorage.total}
/>
</div>
<div className="p-2.5 bg-background_alt rounded-2xl flex-col">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl flex-col">
<div className="mb-5">/tmp/cache</div>
<StorageGraph
graphId="general-cache"
@@ -61,7 +61,7 @@ export default function StorageMetrics({
total={stats.service.storage["/tmp/cache"]["total"]}
/>
</div>
<div className="p-2.5 bg-background_alt rounded-2xl flex-col">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl flex-col">
<div className="mb-5">/dev/shm</div>
<StorageGraph
graphId="general-shared-memory"
@@ -75,7 +75,7 @@ export default function StorageMetrics({
</div>
<div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
{Object.keys(cameraStorage).map((camera) => (
<div className="p-2.5 bg-background_alt rounded-2xl flex-col">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl flex-col">
<div className="mb-5 capitalize">{camera.replaceAll("_", " ")}</div>
<StorageGraph
graphId={`${camera}-storage`}