breadone/Recipie
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[PIE-8] Add recipe detail view #6

Merged
breadone merged 17 commits from PIE-8 into main 2025-08-13 16:54:06 +12:00
Conversation 0 Commits 17 Files Changed 15 +15 -13
5 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4f08b122e6 - Show all commits

8
src/components/Card/OverviewCard.astro
View File

@ -8,15 +8,15 @@ const headerImage = await client.collection("images").getOne(recipe.images[0])
const image = await client.files.getURL(headerImage, headerImage.image)
---
<div class="relative z-0 flex h-60">
<div class="relative z-0 flex h-50">
<img
class="w-full h-full object-cover rounded-xl"
src={ image }
/>
<div id="bottom-info-panel" class="absolute bottom-0 left-0 w-full p-2 h-25 backdrop-filter backdrop-blur-lg rounded-b-xl z-1">
<p id="recipe-name" class="text-[14pt] text-white opacity-90 font-bold" >{recipe.name}</p>
<p id="recipe-desc" class="text-white text-[10pt]"> {recipe.description} </p>
<div id="bottom-info-panel" class="absolute bottom-0 left-0 w-full p-2 h-20 backdrop-filter backdrop-blur-lg rounded-b-xl z-1">
<p id="recipe-name" class="text-[14pt] text-white opacity-90 font-bold line-clamp-1" >{recipe.name}</p>
<!-- <p id="recipe-desc" class="text-white text-[10pt]"> {recipe.description} </p> -->
<div id="tag-row" class="">
<TagRow tagIds={recipe.tags}/>

9
src/components/Header.astro
View File

@ -1,13 +1,14 @@
<div class="flex w-full items-center bg-yellow-100 p-5">
<div class="flex w-full items-center bg-yellow-200 text-black p-5">
<a class="flex" href="/">
<p class="text-3xl">Recipie</p>
<!-- <p class=" text-3xl text-amber-500">pie</p> -->
🥧
</a>
<div class="flex ml-10 space-x-5">
<!-- <span>new</span>
<span>sf</span> -->
<div class="ml-auto space-x-5">
<a>new</a>
<a>tags</a>
<a>search</a>
</div>
</div>

2
src/layouts/base.astro
View File

@ -10,7 +10,7 @@ import Header from "@/components/Header";
<body>
<main id="main" class="flex-1">
<Header/>
<div class="px-5 pt-2">
<div class="px-3 md:px-5 pt-2">
<slot />
</div>
</main>

2
src/pages/index.astro
View File

@ -9,7 +9,7 @@ const recipies = await client.collection("recipes").getFullList()
<PageLayout>
<!-- <p class="pb-2">What would you like today?</p> -->
<div class="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
<div class="grid md:gap-2 gap-3 grid-cols-2 md:grid-cols-2 lg:grid-cols-4">
{
recipies.map(r => (
<OverviewCard recipe={r} />

5
src/styles/global.css
View File

@ -1,7 +1,8 @@
@import "tailwindcss";
html {
/* @apply bg-[#1d1f21]; */
@apply bg-[#fafafa];
@apply bg-[#1d1f21];
/* @apply bg-[#fafafa]; */
@apply text-white;
@apply font-stretch-condensed;
}