Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-05-24 01:12:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): better touch device detection (#17144)

Browse Source 
* fix(web): better touch device detection

* variable name
This commit is contained in:
Alex 2025-03-27 10:43:56 -05:00 committed by GitHub
parent c26b28f6a4
commit 6341962de4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/lib/components/assets/thumbnail/thumbnail.svelte
View File

@ -72,7 +72,7 @@
IMAGE_THUMBNAIL: { THUMBHASH_FADE_DURATION },
} = TUNABLES;
let isTouchDevice = $derived(mobileDevice.hoverNone);
let usingMobileDevice = $derived(mobileDevice.pointerCoarse);
let focussableElement: HTMLElement | undefined = $state();
let mouseOver = $state(false);
let loaded = $state(false);
@ -112,7 +112,7 @@
};
const onMouseEnter = () => {
if (isTouchDevice) {
if (usingMobileDevice) {
return;
}
mouseOver = true;
@ -191,7 +191,7 @@
onfocus={handleFocus}
data-testid="container-with-tabindex"
>
{#if !isTouchDevice && mouseOver && !disableMouseOver}
{#if !usingMobileDevice && mouseOver && !disableMouseOver}
<!-- lazy show the url on mouse over-->
<a
class="absolute z-30 {className} top-[41px]"
@ -238,7 +238,7 @@
class:rounded-xl={selected}
>
<!-- Gradient overlay on hover -->
{#if !isTouchDevice}
{#if !usingMobileDevice}
<div
class="absolute z-10 h-full w-full bg-gradient-to-b from-black/25 via-[transparent_25%] opacity-0 transition-opacity group-hover:opacity-100"
class:rounded-xl={selected}

2
web/src/lib/components/photos-page/asset-grid.svelte
View File

@ -83,7 +83,7 @@
let bottomSectionHeight = 60;
let leadout = $state(false);
const usingMobileDevice = $derived(mobileDevice.hoverNone);
const usingMobileDevice = $derived(mobileDevice.pointerCoarse);
const scrollTo = (top: number) => {
element?.scrollTo({ top });

2
web/src/lib/components/shared-components/scrubber/scrubber.svelte
View File

@ -268,7 +268,7 @@
globalThis.removeEventListener('touchmove', onTouchMove);
};
});
const usingMobileDevice = $derived(mobileDevice.hoverNone);
const usingMobileDevice = $derived(mobileDevice.pointerCoarse);
</script>
<svelte:window

6
web/src/lib/stores/mobile-device.svelte.ts
View File

@ -1,11 +1,11 @@
import { MediaQuery } from 'svelte/reactivity';
const hoverNone = new MediaQuery('hover: none');
const pointerCoarse = new MediaQuery('pointer:coarse');
const maxMd = new MediaQuery('max-width: 767px');
export const mobileDevice = {
get hoverNone() {
return hoverNone.current;
get pointerCoarse() {
return pointerCoarse.current;
},
get maxMd() {
return maxMd.current;