diff options
| author | syuilo <4439005+syuilo@users.noreply.github.com> | 2025-03-16 13:59:08 +0900 |
|---|---|---|
| committer | syuilo <4439005+syuilo@users.noreply.github.com> | 2025-03-16 13:59:08 +0900 |
| commit | dca42fd6e67b4b7b4fe97428e792cc299d2afaa8 (patch) | |
| tree | dff466f076c9d048a26d5c9ef32fed09056e3edd /packages/frontend/src/components/MkImgWithBlurhash.vue | |
| parent | 🎨 (diff) | |
| download | sharkey-dca42fd6e67b4b7b4fe97428e792cc299d2afaa8.tar.gz sharkey-dca42fd6e67b4b7b4fe97428e792cc299d2afaa8.tar.bz2 sharkey-dca42fd6e67b4b7b4fe97428e792cc299d2afaa8.zip | |
enhance(frontend): improve ux for touch devices
Diffstat (limited to 'packages/frontend/src/components/MkImgWithBlurhash.vue')
| -rw-r--r-- | packages/frontend/src/components/MkImgWithBlurhash.vue | 30 |
1 files changed, 28 insertions, 2 deletions
diff --git a/packages/frontend/src/components/MkImgWithBlurhash.vue b/packages/frontend/src/components/MkImgWithBlurhash.vue index 37cbc5d06b..6585784e42 100644 --- a/packages/frontend/src/components/MkImgWithBlurhash.vue +++ b/packages/frontend/src/components/MkImgWithBlurhash.vue @@ -14,8 +14,34 @@ SPDX-License-Identifier: AGPL-3.0-only :enterToClass="prefer.s.animation && props.transition?.enterToClass || undefined" :leaveFromClass="prefer.s.animation && props.transition?.leaveFromClass || undefined" > - <canvas v-show="hide" key="canvas" ref="canvas" :class="$style.canvas" :width="canvasWidth" :height="canvasHeight" :title="title ?? undefined" tabindex="-1"/> - <img v-show="!hide" key="img" ref="img" :height="imgHeight ?? undefined" :width="imgWidth ?? undefined" :class="$style.img" :src="src ?? undefined" :title="title ?? undefined" :alt="alt ?? undefined" loading="eager" decoding="async" tabindex="-1"/> + <canvas + v-show="hide" + key="canvas" + ref="canvas" + :class="$style.canvas" + :width="canvasWidth" + :height="canvasHeight" + :title="title ?? undefined" + draggable="false" + tabindex="-1" + style="-webkit-user-drag: none;" + /> + <img + v-show="!hide" + key="img" + ref="img" + :height="imgHeight ?? undefined" + :width="imgWidth ?? undefined" + :class="$style.img" + :src="src ?? undefined" + :title="title ?? undefined" + :alt="alt ?? undefined" + loading="eager" + decoding="async" + draggable="false" + tabindex="-1" + style="-webkit-user-drag: none;" + /> </TransitionGroup> </div> </template> |