Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-20 21:39:37 +02:00
Code Issues Releases Activity

adventure view

Browse source
This commit is contained in:
Sean Morley 2024-08-17 17:22:01 -04:00
parent 620c7298a9
commit d552c50349
2 changed files with 42 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/lib/components/AdventureCard.svelte
View file

@ -131,14 +131,6 @@
let currentSlide = 0;
function nextSlide() {
currentSlide = (currentSlide + 1) % adventure.images.length;
}
function prevSlide() {
currentSlide = (currentSlide - 1 + adventure.images.length) % adventure.images.length;
}
function goToSlide(index: number) {
currentSlide = index;
}

43
frontend/src/routes/adventures/[id]/+page.svelte
View file

@ -26,6 +26,12 @@
let adventure: Adventure;
let currentSlide = 0;
function goToSlide(index: number) {
currentSlide = index;
}
let notFound: boolean = false;
let isEditModalOpen: boolean = false;
@ -92,7 +98,7 @@
<main class="flex-1">
<div class="max-w-5xl mx-auto p-4 md:p-6 lg:p-8">
<div class="grid gap-8">
{#if adventure.images && adventure.images.length > 0}
<!-- {#if adventure.images && adventure.images.length > 0}
<div>
<img
src={adventure.images[0].image}
@ -103,7 +109,42 @@
style="aspect-ratio: 1200 / 600; object-fit: cover;"
/>
</div>
{/if} -->
{#if adventure.images && adventure.images.length > 0}
<div class="carousel w-full">
{#each adventure.images as image, i}
<div
class="carousel-item w-full"
style="display: {i === currentSlide ? 'block' : 'none'}"
>
<img
src={image.image}
width="1200"
height="600"
class="w-full h-auto object-cover rounded-lg"
style="aspect-ratio: 1200 / 600; object-fit: cover;"
alt={adventure.name}
/>
<div class="flex justify-center w-full py-2 gap-2">
{#each adventure.images as _, i}
<button
on:click={() => goToSlide(i)}
class="btn btn-xs {i === currentSlide ? 'btn-active' : ''}">{i + 1}</button
>
{/each}
</div>
</div>
{/each}
</div>
{:else}
<!-- svelte-ignore a11y-img-redundant-alt -->
<img
src={'https://placehold.co/300?text=No%20Image%20Found&font=roboto'}
alt="No image available"
class="w-full h-48 object-cover"
/>
{/if}
<div class="grid gap-4">
<div class="flex items-center justify-between">
<div>