diff --git a/src/client/components/link.vue b/src/client/components/link.vue index 11de688520223a3ce8dfd42247903f949c905335..4c709375d3e98e35c44f8feaea4b5a6c32fbb995 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 938566e9e20f3a047d5ce2429a473cb1ea8a2b9a..acd9b1aa9ae1c7f76baa36f1463f74cc6d6dc241 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 409bb128f6d84fc7ce2fba11f3886dbcb479a4e5..4dd23a50ed70a27b9b9c942adfb79bdff6964110 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 0000000000000000000000000000000000000000..9f439ae4fdc394b6dfa5f3f1b7f561b6ce159bed --- /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; +}