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

chore: Add lazy loading for AdventureCard images

Browse source
This commit is contained in:
Sean Morley 2024-05-15 21:23:40 +00:00
parent f8f12e4ba3
commit 82f7101d90
1 changed files with 24 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/routes/trip/[id]/+page.svelte
View file

@ -5,6 +5,7 @@
import { goto } from "$app/navigation";
import CreateNewAdventure from "$lib/components/CreateNewAdventure.svelte";
import { addAdventure } from "../../../services/adventureService";
import AdventureCard from "$lib/components/AdventureCard.svelte";
export let data: PageData;
@ -17,6 +18,8 @@
onMount(() => {
if (data.trip.trip) {
trip = data.trip.trip[0];
adventuresPlans = data.trip.adventures;
console.log(adventuresPlans);
} else {
goto("/404");
}
@ -37,14 +40,30 @@
</script>
<main>
{#if trip}
<h1>{trip.name}</h1>
<p>{trip.description}</p>
<p>{trip.startDate}</p>
<p>{trip.endDate}</p>
{#if trip && trip.name}
<h1 class="text-center font-extrabold text-4xl mb-2">{trip.name}</h1>
{/if}
{#if trip && trip.description}
<p class="text-center text-lg mt-4 pl-16 pr-16">{trip.description}</p>
{/if}
{#if trip && trip.startDate}
<p class="text-center text-lg mt-4 pl-16 pr-16">
Start Date: {trip.startDate}
</p>
{/if}
{#if trip && trip.endDate}
<p class="text-center text-lg mt-4 pl-16 pr-16">End Date: {trip.endDate}</p>
{/if}
</main>
<div
class="grid xl:grid-cols-3 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-4 mt-4 content-center auto-cols-auto ml-6 mr-6"
>
{#each adventuresPlans as adventure (adventure.id)}
<AdventureCard {adventure} type="trip" />
{/each}
</div>
<div class="fixed bottom-4 right-4">
<div class="flex flex-row items-center justify-center gap-4">
<div class="dropdown dropdown-top dropdown-end">