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

UI Tweaks (#10727)

Browse Source 
* Fix drawer not being scrollable

* Fix margin

* Use 2 columns for large mobile devices

* Move padding

* Add review summary to mobile calendar

* Make header spacing consistent between pages

* remove red
This commit is contained in:
Nicolas Mowen
2024-03-28 11:53:36 -06:00
committed by GitHub
parent 36d5e5b45f
commit 0223d6df60
6 changed files with 34 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -206,9 +206,9 @@ export default function EventView({
return (
<div className="flex flex-col size-full">
<div className="h-10 relative flex justify-between items-center mx-2">
<div className="h-11 px-2 relative flex justify-between items-center">
{isMobile && (
<Logo className="absolute inset-y-0 inset-x-1/2 -translate-x-1/2 h-8" />
<Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
)}
<ToggleGroup
className="*:px-3 *:py-4 *:rounded-2xl"
@@ -492,7 +492,7 @@ function DetectionReview({
<>
<div
ref={contentRef}
className="flex flex-1 flex-wrap content-start gap-2 md:gap-4 overflow-y-auto no-scrollbar"
className="mt-2 flex flex-1 flex-wrap content-start gap-2 md:gap-4 overflow-y-auto no-scrollbar"
>
{filter?.before == undefined && (
<NewReviewData

9
web/src/views/events/RecordingView.tsx
View File

@@ -225,13 +225,14 @@ export function RecordingView({
<div ref={contentRef} className="size-full flex flex-col">
<Toaster />
<div
className={`w-full h-10 px-2 relative flex items-center justify-between`}
className={`w-full h-11 px-2 relative flex items-center justify-between`}
>
{isMobile && (
<Logo className="absolute top-1 inset-x-1/2 -translate-x-1/2 h-8" />
<Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
)}
<Button
className="flex items-center gap-2 rounded-lg"
size="sm"
onClick={() => navigate(-1)}
>
<IoMdArrowRoundBack className="size-5" size="small" />
@@ -482,7 +483,9 @@ function Timeline({
onHandlebarDraggingChange={(scrubbing) => setScrubbing(scrubbing)}
/>
) : (
<div className="h-full flex flex-col gap-4 overflow-auto p-4 bg-secondary">
<div
className={`h-full grid grid-cols-1 gap-4 overflow-auto p-4 bg-secondary ${isDesktop ? "" : "sm:grid-cols-2"}`}
>
{mainCameraReviewItems.map((review) => {
if (review.severity == "significant_motion") {
return;

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

@@ -129,10 +129,10 @@ export default function LiveDashboardView({
const birdseyeConfig = useMemo(() => config?.birdseye, [config]);
return (
<div className="size-full overflow-y-auto px-2">
<div className="size-full overflow-y-auto">
{isMobile && (
<div className="relative h-9 flex items-center justify-between">
<Logo className="absolute inset-y-0 inset-x-1/2 -translate-x-1/2 h-8" />
<div className="h-11 px-2 relative flex items-center justify-between">
<Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
<CameraGroupSelector />
<div className="flex items-center gap-1">
<Button
@@ -175,7 +175,7 @@ export default function LiveDashboardView({
)}
<div
className={`my-4 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 *:rounded-2xl *:bg-black`}
>
{includeBirdseye && birdseyeConfig?.enabled && (
<BirdseyeLivePlayer