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

Mobile/PWA spacing fixes (#11403)

Browse Source 
* spacing on mobile landscape

* better icon placement when running as pwa

* better icon placement when running as pwa

* portrait padding only
This commit is contained in:
Josh Hawkins
2024-05-16 17:00:14 -05:00
committed by GitHub
parent 76f822630d
commit ba03d3b3e4
5 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -254,7 +254,7 @@ export default function EventView({
return (
<div className="flex size-full flex-col pt-2 md:py-2">
<Toaster closeButton={true} />
<div className="relative mb-2 flex h-11 items-center justify-between pl-3 pr-2">
<div className="relative mb-2 flex h-11 items-center justify-between pl-2 pr-2 md:pl-3">
{isMobile && (
<Logo className="absolute inset-x-1/2 h-8 -translate-x-1/2" />
)}
@@ -602,7 +602,7 @@ function DetectionReview({
)}
<div
className="mx-2 grid w-full gap-2 px-1 sm:grid-cols-2 md:grid-cols-3 md:gap-4 3xl:grid-cols-4"
className="grid w-full gap-2 px-1 sm:grid-cols-2 md:mx-2 md:grid-cols-3 md:gap-4 3xl:grid-cols-4"
ref={contentRef}
>
{!loading && currentItems
@@ -922,7 +922,7 @@ 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 mx-2 grid w-full gap-2 overflow-auto px-1 sm:grid-cols-2 md:gap-4 xl:grid-cols-3 3xl:grid-cols-4"
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"
>
{reviewCameras.map((camera) => {
let grow;

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

@@ -227,7 +227,12 @@ export default function LiveDashboardView({
{!cameraGroup || cameraGroup == "default" || isMobileOnly ? (
<div
className={`mt-2 grid px-2 ${mobileLayout == "grid" ? "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" : ""} gap-2 md:gap-4`}
className={cn(
"mt-2 grid gap-2 px-2 md:gap-4",
mobileLayout == "grid" &&
"grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4",
isMobile && "px-0",
)}
>
{includeBirdseye && birdseyeConfig?.enabled && (
<BirdseyeLivePlayer