Do not show tooltips on mobile

This commit is contained in:
2026-02-14 09:26:18 -05:00
parent fe616c06c3
commit 2176a49ce2
2 changed files with 33 additions and 1 deletions

Binary file not shown.

View File

@@ -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>