Skip to content

Commit

Permalink
feat: make full probe div a link on mobile view
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexey-yarmosh
alexey-yarmosh committed Oct 15, 2024
1 parent f70adf8 commit 58e8908
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 45 deletions.
45 changes: 24 additions & 21 deletions pages/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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';
Expand Down Expand Up @@ -243,7 +246,7 @@
border-left-width: 1px;
}
@media (max-width: 640px) {
@media (max-width: 639px) {
.probe + .probe {
margin-left: 0;
padding-left: 0;
Expand Down
50 changes: 26 additions & 24 deletions pages/probes.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,31 +99,33 @@
<AsyncBlock :status="loading ? 'pending' : 'success'">
<div class="px-4 pb-3 pt-1">
<div v-if="probes.length">
<NuxtLink v-for="probe in probes" :key="probe.id" :to="`/probes/${probe.id}`" class="probe box-content block pb-2 pt-4" @click="openProbeDetails(probe.id)">
<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">
<p>{{ probe.name || probe.city }}</p>
<div v-for="probe in probes" :key="probe.id" class="probe box-content block pb-2 pt-4">
<NuxtLink :to="`/probes/${probe.id}`" @click="openProbeDetails(probe.id)">
<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">
<p>{{ probe.name || probe.city }}</p>
</div>
<p class="col-start-2 col-end-3 max-w-full overflow-hidden text-ellipsis text-[13px] text-bluegray-400">{{ probe.ip }}</p>
</div>
<p class="col-start-2 col-end-3 max-w-full 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 justify-between text-nowrap">
<span class="mr-6 font-semibold">Version:</span>
<span>{{ probe.version }}</span>
</div>
<div ref="mobileTagsWrapperRef">
<TagsList :tags="getAllTags(probe)" :number-of-tags-to-show="numberOfTagsToShowMobile"/>
<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 ref="mobileTagsWrapperRef">
<TagsList :tags="getAllTags(probe)" :number-of-tags-to-show="numberOfTagsToShowMobile"/>
</div>
</div>
</div>
</NuxtLink>
</NuxtLink>
</div>
</div>
<div class="rounded-xl bg-gradient-to-r from-[#F4FCF7] to-[#E5FCF6] p-3 dark:from-dark-700 dark:to-dark-700">
<div class="flex items-center justify-between">
Expand Down Expand Up @@ -391,7 +393,7 @@
</script>

<style scoped>
@media (max-width: 640px) {
@media (max-width: 639px) {
.probe + .probe {
@apply border-t;
}
Expand Down

0 comments on commit 58e8908

Please sign in to comment.