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

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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -341,7 +341,7 @@ export function RecordingView({
</div> </div>
<div <div
className={`h-full flex justify-center overflow-hidden ${isDesktop ? "" : "flex-col gap-2"}`} className={`h-full flex justify-center overflow-hidden ${isDesktop ? "" : "flex-col landscape:flex-row gap-2"}`}
> >
<div className={`${isDesktop ? "w-[80%]" : ""} flex flex-1 flex-wrap`}> <div className={`${isDesktop ? "w-[80%]" : ""} flex flex-1 flex-wrap`}>
<div <div
@ -352,7 +352,7 @@ export function RecordingView({
className={ className={
isDesktop isDesktop
? `${mainCameraAspect == "tall" ? "h-[90%]" : mainCameraAspect == "wide" ? "w-full" : "w-[78%]"} px-4 flex justify-center` ? `${mainCameraAspect == "tall" ? "h-[90%]" : mainCameraAspect == "wide" ? "w-full" : "w-[78%]"} px-4 flex justify-center`
: `w-full pt-2 ${mainCameraAspect == "wide" ? "aspect-wide" : "aspect-video"}` : `portrait:w-full pt-2 ${mainCameraAspect == "wide" ? "landscape:w-full aspect-wide" : "landscape:h-[94%] aspect-video"}`
} }
style={{ style={{
aspectRatio: isDesktop aspectRatio: isDesktop
@ -497,7 +497,7 @@ function Timeline({
className={`${ className={`${
isDesktop isDesktop
? `${timelineType == "timeline" ? "w-[100px]" : "w-60"} overflow-y-auto no-scrollbar` ? `${timelineType == "timeline" ? "w-[100px]" : "w-60"} overflow-y-auto no-scrollbar`
: "flex-grow overflow-hidden" : "portrait:flex-grow landscape:w-[20%] overflow-hidden"
} relative`} } relative`}
> >
<div className="absolute top-0 inset-x-0 z-20 w-full h-[30px] bg-gradient-to-b from-secondary to-transparent pointer-events-none"></div> <div className="absolute top-0 inset-x-0 z-20 w-full h-[30px] bg-gradient-to-b from-secondary to-transparent pointer-events-none"></div>

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%]"; return "absolute left-2 right-2 top-[50%] -translate-y-[50%]";
} else { } else {
if (aspect > 16 / 9) { 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 { } 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={ className={
fullscreen fullscreen
? `fixed inset-0 bg-black z-30` ? `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 <div
className={ className={
fullscreen fullscreen
? `absolute right-32 top-1 z-40 ${isMobile ? "landscape:left-2 landscape:right-auto landscape:bottom-1 landscape:top-auto" : ""}` ? `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 ? ( {!fullscreen ? (
<div className="flex items-center gap-2"> <div
className={`flex items-center gap-2 ${isMobile ? "landscape:flex-col" : ""}`}
>
<Button <Button
className={`flex items-center gap-2.5 rounded-lg`} className={`flex items-center gap-2.5 rounded-lg`}
size="sm" size="sm"
@ -619,7 +621,7 @@ function FrigateCameraFeatures({
<Drawer> <Drawer>
<DrawerTrigger> <DrawerTrigger>
<CameraFeatureToggle <CameraFeatureToggle
className="p-2" className="p-2 landscape:size-9"
variant="primary" variant="primary"
Icon={FaCog} Icon={FaCog}
isActive={false} isActive={false}