Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-08-05 05:05:17 +02:00
Code Issues Releases Activity

Refactor adventure page layout and add dynamic content

Browse source
This commit is contained in:
Sean Morley 2024-04-27 20:40:33 +00:00
parent 62109a41a6
commit 64b4eafd34
1 changed files with 41 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -22,6 +22,45 @@
<span class="loading loading-spinner w-24 h-24"></span>
</div>
{:else}
<h1 class="text-center font-extrabold text-4xl">{adventure.name}</h1>
<p>{adventure.location}</p>
{#if adventure.name}
<h1 class="text-center font-extrabold text-4xl mb-2">{adventure.name}</h1>
{/if}
{#if adventure.location}
<p class="text-center text-2xl">
<iconify-icon icon="mdi:map-marker" class="text-xl -mb-0.5"
></iconify-icon>{adventure.location}
</p>
{/if}
{#if adventure.date}
<p class="text-center text-lg mt-4 pl-16 pr-16">
Visited on: {new Date(adventure.date).toLocaleDateString()}
</p>
{/if}
{#if adventure.rating !== undefined && adventure.rating !== null}
<div class="flex justify-center items-center">
<div class="rating" aria-readonly="true">
{#each Array.from({ length: 5 }, (_, i) => i + 1) as star}
<input
type="radio"
name="rating-1"
class="mask mask-star"
checked={star <= adventure.rating}
disabled
/>
{/each}
</div>
</div>
{/if}
{#if adventure.description}
<p class="text-center text-lg mt-4 pl-16 pr-16">{adventure.description}</p>
{/if}
{#if adventure.imageUrl}
<div class="flex content-center justify-center">
<img
src={adventure.imageUrl}
alt={adventure.name}
class="w-50 mt-4 align-middle rounded-lg shadow-lg"
/>
</div>
{/if}
{/if}