Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki 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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/App.tsx
View File

@ -9,6 +9,7 @@ import Bottombar from "./components/navigation/Bottombar";
import { Suspense, lazy } from "react";
import { Redirect } from "./components/navigation/Redirect";
import { cn } from "./lib/utils";
import { isPWA } from "./utils/isPWA";
const Live = lazy(() => import("@/pages/Live"));
const Events = lazy(() => import("@/pages/Events"));
@ -35,7 +36,7 @@ function App() {
className={cn(
"absolute right-0 top-0 overflow-hidden",
isMobile
? "bottom-12 left-0 md:bottom-16 landscape:bottom-14 landscape:md:bottom-16"
? `bottom-${isPWA ? 16 : 12} left-0 md:bottom-16 landscape:bottom-14 landscape:md:bottom-16`
: "bottom-8 left-[52px]",
)}
>

8
web/src/components/navigation/Bottombar.tsx
View File

@ -16,6 +16,7 @@ import {
import { Link } from "react-router-dom";
import { cn } from "@/lib/utils";
import { isMobile } from "react-device-detect";
import { isPWA } from "@/utils/isPWA";
function Bottombar() {
const navItems = useNavigation("secondary");
@ -23,8 +24,11 @@ function Bottombar() {
return (
<div
className={cn(
"absolute inset-x-4 bottom-0 flex flex-row items-center justify-between",
isMobile ? "h-12 landscape:md:h-16" : "h-16",
"absolute inset-x-4 bottom-0 flex h-16 flex-row justify-between",
isPWA
? "portrait:items-start portrait:pt-1 landscape:items-center"
: "items-center",
isMobile && !isPWA && "h-12 landscape:md:h-16",
)}
>
{navItems.map((item) => (

3
web/src/utils/isPWA.ts Normal file
View File

@ -0,0 +1,3 @@
export const isPWA =
("standalone" in window.navigator && window.navigator.standalone) ||
window.matchMedia("(display-mode: standalone)").matches;

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