ruidy/meal_planner
1
0
Fork 0
mirror of https://github.com/rjNemo/meal_planner synced 2026-06-06 02:26:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

improve the layout

Browse source
This commit is contained in:
Ruidy 2024-12-13 13:27:15 +01:00
parent a9f4df0071
commit df158d3ff4
No known key found for this signature in database
GPG key ID: E00F51288CB857CC
1 changed files with 21 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
components/recipe/index.vue
View file

@ -5,23 +5,30 @@ defineProps<{ recipe: Recipe }>();
</script>
<template>
<div>
<div class="lg:flex space-y-4 lg:justify-evenly py-4">
<div class="card w-96 bg-base-100 shadow-xl mx-auto lg:mx-2 min-h-32">
<RecipeCard
:title="recipe.title"
:picture-url="recipe.pictureUrl"
:video-url="recipe.videoUrl"
:category="recipe.category"
:origin="recipe.origin"
/>
<div class="container mx-auto px-4 lg:px-8">
<div class="flex flex-col lg:flex-row lg:justify-start gap-6 py-4">
<div class="w-full lg:w-[480px]">
<div class="card bg-base-100 shadow-xl mx-auto lg:mx-0">
<RecipeCard
:title="recipe.title"
:picture-url="recipe.pictureUrl"
:video-url="recipe.videoUrl"
:category="recipe.category"
:origin="recipe.origin"
/>
</div>
</div>
<RecipeIngredients :ingredients="recipe.ingredients" />
<div class="w-full lg:w-[480px]">
<RecipeIngredients :ingredients="recipe.ingredients" />
</div>
</div>
<div class="flex flex-col items-center p-4">
<h2 class="prose lg:prose-xl">Instructions</h2>
<p class="prose">{{ recipe.instructions }}</p>
<div class="flex flex-col items-center py-6">
<h2 class="text-2xl lg:text-3xl font-semibold mb-4">Instructions</h2>
<div class="prose prose-lg max-w-none w-full">
{{ recipe.instructions }}
</div>
</div>
</div>
</template>