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

Dont show image cycle buttons, optimise header method

Browse Source
This commit is contained in:
June
2025-11-17 15:45:15 +13:00
parent 2f8ceef0ed
commit c08f0a5d4a
2 changed files with 30 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
web/src/components/Header.astro
View File

@@ -1,15 +1,35 @@
---
const links = [
{
txt: "new",
lnk: "/recipe/new"
},
{
txt: "add",
lnk: "/recipe/import"
},
{
txt: "tags",
lnk: "/tags"
},
{
txt: "search",
lnk: "/search"
},
]
---
<div class="flex w-full items-center bg-[#2a2b2c] text-white p-5"> <div class="flex w-full items-center bg-[#2a2b2c] text-white p-5">
<a class="flex" href="/"> <a class="flex" href="/">
<p class="text-3xl">Recipie</p> <p class="text-3xl">Recipie</p>
<!-- <p class=" text-3xl text-amber-500">pie</p> -->
🥧 🥧
</a> </a>
<div class="ml-auto space-x-5"> <div class="ml-auto space-x-5">
<a class="hover:underline underline-offset-4" href="/recipe/new">new</a> {
<a class="hover:underline underline-offset-4" href="/recipe/import">add</a> links.map(({txt, lnk}) => (
<!-- <a class="hover:underline underline-offset-4" href="/tags">tags</a> --> <a class="hover:underline underline-offset-4" href={lnk}>{txt}</a>
<a class="hover:underline underline-offset-4" >search</a> ))
}
</div> </div>
</div> </div>

10
web/src/components/detail/ImageCarousel.astro
View File

@@ -11,12 +11,12 @@ const { class: className, images } = Astro.props
const cap = links.length - 1; const cap = links.length - 1;
const img = document.getElementById('carousel-img') as HTMLImageElement; const img = document.getElementById('carousel-img') as HTMLImageElement;
if (cap == 0) { if (cap > 0) {
const b0 = document.getElementById('dec-button') const b0 = document.getElementById('dec-button')
const b1 = document.getElementById('inc-button') const b1 = document.getElementById('inc-button')
b0!.hidden = true b0!.hidden = false
b1!.hidden = true b1!.hidden = false
} }
function inc() { function inc() {
@@ -39,9 +39,9 @@ const { class: className, images } = Astro.props
<div class="hidden" id="carousel-data">{JSON.stringify(images)}</div> <div class="hidden" id="carousel-data">{JSON.stringify(images)}</div>
<div class="relative flex items-center w-full h-60"> <div class="relative flex items-center w-full h-60">
<button id="dec-button" class="absolute left-2" onclick="dec()">&lt;</button> <button id="dec-button" class="hidden absolute left-2" onclick="dec()">&lt;</button>
<img id="carousel-img" class="rounded-lg w-full h-full object-cover" src={images[0]} /> <img id="carousel-img" class="rounded-lg w-full h-full object-cover" src={images[0]} />
<!-- <div class="w-70 h-60 bg-green-600" /> --> <!-- <div class="w-70 h-60 bg-green-600" /> -->
<button id="inc-button" class="absolute right-2" onclick="inc()">&gt;</button> <button id="inc-button" class="hidden absolute right-2" onclick="inc()">&gt;</button>
</div> </div>
</div> </div>