arthur/website
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/website.git synced 2026-01-24 08:50:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update talents mobile vision

Browse Source
This commit is contained in:
Arthur Danjou
2024-02-22 21:17:00 +01:00
parent ac255f528c
commit efebe682fd
1 changed files with 20 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/pages/talents.vue
View File

@@ -191,7 +191,7 @@ async function suggest() {
</div> </div>
<UDivider class="my-2" /> <UDivider class="my-2" />
<div v-if="talents && getCategories" class="mt-8 md:mt-16"> <div v-if="talents && getCategories" class="mt-8 md:mt-16">
<div v-if="talents.length > 0 && !pending" class="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3"> <div v-if="talents.length > 0 && !pending" class="grid grid-cols-1 gap-y-4 md:gap-x-12 md:gap-y-16 sm:grid-cols-2 lg:grid-cols-3">
<div <div
v-for="talent in talents" v-for="talent in talents"
:key="talent.name.toLowerCase().trim()" :key="talent.name.toLowerCase().trim()"
@@ -199,10 +199,10 @@ async function suggest() {
> >
<div class="flex"> <div class="flex">
<div class="flex gap-6 items-center"> <div class="flex gap-6 items-center">
<img :src="talent.logo" class="z-20 h-12 w-12 rounded-md"> <img :src="talent.logo" class="z-20 h-8 w-8 md:h-12 md:w-12 rounded-md">
<div> <div>
<h2 class="text-base font-semibold text-zinc-800 dark:text-zinc-100"> <h2 class="text-base font-semibold text-zinc-800 dark:text-zinc-100">
<div class="absolute -inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" /> <div class="absolute -inset-y-2 md:-inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" />
<NuxtLink :to="talent.website" target="_blank"> <NuxtLink :to="talent.website" target="_blank">
<span class="absolute -inset-y-6 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl" /> <span class="absolute -inset-y-6 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl" />
<div class="flex gap-2 items-center"> <div class="flex gap-2 items-center">
@@ -215,27 +215,29 @@ async function suggest() {
</div> </div>
</NuxtLink> </NuxtLink>
</h2> </h2>
<p class="relative z-10 my-2 text-sm text-zinc-600 dark:text-zinc-400"> <p class="relative z-10 text-sm text-zinc-600 dark:text-zinc-400">
{{ talent.work }} {{ talent.work }}
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<div class="flex gap-2 z-10"> <div class="flex items-center gap-4 mt-2">
<UBadge <p class="relative z-10 flex text-xs md:text-sm font-medium items-center" :class="getColor()">
v-for="category in talent.categories" <UIcon name="i-ph-link-bold" />
:key="category.category.slug" <span class="ml-2">{{ talent.website.replace('https://', '').replace('/', '') }}</span>
color="primary" </p>
variant="soft" <div class="flex gap-2 z-10 flex-wrap">
size="xs" <UBadge
> v-for="category in talent.categories"
{{ category.category.name }} :key="category.category.slug"
</UBadge> color="primary"
variant="soft"
size="xs"
>
{{ category.category.name }}
</UBadge>
</div>
</div> </div>
<p class="relative z-10 mt-4 flex text-sm font-medium items-center" :class="getColor()">
<UIcon name="i-ph-link-bold" />
<span class="ml-2">{{ talent.website.replace('https://', '').replace('/', '') }}</span>
</p>
</div> </div>
</div> </div>
<div v-else-if="talents?.length === 0 && !pending" class="my-4 text-subtitle"> <div v-else-if="talents?.length === 0 && !pending" class="my-4 text-subtitle">