mirror of
https://github.com/rjNemo/meal_planner
synced 2026-06-06 02:26:49 +00:00
refactor: Remove header, set responsive card heights, and add description ellipsis
This commit is contained in:
parent
ed3d1bc853
commit
296b2048e9
1 changed files with 2 additions and 4 deletions
|
|
@ -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}`"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue