mirror of
https://github.com/davegallant/rfd-fyi.git
synced 2026-03-03 09:36:35 +00:00
Do not show tooltips on mobile
This commit is contained in:
BIN
backend/rfd-fyi
BIN
backend/rfd-fyi
Binary file not shown.
34
src/App.vue
34
src/App.vue
@@ -22,16 +22,38 @@ export default {
|
|||||||
tooltipData: {},
|
tooltipData: {},
|
||||||
loadingTooltip: {},
|
loadingTooltip: {},
|
||||||
tooltipPosition: { x: 0, y: 0 },
|
tooltipPosition: { x: 0, y: 0 },
|
||||||
|
isMobile: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
window.addEventListener("keydown", this.handleKeyDown);
|
window.addEventListener("keydown", this.handleKeyDown);
|
||||||
|
this.detectMobile();
|
||||||
this.fetchDeals();
|
this.fetchDeals();
|
||||||
},
|
},
|
||||||
beforeUnmount() {
|
beforeUnmount() {
|
||||||
window.removeEventListener("keydown", this.handleKeyDown);
|
window.removeEventListener("keydown", this.handleKeyDown);
|
||||||
|
window.removeEventListener("resize", this.detectMobile);
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
detectMobile() {
|
||||||
|
// Detect if device is mobile/tablet based on touch capability and screen size
|
||||||
|
const hasTouch = () => {
|
||||||
|
return (
|
||||||
|
(typeof window !== "undefined" &&
|
||||||
|
("ontouchstart" in window ||
|
||||||
|
navigator.maxTouchPoints > 0 ||
|
||||||
|
navigator.msMaxTouchPoints > 0)) ||
|
||||||
|
false
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const isMobileScreen = () => {
|
||||||
|
return window.innerWidth <= 1024;
|
||||||
|
};
|
||||||
|
|
||||||
|
this.isMobile = hasTouch() || isMobileScreen();
|
||||||
|
window.addEventListener("resize", this.detectMobile);
|
||||||
|
},
|
||||||
handleKeyDown(event) {
|
handleKeyDown(event) {
|
||||||
const isInput = ["INPUT", "TEXTAREA"].includes(
|
const isInput = ["INPUT", "TEXTAREA"].includes(
|
||||||
document.activeElement.tagName
|
document.activeElement.tagName
|
||||||
@@ -42,6 +64,10 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
handleTitleHover(topic, event) {
|
handleTitleHover(topic, event) {
|
||||||
|
// Don't load tooltips on mobile devices
|
||||||
|
if (this.isMobile) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
this.hoveredTopicId = topic.topic_id;
|
this.hoveredTopicId = topic.topic_id;
|
||||||
this.tooltipPosition = {
|
this.tooltipPosition = {
|
||||||
x: event.clientX,
|
x: event.clientX,
|
||||||
@@ -50,9 +76,15 @@ export default {
|
|||||||
this.loadTopicDetails(topic.topic_id);
|
this.loadTopicDetails(topic.topic_id);
|
||||||
},
|
},
|
||||||
handleTitleLeave() {
|
handleTitleLeave() {
|
||||||
|
if (this.isMobile) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
this.hoveredTopicId = null;
|
this.hoveredTopicId = null;
|
||||||
},
|
},
|
||||||
handleMouseMove(event) {
|
handleMouseMove(event) {
|
||||||
|
if (this.isMobile) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
if (this.hoveredTopicId !== null) {
|
if (this.hoveredTopicId !== null) {
|
||||||
this.tooltipPosition = {
|
this.tooltipPosition = {
|
||||||
x: event.clientX,
|
x: event.clientX,
|
||||||
@@ -183,7 +215,7 @@ const sortBy = ref([{ key: "score", order: "desc" }]); // Vuetify 3 format
|
|||||||
@mousemove="handleMouseMove"
|
@mousemove="handleMouseMove"
|
||||||
v-html="
|
v-html="
|
||||||
highlightMatches(
|
highlightMatches(
|
||||||
item.title + ' [' + item.Offer.dealer_name + '] '
|
item.title
|
||||||
)
|
)
|
||||||
"
|
"
|
||||||
></a>
|
></a>
|
||||||
|
|||||||
Reference in New Issue
Block a user