refactor: Remove header, set responsive card heights, and add description ellipsis

This commit is contained in:
Ruidy (aider) 2024-12-14 15:24:48 +01:00 committed by Ruidy
parent ed3d1bc853
commit 296b2048e9
No known key found for this signature in database
GPG key ID: E00F51288CB857CC

View file

@ -11,8 +11,6 @@ if (error.value) {
<template> <template>
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<h1 class="text-4xl font-bold mb-8 text-center">Recipe Categories</h1>
<div v-if="status === 'pending'" class="flex justify-center my-8"> <div v-if="status === 'pending'" class="flex justify-center my-8">
<span class="loading loading-spinner loading-lg text-primary" /> <span class="loading loading-spinner loading-lg text-primary" />
</div> </div>
@ -25,14 +23,14 @@ if (error.value) {
<div <div
v-for="category in categories" v-for="category in categories"
:key="category.strCategory" :key="category.strCategory"
class="card bg-base-100 shadow-xl" class="card bg-base-100 shadow-xl h-[28rem] sm:h-[32rem] md:h-[36rem] lg:h-[32rem]"
> >
<figure> <figure>
<img :src="category.strCategoryThumb" :alt="category.strCategory" /> <img :src="category.strCategoryThumb" :alt="category.strCategory" />
</figure> </figure>
<div class="card-body"> <div class="card-body">
<h2 class="card-title">{{ category.strCategory }}</h2> <h2 class="card-title">{{ category.strCategory }}</h2>
<p>{{ category.strCategoryDescription }}</p> <p class="line-clamp-6 text-sm">{{ category.strCategoryDescription }}</p>
<div class="card-actions justify-end"> <div class="card-actions justify-end">
<nuxt-link <nuxt-link
:to="`/category/${category.strCategory}`" :to="`/category/${category.strCategory}`"