diff --git a/ui/v2.5/src/components/List/EditFilterDialog.tsx b/ui/v2.5/src/components/List/EditFilterDialog.tsx index d23b15bbf..165b07a9e 100644 --- a/ui/v2.5/src/components/List/EditFilterDialog.tsx +++ b/ui/v2.5/src/components/List/EditFilterDialog.tsx @@ -34,6 +34,7 @@ import { useConfigureUI } from "src/core/StashService"; import { FilterMode } from "src/core/generated-graphql"; import { useFocusOnce } from "src/utils/focus"; import Mousetrap from "mousetrap"; +import ScreenUtils from "src/utils/screen"; interface ICriterionList { criteria: string[]; @@ -228,7 +229,7 @@ export const EditFilterDialog: React.FC = ({ ); const [criterion, setCriterion] = useState>(); - const [searchRef, setSearchFocus] = useFocusOnce(); + const [searchRef, setSearchFocus] = useFocusOnce(!ScreenUtils.isTouch()); const { criteria } = currentFilter; diff --git a/ui/v2.5/src/components/Shared/styles.scss b/ui/v2.5/src/components/Shared/styles.scss index 7fc0902fb..62c04bb9e 100644 --- a/ui/v2.5/src/components/Shared/styles.scss +++ b/ui/v2.5/src/components/Shared/styles.scss @@ -227,6 +227,13 @@ button.collapse-button.btn-primary:not(:disabled):not(.disabled):active { &:checked { opacity: 0.75; } + + @media (hover: none), (pointer: coarse) { + // always show card check button when hovering not supported + opacity: 0.25; + // and make it bigger + width: 1.5rem; + } } &:hover .card-check { diff --git a/ui/v2.5/src/utils/focus.ts b/ui/v2.5/src/utils/focus.ts index 612636c2e..2048aede0 100644 --- a/ui/v2.5/src/utils/focus.ts +++ b/ui/v2.5/src/utils/focus.ts @@ -14,16 +14,16 @@ const useFocus = () => { }; // focuses on the element only once on mount -export const useFocusOnce = () => { +export const useFocusOnce = (active?: boolean) => { const [htmlElRef, setFocus] = useFocus(); const focused = useRef(false); useEffect(() => { - if (!focused.current) { + if (!focused.current && active) { setFocus(); focused.current = true; } - }, [setFocus]); + }, [setFocus, active]); return [htmlElRef, setFocus] as const; }; diff --git a/ui/v2.5/src/utils/screen.ts b/ui/v2.5/src/utils/screen.ts index b800be86b..0f4a0a3c6 100644 --- a/ui/v2.5/src/utils/screen.ts +++ b/ui/v2.5/src/utils/screen.ts @@ -1,8 +1,11 @@ const isMobile = () => window.matchMedia("only screen and (max-width: 576px)").matches; +const isTouch = () => window.matchMedia("(pointer: coarse)").matches; + const ScreenUtils = { isMobile, + isTouch, }; export default ScreenUtils;