feat: show_tooltip based on platform & size

src/App.vue

@@ -46,6 +46,18 @@ const appUpdate = (): void => {
 	window.setTimeout(() => updateServiceWorker(), 4000);
 	
 };
+
+const platform = useDisplay().platform;
+
+watch(() => platform.value, (i) => {
+	browserStore.set_android_ios(i.ios || i.android);
+});
+
+onMounted(() => {
+	const platform = useDisplay().platform.value;
+	browserStore.set_android_ios(platform.ios || platform.android);
+});
+
 const browserStore = browserModule();
 
 const authenticated = computed((): boolean => {

src/components/Admin/AdminDeviceRow.vue

@@ -23,7 +23,7 @@
 
 		</v-col>
 		<v-col cols='1' class='cl ma-0 pa-0 text-right' @click='pauseDevice'>
-			<v-tooltip activator='parent' location='top center' content-class='tooltip'>
+			<v-tooltip v-if='show_tooltip' activator='parent' location='top center' content-class='tooltip'>
 				<span>click to {{ tooltip }}pause</span>
 			</v-tooltip>
 			<v-icon :icon='pause_icon' :color='bool_color(!device.device.paused)'/>
@@ -54,7 +54,7 @@
 					</v-col>
 					<v-col cols='3' class='ma-0 pa-0 cl' @click='close_connection(con_item.ulid, con_item.device_id, con_item.device_type)'>
 						ulid: {{ con_item.ulid }}
-						<v-tooltip activator='parent' location='top center' content-class='tooltip'>
+						<v-tooltip v-if='show_tooltip' activator='parent' location='top center' content-class='tooltip'>
 							<span>click to kill connection</span>
 						</v-tooltip>
 					</v-col>
@@ -77,6 +77,7 @@ import { mdiCheck, mdiChevronDown, mdiChevronUp, mdiClose, mdiDeleteCircle, mdiP
 import { snackSuccess } from '@/services/snack';
 import CopyButton from '@/components/Buttons/CopyButton.vue';
 import type { AdminDeviceAndConnections, TAuthObject } from '@/types';
+import { useDisplay } from 'vuetify';
 
 const show_connections = ref(false);
 const connections_icon = computed((): string => {
@@ -90,6 +91,11 @@ const click_connections = () : void => {
 	show_connections.value = !show_connections.value;
 };
 
+/// Don't show tooltips when on android or ios if also on mobile view!
+const show_tooltip = computed((): boolean => {
+	return !(browserModule().android_ios && useDisplay().mobile.value);
+});
+
 const loading = computed({
 	get (): boolean {
 		return loadingModule().loading;

src/components/Admin/AdminUserRow.vue

@@ -16,7 +16,7 @@
 						density='compact'
 						label=''
 					/>
-					<v-tooltip activator='parent' location='top center' v-if='disabled' content-class='tooltip'>
+					<v-tooltip v-if='show_tooltip' activator='parent' location='top center' v-if='disabled' content-class='tooltip'>
 						<span>can't disable self</span>
 					</v-tooltip>
 

src/components/Buttons/CopyButton.vue

@@ -2,7 +2,7 @@
 	<section>
 		<v-row class='ma-0 pa-0 no-gutters'>
 			<v-col cols='12' class='ma-0 pa-0'>
-				<v-tooltip activator='parent' location='top center' content-class='tooltip'>
+				<v-tooltip v-if='show_tooltip' activator='parent' location='top center' content-class='tooltip'>
 					<span v-intersect='onIntersect'>{{ message }}</span>
 				</v-tooltip>
 				<v-btn
@@ -38,7 +38,12 @@ const { smAndDown } = useDisplay();
 onBeforeUnmount(() => {
 	clearTimeout(tooltipTimeout.value);
 });
-	
+
+/// Don't show tooltips when on android or ios if also on mobile view!
+const show_tooltip = computed((): boolean => {
+	return !(browserModule().android_ios && useDisplay().mobile.value);
+});
+
 const iconSize = computed((): string => {
 	if (onMobile.value || props.xsmall) {
 		return 'x-small';

src/components/Buttons/DocumentationLink.vue

@@ -1,7 +1,7 @@
 <template>
 	<router-link :to='to' target='_blank'>
 		<v-icon :size='iconSize' color='primary' :icon='mdiLinkVariant' />
-		<v-tooltip activator='parent' location='top center' content-class='tooltip'>
+		<v-tooltip v-if='show_tooltip' activator='parent' location='top center' content-class='tooltip'>
 			<span> open documentation</span>
 		</v-tooltip>
 	</router-link>
@@ -10,6 +10,12 @@
 <script setup lang="ts">
 import { FrontEndRoutes } from '@/types/enum_routes';
 import { mdiLinkVariant } from '@mdi/js';
+import { useDisplay } from 'vuetify';
+
+/// Don't show tooltips when on android or ios if also on mobile view!
+const show_tooltip = computed((): boolean => {
+	return !(browserModule().android_ios && useDisplay().mobile.value);
+});
 
 const to = computed((): string =>{
 	return `${FrontEndRoutes.DOCUMENTATION}#${props.section}`;

src/components/Buttons/FabTooltip.vue

@@ -12,7 +12,7 @@
 				:icon='icon'
 				:size='iconSize'
 			/>
-			<v-tooltip v-if='tooltip_text' activator='parent' location='top center' content-class='tooltip'>
+			<v-tooltip v-if='show_tooltip' v-if='tooltip_text' activator='parent' location='top center' content-class='tooltip'>
 				<span>{{ tooltip_text }}</span>
 			</v-tooltip>
 		</v-btn>

src/components/Devices/AddDevice.vue

@@ -38,7 +38,7 @@
 									variant='outlined'
 									validate-on-blur
 								/>
-								<v-tooltip v-if='isFreeUser' activator='parent' location='top center' content-class='tooltip'>
+								<v-tooltip v-if='show_tooltip' v-if='isFreeUser' activator='parent' location='top center' content-class='tooltip'>
 									<span> Customisable name are not available to free users</span>
 								</v-tooltip>
 							</v-col>

src/components/Devices/AllDeviceTable/Cells/CellApiKey.vue

@@ -25,7 +25,7 @@
 					density='comfortable'
 				>
 					<v-icon color='pi' :icon='mdiAutorenew' />
-					<v-tooltip activator='parent' location='top center' content-class='tooltip'>
+					<v-tooltip v-if='show_tooltip' activator='parent' location='top center' content-class='tooltip'>
 						<span>regenerate api key</span>
 					</v-tooltip>
 				</v-btn>
@@ -55,7 +55,12 @@ import { useDisplay } from 'vuetify';
 import CopyButton from '@/components/Buttons/CopyButton.vue';
 import type { TAuthObject, TDeviceInfo, TJustify } from '@/types';
 
-const { mdAndUp } = useDisplay();
+const { mdAndUp, mobile } = useDisplay();
+
+/// Don't show tooltips when on android or ios if also on mobile view!
+const show_tooltip = computed((): boolean => {
+	return !(browserModule().android_ios && mobile.value);
+});
 
 const loading = computed({
 	get (): boolean {

src/components/Devices/AllDeviceTable/Cells/CellBandwidth.vue

@@ -4,7 +4,7 @@
 			<span  class='text-caption' :class='[bandwidthLimit_class, {"disabled": paused}]'>
 				{{ converted_bandwidth.total }} {{ converted_bandwidth.unit }}
 			</span>
-			<v-tooltip :disabled='device.paused'  activator='parent' location='top center' content-class='tooltip'>
+			<v-tooltip v-if='show_tooltip' :disabled='device.paused'  activator='parent' location='top center' content-class='tooltip'>
 				<span >{{ current_month_bytes }} bytes in {{ months[new Date().getMonth()] }}</span>
 			</v-tooltip>
 		</v-col>
@@ -17,7 +17,12 @@ import { months } from '@/vanillaTS/globalConst';
 import { useDisplay } from 'vuetify';
 import type { TConvertBytes, TDeviceInfo, TJustify } from '@/types';
 
-const { mdAndUp } = useDisplay();
+const { mdAndUp, mobile } = useDisplay();
+
+/// Don't show tooltips when on android or ios if also on mobile view!
+const show_tooltip = computed((): boolean => {
+	return !(browserModule().android_ios && mobile.value);
+});
 
 const converted_bandwidth = computed((): TConvertBytes => {
 	return convert_bytes(current_month_bytes.value);

src/components/Devices/AllDeviceTable/Cells/CellDeviceName.vue

@@ -25,7 +25,7 @@
 					single-line
 					validate-on-blur
 				/>
-				<v-tooltip v-if='isFreeUser' activator='parent' location='top center' content-class='tooltip'>
+				<v-tooltip v-if='show_tooltip' v-if='isFreeUser' activator='parent' location='top center' content-class='tooltip'>
 					<span >Free users cannot customise device name</span>
 				</v-tooltip>
 			</v-col>

src/components/Devices/AllDeviceTable/Cells/CellDevicePassword.vue

@@ -68,7 +68,7 @@
 
 				<section v-if='!showTextField'>
 					<v-row :justify='justify' >
-						<v-tooltip activator='parent' location='top center' content-class='tooltip' v-if='freeUser'>
+						<v-tooltip v-if='show_tooltip' activator='parent' location='top center' content-class='tooltip' v-if='freeUser'>
 							<span >Password authentication is not available for free user</span>
 						</v-tooltip>
 						<v-col cols='auto'>

src/components/Devices/AllDeviceTable/Cells/CellMaxClients.vue

@@ -2,7 +2,7 @@
 	<section>
 		<v-row align='center' :justify='justify' no-gutters class='pt-1'  >
 			<v-col cols='6' class='pa-0 ma-0' >
-				<v-tooltip :disabled='!freeUser' activator='parent' location='top center' content-class='tooltip'>
+				<v-tooltip v-if='show_tooltip' :disabled='!freeUser' activator='parent' location='top center' content-class='tooltip'>
 					<span >Free users are limited to 1 client</span>
 				</v-tooltip>
 
@@ -60,6 +60,12 @@ onBeforeMount(() => {
 	new_value.value = current_value.value;
 
 });
+
+/// Don't show tooltips when on android or ios if also on mobile view!
+const show_tooltip = computed((): boolean => {
+	return !(browserModule().android_ios && useDisplay().mobile.value);
+});
+
 const buttons = computed((): Array<TDeviceTableFields> => {
 	return [
 		{

src/components/Devices/AllDeviceTable/Cells/CellOnline.vue

@@ -2,7 +2,7 @@
 	<v-row align='center' :justify='justify' no-gutters class=''>
 		<v-col cols='auto' class='ma-0 pa-0'>
 
-			<v-tooltip activator='parent' location='top center' content-class='tooltip'>
+			<v-tooltip v-if='show_tooltip' activator='parent' location='top center' content-class='tooltip'>
 				<span> {{ tooltipText }}</span>
 			</v-tooltip>
 
@@ -23,6 +23,11 @@ import type { TDeviceInfo, TJustify } from '@/types';
 
 const { mdAndUp, smAndDown } = useDisplay();
 
+/// Don't show tooltips when on android or ios if also on mobile view!
+const show_tooltip = computed((): boolean => {
+	return !(browserModule().android_ios && useDisplay().mobile.value);
+});
+
 const tooltipText = computed((): string =>{
 	return timestamp_online.value && !timestamp_offline.value ? `online since ${timestamp_online.value.toLocaleString()}`: timestamp_online.value && timestamp_offline.value ? `offline since ${timestamp_offline.value.toLocaleString()}` : 'never connected';
 });

src/components/Devices/AllDeviceTable/Cells/CellStructuredData.vue

@@ -9,7 +9,7 @@
 					density='compact'
 					:error-messages='notSaved'
 				/>
-				<v-tooltip activator='parent' :disabled='device.paused' location='top center' content-class='tooltip'>
+				<v-tooltip v-if='show_tooltip' activator='parent' :disabled='device.paused' location='top center' content-class='tooltip'>
 					<span>{{ tooltipText }}</span>
 				</v-tooltip>
 
@@ -43,12 +43,17 @@ import { mdiContentSave, } from '@mdi/js';
 import { useDisplay } from 'vuetify';
 import type { TAuthObject, TSwitchButton, TDeviceInfo, TJustify } from '@/types';
 
-const { mdAndUp } = useDisplay();
+const { mdAndUp, mobile } = useDisplay();
 
 onBeforeMount(() => {
 	new_value.value = current_value.value;
 });
 
+/// Don't show tooltips when on android or ios if also on mobile view!
+const show_tooltip = computed((): boolean => {
+	return !(browserModule().android_ios && mobile.value);
+});
+
 const button = computed((): TSwitchButton => {
 	return {
 		color: 'primary',

src/components/Devices/AllDeviceTable/ExtraInformation/ExtraBandwidthDetailed.vue

@@ -40,22 +40,22 @@
 							<v-col class='ma-0 pa-0' cols='12' md='4'>
 
 								<ExtraBandwidthCell :unit='item[inner].out.unit' :total='item[inner].out.total' variety='out'/>
-								<v-tooltip activator='parent' location='top' content-class='tooltip'>
+								<v-tooltip v-if='show_tooltip' activator='parent' location='top' content-class='tooltip'>
 									<span>{{ item[inner].out.bytes }} bytes received {{ item.period }}</span>
 								</v-tooltip>
 							</v-col>
 
 							<v-col class='ma-0 pa-0' cols='12' md='4'>
 
 								<ExtraBandwidthCell :unit='item[inner].in.unit' :total='item[inner].in.total' variety='in'/>
-								<v-tooltip activator='parent' location='top' content-class='tooltip'>
+								<v-tooltip v-if='show_tooltip' activator='parent' location='top' content-class='tooltip'>
 									<span>{{ item[inner].in.bytes }} bytes sent {{ item.period }}</span>
 								</v-tooltip>
 							</v-col>
 
 							<v-col class='ma-0 pa-0' cols='12' md='4'>
 								<ExtraBandwidthCell :unit='item[inner].total.unit' :total='item[inner].total.total' variety='total' :borderRight='innerIndex === 2 ? false: true' />
-								<v-tooltip activator='parent'  location='top center' content-class='tooltip'>
+								<v-tooltip v-if='show_tooltip' activator='parent'  location='top center' content-class='tooltip'>
 									<span>{{ item[inner].total.bytes }} bytes sent + received {{ item.period }}</span>
 								</v-tooltip>
 							</v-col>
@@ -79,6 +79,11 @@ import type { TDeviceInfo, TExtraBandwidthDetailed } from '@/types';
 
 const { mobile } = useDisplay();
 
+/// Don't show tooltips when on android or ios if also on mobile view!
+const show_tooltip = computed((): boolean => {
+	return !(browserModule().android_ios && mobile.value);
+});
+
 const tableData = computed((): Array<TExtraBandwidthDetailed> => {
 	return [
 		{

src/components/Devices/AllDeviceTable/ExtraInformation/ExtraBandwidthSimple.vue

@@ -20,7 +20,7 @@
 						<v-row class='ma-0 pa-0 no-gutters' align='center' justify='end'>
 							<v-col class='ma-0 pa-0' cols='12' md='auto'>
 								<ExtraBandwidthCell :unit='item.unit' :total='item.total' variety='out' :borderRight='false'/>
-								<v-tooltip activator='parent' location='top center' content-class='tooltip'>
+								<v-tooltip v-if='show_tooltip' activator='parent' location='top center' content-class='tooltip'>
 									<span>{{ item.bytes }} bytes used {{ item.period }}</span>
 								</v-tooltip>
 							</v-col>
@@ -43,11 +43,16 @@ import type { TDeviceInfo, TExtraBandwidthSimple } from '@/types';
 
 const { mobile } = useDisplay();
 
+/// Don't show tooltips when on android or ios if also on mobile view!
+const show_tooltip = computed((): boolean => {
+	return !(browserModule().android_ios && mobile.value);
+});
+
 const tableData = computed((): Array<TExtraBandwidthSimple> =>{
 	return [
 		{
 			period: 'last 24 hours',
-			... convert_bytes(Number(props.device.pi_bytes_day_out) + Number(props.device.client_bytes_day_out)),
+			...convert_bytes(Number(props.device.pi_bytes_day_out) + Number(props.device.client_bytes_day_out)),
 			bytes: `${Number(props.device.pi_bytes_day_out) + Number(props.device.client_bytes_day_out)}`,
 		},
 		{
@@ -57,7 +62,7 @@ const tableData = computed((): Array<TExtraBandwidthSimple> =>{
 		},
 		{
 			period: 'all time',
-			... convert_bytes(Number(props.device.pi_bytes_total_out) + Number(props.device.client_bytes_total_out)),
+			...convert_bytes(Number(props.device.pi_bytes_total_out) + Number(props.device.client_bytes_total_out)),
 			bytes: `${Number(props.device.pi_bytes_total_out) + Number(props.device.client_bytes_total_out)}`,
 		},
 	];

src/components/Devices/AllDeviceTable/ExtraInformation/ExtraOnlineSince.vue

@@ -9,7 +9,7 @@
 				<v-col cols='auto' class='ma-0 pa-0'>
 					{{ text }}
 				</v-col>
-				<v-tooltip activator='parent' location='top center' content-class='tooltip'>
+				<v-tooltip v-if='show_tooltip' activator='parent' location='top center' content-class='tooltip'>
 					<span v-intersect='onIntersect'>connected for: {{ tooltipText }}</span>
 				</v-tooltip>
 			</v-row>
@@ -24,6 +24,11 @@ import { useDisplay } from 'vuetify';
 
 const { smAndDown } = useDisplay();
 
+/// Don't show tooltips when on android or ios if also on mobile view!
+const show_tooltip = computed((): boolean => {
+	return !(browserModule().android_ios && useDisplay().mobile.value);
+});
+
 onBeforeUnmount(() => {
 	clear();
 });

src/components/Devices/NumberOfDevices.vue

@@ -7,7 +7,7 @@
 			<span class='font-weight-bold' :class='text_size'>monthly bandwidth: </span>
 			<span :class='[bandwidthLimit_class, text_size]' >{{ converted_total.total }} {{ converted_total.unit }} / {{ converted_limit.total }} {{ converted_limit.unit }}</span>
 			<span class='ml-2 font-weight-medium' :class='[percentageClass, text_size]'>({{ used_percentage }}%)</span>
-			<v-tooltip activator='parent' location='top center' content-class='tooltip'>
+			<v-tooltip v-if='show_tooltip' activator='parent' location='top center' content-class='tooltip'>
 				<span>{{ totalBandwidth }} bytes in {{ thisMonth }}</span>
 			</v-tooltip>
 		</v-col>
@@ -20,9 +20,14 @@ import { months } from '@/vanillaTS/globalConst';
 import { useDisplay } from 'vuetify';
 import type { TConvertBytes } from '@/types';
 
-const { smAndDown } = useDisplay();
+const { smAndDown, mobile } = useDisplay();
 const [ deviceStore, userStore ] = [ deviceModule(), userModule() ];
 
+/// Don't show tooltips when on android or ios if also on mobile view!
+const show_tooltip = computed((): boolean => {
+	return !(browserModule().android_ios && mobile.value);
+});
+
 const bandwidthLimit_class = computed((): string => {
 	return Number(maxBandwidth.value) - Number(totalBandwidth.value) <= 0 ? 'text-pi font-weight-black' : '';
 });