mariosant/mariosant.dev
1
0
Fork 0
Code Issues Pull Requests Actions Activity

Update mobile layout in articles

Browse Source
This commit is contained in:
Marios Antonoudiou
2025-03-16 19:51:41 +02:00
parent 64afeb8091
commit d14e2b139e
1 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
pages/articles/index.vue
View File

@@ -16,23 +16,29 @@ const articles = useAsyncData("articles", async () => {
</UContainer> </UContainer>
<UContainer v-motion-fade :delay="500" class="grid grid-cols-12 gap-8"> <UContainer v-motion-fade :delay="500" class="grid grid-cols-12 gap-8">
<UCard class="col-span-6" v-for="article in articles.data.value"> <UCard
<div class="grid gap-4"> class="col-span-12 md:col-span-6"
:ui="{ body: { padding: '' } }"
v-for="article in articles.data.value"
>
<div class="grid gap-4 pb-4 md:pb-6">
<NuxtImg <NuxtImg
class="rounded rounded-lg cursor-pointer" class="rounded-t-lg cursor-pointer"
:src="article.coverImage.url" :src="article.coverImage.url"
@click="navigateTo(article.path)" @click="navigateTo(article.path)"
/> />
<div class="w-full"> <div class="w-full px-4 md:px-6">
<NuxtLink :to="article.path" class="font-semibold">{{ <NuxtLink
article.title :to="article.path"
}}</NuxtLink> class="font-semibold line-clamp-2 min-h-12"
>{{ article.title }}</NuxtLink
>
<div class="text-sm text-slate-500"> <div class="text-sm text-slate-500">
{{ formatDate(new Date(article.date), "Do of MMMM YYYY") }} {{ formatDate(new Date(article.date), "Do of MMMM YYYY") }}
</div> </div>
</div> </div>
<div> <div class="w-full px-4 md:px-6">
<UButton variant="soft" color="gray" :to="article.path" <UButton variant="soft" color="gray" :to="article.path"
>Read article</UButton >Read article</UButton
> >