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

Improve Landscape mobile views (#10873)

Browse Source 
* Fix landscape live view

* Improve recording landscape view

* Fix height
This commit is contained in:
Nicolas Mowen
2024-04-07 14:37:33 -06:00
committed by GitHub
parent f6ff1c84b8
commit 25d81b5c6d
2 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/views/live/LiveCameraView.tsx
View File

@@ -158,9 +158,9 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
return "absolute left-2 right-2 top-[50%] -translate-y-[50%]";
} else {
if (aspect > 16 / 9) {
return "absolute left-0 top-[50%] -translate-y-[50%]";
return "p-2 absolute left-0 top-[50%] -translate-y-[50%]";
} else {
return "absolute top-2 bottom-2 left-[50%] -translate-x-[50%]";
return "p-2 absolute top-2 bottom-2 left-[50%] -translate-x-[50%]";
}
}
}
@@ -209,18 +209,20 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
className={
fullscreen
? `fixed inset-0 bg-black z-30`
: `size-full p-2 flex flex-col ${isMobile ? "landscape:flex-row" : ""}`
: `size-full p-2 flex flex-col ${isMobile ? "landscape:flex-row landscape:gap-1" : ""}`
}
>
<div
className={
fullscreen
? `absolute right-32 top-1 z-40 ${isMobile ? "landscape:left-2 landscape:right-auto landscape:bottom-1 landscape:top-auto" : ""}`
: `w-full h-12 flex flex-row items-center justify-between ${isMobile ? "landscape:w-min landscape:h-full landscape:flex-col" : ""}`
: `w-full h-12 flex flex-row items-center justify-between ${isMobile ? "landscape:w-12 landscape:h-full landscape:flex-col" : ""}`
}
>
{!fullscreen ? (
<div className="flex items-center gap-2">
<div
className={`flex items-center gap-2 ${isMobile ? "landscape:flex-col" : ""}`}
>
<Button
className={`flex items-center gap-2.5 rounded-lg`}
size="sm"
@@ -619,7 +621,7 @@ function FrigateCameraFeatures({
<Drawer>
<DrawerTrigger>
<CameraFeatureToggle
className="p-2"
className="p-2 landscape:size-9"
variant="primary"
Icon={FaCog}
isActive={false}