diff --git a/src/client/components/link.vue b/src/client/components/link.vue index 11de688520..4c709375d3 100644 --- a/src/client/components/link.vue +++ b/src/client/components/link.vue @@ -14,6 +14,7 @@ import Vue from 'vue'; import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons'; import { url as local } from '../config'; import MkUrlPreview from './url-preview-popup.vue'; +import { isDeviceTouch } from '../scripts/is-device-touch'; export default Vue.extend({ props: { @@ -61,11 +62,13 @@ export default Vue.extend({ } }, onMouseover() { + if (isDeviceTouch()) return; clearTimeout(this.showTimer); clearTimeout(this.hideTimer); this.showTimer = setTimeout(this.showPreview, 500); }, onMouseleave() { + if (isDeviceTouch()) return; clearTimeout(this.showTimer); clearTimeout(this.hideTimer); this.hideTimer = setTimeout(this.closePreview, 500); diff --git a/src/client/components/url-preview-popup.vue b/src/client/components/url-preview-popup.vue index 938566e9e2..acd9b1aa9a 100644 --- a/src/client/components/url-preview-popup.vue +++ b/src/client/components/url-preview-popup.vue @@ -36,7 +36,7 @@ export default Vue.extend({ mounted() { const rect = this.source.getBoundingClientRect(); - const x = ((rect.left + (this.source.offsetWidth / 2)) - (300 / 2)) + window.pageXOffset; + const x = Math.max((rect.left + (this.source.offsetWidth / 2)) - (300 / 2), 6) + window.pageXOffset; const y = rect.top + this.source.offsetHeight + window.pageYOffset; this.top = y; @@ -50,6 +50,7 @@ export default Vue.extend({ position: absolute; z-index: 11000; width: 500px; + max-width: calc(90vw - 12px); overflow: hidden; pointer-events: none; } diff --git a/src/client/components/url.vue b/src/client/components/url.vue index 409bb128f6..4dd23a50ed 100644 --- a/src/client/components/url.vue +++ b/src/client/components/url.vue @@ -24,6 +24,7 @@ import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons'; import { toUnicode as decodePunycode } from 'punycode'; import { url as local } from '../config'; import MkUrlPreview from './url-preview-popup.vue'; +import { isDeviceTouch } from '../scripts/is-device-touch'; export default Vue.extend({ props: { @@ -92,11 +93,13 @@ export default Vue.extend({ } }, onMouseover() { + if (isDeviceTouch()) return; clearTimeout(this.showTimer); clearTimeout(this.hideTimer); this.showTimer = setTimeout(this.showPreview, 500); }, onMouseleave() { + if (isDeviceTouch()) return; clearTimeout(this.showTimer); clearTimeout(this.hideTimer); this.hideTimer = setTimeout(this.closePreview, 500); diff --git a/src/client/scripts/is-device-touch.ts b/src/client/scripts/is-device-touch.ts new file mode 100644 index 0000000000..9f439ae4fd --- /dev/null +++ b/src/client/scripts/is-device-touch.ts @@ -0,0 +1,3 @@ +export function isDeviceTouch(): boolean { + return 'maxTouchPoints' in navigator && navigator.maxTouchPoints > 0; +}