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

chore: Refactor CollectionCard component and improve dropdown menu styling

Browse source
This commit is contained in:
Sean Morley 2024-08-17 17:34:52 -04:00
parent d552c50349
commit c35795144e
3 changed files with 55 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

11
frontend/src/lib/components/CollectionCard.svelte
View file

@ -112,6 +112,11 @@
</p>{/if}
<div class="card-actions justify-end">
{#if type == 'link'}
<button class="btn btn-primary" on:click={() => dispatch('link', collection.id)}>
<Plus class="w-5 h-5 mr-1" />
</button>
{:else}
<div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="btn btn-neutral">
<DotsHorizontal class="w-6 h-6" />
@ -149,13 +154,9 @@
><TrashCan class="w-6 h-6" />Delete</button
>
{/if}
{#if type == 'link'}
<button class="btn btn-primary" on:click={() => dispatch('link', collection.id)}>
<Plus class="w-5 h-5 mr-1" />
</button>
{/if}
</ul>
</div>
{/if}
</div>
</div>
</div>

11
frontend/src/lib/components/EditAdventure.svelte
View file

@ -32,6 +32,17 @@
images = adventureToEdit.images || [];
if (adventureToEdit.longitude && adventureToEdit.latitude) {
markers = [
{
lngLat: { lng: adventureToEdit.longitude, lat: adventureToEdit.latitude },
location: adventureToEdit.location || '',
name: adventureToEdit.name,
activity_type: ''
}
];
}
if (longitude && latitude) {
adventureToEdit.latitude = latitude;
adventureToEdit.longitude = longitude;

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

@ -98,18 +98,6 @@
<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}
<div>
<img
src={adventure.images[0].image}
alt={adventure.name}
width="1200"
height="600"
class="w-full h-auto object-cover rounded-lg"
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}
@ -136,21 +124,12 @@
</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>
<h1 class="text-4xl mt-2 font-bold">{adventure.name}</h1>
</div>
<div class="flex items-center gap-1">
{#if adventure.rating !== undefined && adventure.rating !== null}
<div class="flex justify-center items-center">