Spartan/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-25 18:30:56 -06:00
Code Issues Packages Projects Releases Wiki Activity

move handlebar timestamp outside of timeline on mobile (#10501)

Browse Source
This commit is contained in:
Josh Hawkins 2024-03-17 08:28:50 -05:00 committed by GitHub
parent 4a360d8142
commit e4d0e222e3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/components/timeline/ReviewTimeline.tsx
View File

@ -1,4 +1,5 @@
import { ReactNode, RefObject } from "react";
import { isIOS, isMobile } from "react-device-detect";
export type ReviewTimelineProps = {
timelineRef: RefObject<HTMLDivElement>;
@ -55,7 +56,7 @@ export function ReviewTimeline({
</div>
{showHandlebar && (
<div
className="absolute left-0 top-0 z-20 w-full"
className={`absolute left-0 top-0 ${isDragging && isIOS ? "" : "z-20"} w-full`}
role="scrollbar"
ref={handlebarRef}
>
@ -72,14 +73,16 @@ export function ReviewTimeline({
<div
className={`bg-destructive rounded-full mx-auto ${
segmentDuration < 60 ? "w-12 md:w-20" : "w-12 md:w-16"
} h-5 flex items-center justify-center`}
} h-5 ${isDragging && isMobile ? "fixed top-[18px] left-1/2 transform -translate-x-1/2 z-20 w-[30%] h-[30px] bg-destructive/80" : "static"} flex items-center justify-center`}
>
<div
ref={handlebarTimeRef}
className="text-white text-[8px] md:text-xs z-10"
className={`text-white ${isDragging && isMobile ? "text-lg" : "text-[8px] md:text-xs"} z-10`}
></div>
</div>
<div className="absolute h-1 w-full bg-destructive top-1/2 transform -translate-y-1/2"></div>
<div
className={`absolute h-1 w-full bg-destructive ${isDragging && isMobile ? "top-1" : "top-1/2 transform -translate-y-1/2"}`}
></div>
</div>
</div>
</div>