self-hosted/Sonarr
1
0
Fork 0
mirror of https://github.com/Sonarr/Sonarr.git synced 2025-01-25 11:13:39 +02:00
Code Issues Releases Activity

Fixed: Series links not opening on iOS

Browse Source
This commit is contained in:
Mark McDowall 2024-09-04 21:02:58 -07:00 committed by Mark McDowall
parent 8b20a9449c
commit f20ac9dc34
2 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/Components/Tooltip/Tooltip.tsx
View File

@ -34,7 +34,7 @@ function Tooltip(props: TooltipProps) {
canFlip = false, canFlip = false,
} = props; } = props;
const closeTimeout = useRef(0); const closeTimeout = useRef<ReturnType<typeof setTimeout>>();
const updater = useRef<(() => void) | null>(null); const updater = useRef<(() => void) | null>(null);
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
@ -48,16 +48,25 @@ function Tooltip(props: TooltipProps) {
}); });
}, [setIsOpen]); }, [setIsOpen]);
const handleMouseEnter = useCallback(() => { const handleMouseEnterAnchor = useCallback(() => {
// Mobile will fire mouse enter and click events rapidly, // Mobile will fire mouse enter and click events rapidly,
// this causes the tooltip not to open on the first press. // this causes the tooltip not to open on the first press.
// Ignore the mouse enter event on mobile. // Ignore the mouse enter event on mobile.
if (isMobileUtil()) { if (isMobileUtil()) {
return; return;
} }
if (closeTimeout.current) { if (closeTimeout.current) {
window.clearTimeout(closeTimeout.current); clearTimeout(closeTimeout.current);
}
setIsOpen(true);
}, [setIsOpen]);
const handleMouseEnterTooltip = useCallback(() => {
if (closeTimeout.current) {
clearTimeout(closeTimeout.current);
} }
setIsOpen(true); setIsOpen(true);
@ -65,7 +74,9 @@ function Tooltip(props: TooltipProps) {
const handleMouseLeave = useCallback(() => { const handleMouseLeave = useCallback(() => {
// Still listen for mouse leave on mobile to allow clicks outside to close the tooltip. // Still listen for mouse leave on mobile to allow clicks outside to close the tooltip.
closeTimeout.current = window.setTimeout(() => {
clearTimeout(closeTimeout.current);
closeTimeout.current = setTimeout(() => {
setIsOpen(false); setIsOpen(false);
}, 100); }, 100);
}, [setIsOpen]); }, [setIsOpen]);
@ -118,7 +129,7 @@ function Tooltip(props: TooltipProps) {
useEffect(() => { useEffect(() => {
return () => { return () => {
if (closeTimeout.current) { if (closeTimeout.current) {
window.clearTimeout(closeTimeout.current); clearTimeout(closeTimeout.current);
} }
}; };
}, []); }, []);
@ -131,7 +142,7 @@ function Tooltip(props: TooltipProps) {
ref={ref} ref={ref}
className={className} className={className}
onClick={handleClick} onClick={handleClick}
onMouseEnter={handleMouseEnter} onMouseEnter={handleMouseEnterAnchor}
onMouseLeave={handleMouseLeave} onMouseLeave={handleMouseLeave}
> >
{anchor} {anchor}
@ -181,7 +192,7 @@ function Tooltip(props: TooltipProps) {
: styles.horizontalContainer : styles.horizontalContainer
)} )}
style={style} style={style}
onMouseEnter={handleMouseEnter} onMouseEnter={handleMouseEnterTooltip}
onMouseLeave={handleMouseLeave} onMouseLeave={handleMouseLeave}
> >
<div <div

7
frontend/src/Series/Details/SeriesDetailsLinks.css
View File

@ -11,3 +11,10 @@
cursor: pointer; cursor: pointer;
} }
@media only screen and (max-width: $breakpointExtraSmall) {
.links {
display: flex;
flex-flow: column wrap;
}
}