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

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 { ReactNode, RefObject } from "react";
import { isIOS, isMobile } from "react-device-detect";
export type ReviewTimelineProps = { export type ReviewTimelineProps = {
timelineRef: RefObject<HTMLDivElement>; timelineRef: RefObject<HTMLDivElement>;
@ -55,7 +56,7 @@ export function ReviewTimeline({
</div> </div>
{showHandlebar && ( {showHandlebar && (
<div <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" role="scrollbar"
ref={handlebarRef} ref={handlebarRef}
> >
@ -72,14 +73,16 @@ export function ReviewTimeline({
<div <div
className={`bg-destructive rounded-full mx-auto ${ className={`bg-destructive rounded-full mx-auto ${
segmentDuration < 60 ? "w-12 md:w-20" : "w-12 md:w-16" 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 <div
ref={handlebarTimeRef} 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> </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> </div>
</div> </div>