feat: /probes mobile view (#42)

jsdelivr · Oct 16, 2024 · 0a042c9 · 0a042c9
1 parent db164c5
commit 0a042c9
Show file tree

Hide file tree

Showing 7 changed files with 220 additions and 132 deletions.
diff --git a/components/AdoptProbe.vue b/components/AdoptProbe.vue
@@ -126,11 +126,8 @@
 						</p>
 						<p class="mt-4 text-center">You are now the owner of the following probe:</p>
 						<div v-if="probe" class="mt-4 rounded-xl border bg-surface-0 p-3 text-center dark:border-dark-400 dark:bg-dark-800">
-							<p class="font-bold">{{ probe.city }}</p>
-							<p class="flex items-center justify-center">
-								<CountryFlag :country="probe.country" size="small"/>
-								<span class="ml-2">{{ probe.network }}</span>
-							</p>
+							<p class="flex items-center justify-center font-bold"><CountryFlag :country="probe.country" size="small"/><span class="ml-2">{{ probe.city }}</span></p>
+							<p>{{ probe.network }}</p>
 						</div>
 					</div>
 					<p class="mt-4">The probe will generate credits that you can use to run more tests. We also recommend you verify and correct the probe's location.</p>

diff --git a/components/ReadOnlyAutoComplete.vue b/components/ReadOnlyAutoComplete.vue
@@ -4,10 +4,15 @@
 		chip-icon="hidden"
 		multiple
 		disabled
-		:pt="merge(pt, {
-			// Tabindex should be unset, otherwise Copying of the selected value is not working.
-			inputMultiple: {tabindex: ''},
-		})"
+		:pt="merge({
+			inputChip: { class: 'hidden' },
+			inputMultiple: {
+				class: 'pb-1 pr-9 min-h-10',
+				// Tabindex should be unset, otherwise Copying of the selected value is not working.
+				tabindex: ''
+			},
+			chipItem: { class: 'mt-1' },
+		}, pt)"
 		:pt-options="{ mergeProps: true }"
 		:typeahead="false"
 	/>
@@ -20,6 +25,8 @@
 		pt: {
 			type: Object as PropType<{
 				inputMultiple?: Record<string, unknown>,
+				inputChip?: Record<string, unknown>,
+				chipItem?: Record<string, unknown>,
 				[field: string]: unknown
 			}>,
 			default: () => ({}),

diff --git a/components/TagsList.vue b/components/TagsList.vue
@@ -0,0 +1,26 @@
+<template>
+	<div class="flex h-full flex-wrap items-center">
+		<Tag v-for="tag in tags.slice(0, numberOfTagsToShow)" :key="tag" class="my-0.5 mr-1 flex text-nowrap bg-surface-0 py-0.5 font-normal dark:bg-dark-800" severity="secondary" :value="tag"/>
+		<Tag
+			v-if="tags.length > numberOfTagsToShow"
+			key="other"
+			v-tooltip.top="tags.slice(numberOfTagsToShow).join(', ')"
+			class="my-0.5 mr-1 flex text-nowrap bg-surface-0 py-0.5 font-normal dark:bg-dark-800"
+			severity="secondary"
+			:value="`+${tags.length - numberOfTagsToShow}`"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+	defineProps({
+		tags: {
+			type: Array as PropType<string[]>,
+			default: () => [],
+		},
+		numberOfTagsToShow: {
+			type: Number,
+			default: 5,
+		},
+	});
+</script>
diff --git a/pages/index.vue b/pages/index.vue
@@ -106,28 +106,30 @@
 				<div class="p-6">
 					<div v-if="adoptedProbes.length" class="probes-wrapper flex overflow-hidden max-sm:flex-col">
 						<div v-for="probe in adoptedProbes.slice(0, 10)" :key="probe.id" class="probe box-content min-w-60 py-2">
-							<div class="mb-6 grid grid-cols-[auto_1fr] grid-rows-[auto_auto] gap-x-3">
-								<BigIcon class="col-span-1 row-span-2" :name="probe.hardwareDevice ? 'gp' : 'docker'" border :status="probe.status"/>
-								<div
-									class="col-start-2 col-end-3 flex items-center font-bold"
-								>
-									<NuxtLink class="hover:underline" :to="`/probes/${probe.id}`">{{ probe.name || probe.city }}</NuxtLink>
+							<component :is="useWindowSize().width.value > 640 ? 'div' : NuxtLink" :to="`/probes/${probe.id}`" class="block">
+								<div class="mb-6 grid grid-cols-[auto_1fr] grid-rows-[auto_auto] gap-x-3">
+									<BigIcon class="col-span-1 row-span-2" :name="probe.hardwareDevice ? 'gp' : 'docker'" border :status="probe.status"/>
+									<div
+										class="col-start-2 col-end-3 flex items-center font-bold"
+									>
+										<NuxtLink class="hover:underline" :to="`/probes/${probe.id}`">{{ probe.name || probe.city }}</NuxtLink>
+									</div>
+									<p class="col-start-2 col-end-3 row-start-2 row-end-3 max-w-[185px] overflow-hidden text-ellipsis text-[13px] text-bluegray-400">{{ probe.ip }}</p>
 								</div>
-								<p class="col-start-2 col-end-3 row-start-2 row-end-3 max-w-[185px] overflow-hidden text-ellipsis text-[13px] text-bluegray-400">{{ probe.ip }}</p>
-							</div>
-							<div>
-								<div class="mb-2 flex items-center text-nowrap">
-									<span class="mr-6 font-semibold">Location:</span>
-									<span class="ml-auto mr-2 flex items-center justify-end">
-										{{ probe.city }}, {{ probe.country }}
-									</span>
-									<CountryFlag :country="probe.country" size="small"/>
+								<div>
+									<div class="mb-2 flex items-center text-nowrap">
+										<span class="mr-6 font-semibold">Location:</span>
+										<span class="ml-auto mr-2 flex items-center justify-end">
+											{{ probe.city }}, {{ probe.country }}
+										</span>
+										<CountryFlag :country="probe.country" size="small"/>
+									</div>
+									<div class="mb-2 flex items-center justify-between text-nowrap">
+										<span class="mr-6 font-semibold">Version:</span>
+										<span>{{ probe.version }}</span>
+									</div>
 								</div>
-								<div class="mb-2 flex items-center justify-between text-nowrap">
-									<span class="mr-6 font-semibold">Version:</span>
-									<span>{{ probe.version }}</span>
-								</div>
-							</div>
+							</component>
 						</div>
 					</div>
 					<div v-if="!adoptedProbes.length" class="flex rounded-xl bg-surface-50 p-6 max-sm:flex-col max-sm:items-center dark:bg-dark-600">
@@ -153,6 +155,7 @@
 </template>
 
 <script setup lang="ts">
+	import { NuxtLink } from '#components';
 	import { readItems } from '@directus/sdk';
 	import countBy from 'lodash/countBy';
 	import isEmpty from 'lodash/isEmpty';
@@ -243,7 +246,7 @@
 		border-left-width: 1px;
 	}
 
-	@media (max-width: 640px) {
+	@media (max-width: 639.99px) {
 		.probe + .probe {
 			margin-left: 0;
 			padding-left: 0;