Mirrors/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-17 20:34:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Minor mobile fixes (#4683)

Browse Source 
* Show card checkbox on mobile
* Don't focus query field on filter dialog open on touch devices
This commit is contained in:
WithoutPants
2024-03-14 11:04:25 +11:00
committed by GitHub
parent 9ceea952b6
commit fa172c2dfd
4 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
ui/v2.5/src/components/List/EditFilterDialog.tsx
View File

@@ -34,6 +34,7 @@ import { useConfigureUI } from "src/core/StashService";
import { FilterMode } from "src/core/generated-graphql"; import { FilterMode } from "src/core/generated-graphql";
import { useFocusOnce } from "src/utils/focus"; import { useFocusOnce } from "src/utils/focus";
import Mousetrap from "mousetrap"; import Mousetrap from "mousetrap";
import ScreenUtils from "src/utils/screen";
interface ICriterionList { interface ICriterionList {
criteria: string[]; criteria: string[];
@@ -228,7 +229,7 @@ export const EditFilterDialog: React.FC<IEditFilterProps> = ({
); );
const [criterion, setCriterion] = useState<Criterion<CriterionValue>>(); const [criterion, setCriterion] = useState<Criterion<CriterionValue>>();
const [searchRef, setSearchFocus] = useFocusOnce(); const [searchRef, setSearchFocus] = useFocusOnce(!ScreenUtils.isTouch());
const { criteria } = currentFilter; const { criteria } = currentFilter;

7
ui/v2.5/src/components/Shared/styles.scss
View File

@@ -227,6 +227,13 @@ button.collapse-button.btn-primary:not(:disabled):not(.disabled):active {
&:checked { &:checked {
opacity: 0.75; 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 { &:hover .card-check {

6
ui/v2.5/src/utils/focus.ts
View File

@@ -14,16 +14,16 @@ const useFocus = () => {
}; };
// focuses on the element only once on mount // focuses on the element only once on mount
export const useFocusOnce = () => { export const useFocusOnce = (active?: boolean) => {
const [htmlElRef, setFocus] = useFocus(); const [htmlElRef, setFocus] = useFocus();
const focused = useRef(false); const focused = useRef(false);
useEffect(() => { useEffect(() => {
if (!focused.current) { if (!focused.current && active) {
setFocus(); setFocus();
focused.current = true; focused.current = true;
} }
}, [setFocus]); }, [setFocus, active]);
return [htmlElRef, setFocus] as const; return [htmlElRef, setFocus] as const;
}; };

3
ui/v2.5/src/utils/screen.ts
View File

@@ -1,8 +1,11 @@
const isMobile = () => const isMobile = () =>
window.matchMedia("only screen and (max-width: 576px)").matches; window.matchMedia("only screen and (max-width: 576px)").matches;
const isTouch = () => window.matchMedia("(pointer: coarse)").matches;
const ScreenUtils = { const ScreenUtils = {
isMobile, isMobile,
isTouch,
}; };
export default ScreenUtils; export default ScreenUtils;