ruidy/meal_planner
1
0
Fork 0
mirror of https://github.com/rjNemo/meal_planner synced 2026-06-12 13:26:45 +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

19
components/recipe/index.vue
View file

@ -5,9 +5,10 @@ defineProps<{ recipe: Recipe }>();
</script> </script>
<template> <template>
<div> <div class="container mx-auto px-4 lg:px-8">
<div class="lg:flex space-y-4 lg:justify-evenly py-4"> <div class="flex flex-col lg:flex-row lg:justify-start gap-6 py-4">
<div class="card w-96 bg-base-100 shadow-xl mx-auto lg:mx-2 min-h-32"> <div class="w-full lg:w-[480px]">
<div class="card bg-base-100 shadow-xl mx-auto lg:mx-0">
<RecipeCard <RecipeCard
:title="recipe.title" :title="recipe.title"
:picture-url="recipe.pictureUrl" :picture-url="recipe.pictureUrl"
@ -16,12 +17,18 @@ defineProps<{ recipe: Recipe }>();
:origin="recipe.origin" :origin="recipe.origin"
/> />
</div> </div>
</div>
<div class="w-full lg:w-[480px]">
<RecipeIngredients :ingredients="recipe.ingredients" /> <RecipeIngredients :ingredients="recipe.ingredients" />
</div> </div>
<div class="flex flex-col items-center p-4"> </div>
<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>
</div> </div>
</template> </template>