administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-08 12:15:25 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Fix scaling for long timeline lists

Browse Source
This commit is contained in:
Nicolas Mowen 2024-01-31 06:29:37 -07:00
parent af3f6dadcb
commit 77c061e68c
2 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/card/TimelineItemCard.tsx
View File

@ -47,7 +47,7 @@ export default function TimelineItemCard({
return ( return (
<Card <Card
className="relative m-2 flex w-full h-20 xl:h-24 3xl:h-28 4xl:h-36 cursor-pointer" className="relative mx-2 mb-2 flex w-full h-20 xl:h-24 3xl:h-28 4xl:h-36 cursor-pointer"
onClick={onSelect} onClick={onSelect}
> >
<div className="w-32 xl:w-40 3xl:w-44 4xl:w-60 p-2"> <div className="w-32 xl:w-40 3xl:w-44 4xl:w-60 p-2">

8
web/src/views/history/DesktopTimelineView.tsx
View File

@ -109,7 +109,7 @@ export default function DesktopTimelineView({
return ( return (
<div className="w-full flex flex-col"> <div className="w-full flex flex-col">
<div className="flex max-h-[60%]"> <div className="flex mt-2 max-h-[60%]">
<DynamicVideoPlayer <DynamicVideoPlayer
className="w-2/3 bg-black flex justify-center items-center" className="w-2/3 bg-black flex justify-center items-center"
camera={initialPlayback.camera} camera={initialPlayback.camera}
@ -129,7 +129,8 @@ export default function DesktopTimelineView({
} }
}} }}
/> />
<div className="px-2 h-full w-1/3 overflow-y-auto overflow-x-hidden"> <div className="relative h-full w-1/3">
<div className="absolute px-2 left-0 top-0 right-0 bottom-0 overflow-y-auto overflow-x-hidden">
{selectedPlayback.timelineItems.map((timeline) => { {selectedPlayback.timelineItems.map((timeline) => {
return ( return (
<TimelineItemCard <TimelineItemCard
@ -144,7 +145,8 @@ export default function DesktopTimelineView({
})} })}
</div> </div>
</div> </div>
<div className="mt-4 w-full h-full relative"> </div>
<div className="relative mt-4 w-full h-full">
<div className="absolute left-0 top-0 right-0 bottom-0 overflow-auto"> <div className="absolute left-0 top-0 right-0 bottom-0 overflow-auto">
{timelineStack.playbackItems.map((timeline) => { {timelineStack.playbackItems.map((timeline) => {
const isInitiallySelected = const isInitiallySelected =