Minor mobile fixes (#4683)

* Show card checkbox on mobile
* Don't focus query field on filter dialog open on touch devices

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<IEditFilterProps> = ({
   );
   const [criterion, setCriterion] = useState<Criterion<CriterionValue>>();
 
-  const [searchRef, setSearchFocus] = useFocusOnce();
+  const [searchRef, setSearchFocus] = useFocusOnce(!ScreenUtils.isTouch());
 
   const { criteria } = currentFilter;
 

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 {

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;
 };

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;