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

Add new SVG assets and update AdventureCard component

Browse source
This commit is contained in:
Sean Morley 2024-03-30 21:26:21 +00:00
parent 9ee5d67ab6
commit b1840006f0
4 changed files with 21 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/lib/assets/calendar.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14.25" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#ffffff" d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H64C28.7 64 0 92.7 0 128v16 48V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192 144 128c0-35.3-28.7-64-64-64H344V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H152V24zM48 192H400V448c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 547 B

1
src/lib/assets/locationDot.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12.5" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#ffffff" d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 439 B

44
src/lib/components/AdventureCard.svelte
View file

@ -1,5 +1,7 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
import locationDot from "$lib/assets/locationDot.svg";
import calendar from "$lib/assets/calendar.svg";
const dispatch = createEventDispatcher();
export let name:String;
@ -15,37 +17,15 @@
}
</script>
<div>
<!-- <p>ID: {id}</p> -->
<p>Name: {name}</p>
<p>Location: {location}</p>
<p>Created: {created}</p>
<button on:click={remove}>Remove</button>
<button on:click={edit}>Edit</button>
<div class="card min-w-max w-96 bg-neutral shadow-xl overflow-hidden">
<div class="card-body">
<h2 class="card-title overflow-ellipsis">{name}</h2>
<p><img src={locationDot} class="inline-block -mt-1 mr-1" alt="Logo" />{location}</p>
<p><img src={calendar} class="inline-block -mt-1 mr-1" alt="Logo" />{created}</p>
<div class="card-actions justify-end">
<button class="btn btn-primary" on:click={edit}>Edit</button>
<button class="btn btn-secondary" on:click={remove}>Remove</button>
</div>
</div>
</div>
<style>
div {
margin: 2rem;
padding: .5rem;
background-color: rgb(235, 230, 223);
border: 1px solid grey;
border-radius: .5rem;
box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.182);
}
button {
margin-left: 1rem;
padding: 0.5rem 1rem;
border: none;
border-radius: 4px;
background-color: #076836;
color: white;
cursor: pointer;
transition: background-color 0.3s ease;
box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
}
button:hover {
background-color: #074b28;
}
</style>

12
src/routes/log/+page.svelte
View file

@ -71,17 +71,19 @@
{#each adventures as adventure, i}
<div>
<div class="grid grid-cols-3 gap-4 mt-4 content-center auto-cols-auto ml-6">
{#each adventures as adventure (adventure.id)}
<AdventureCard id={adventure.id} name={adventure.name} location={adventure.location} created={adventure.created} on:remove={triggerRemoveAdventure} on:edit={editAdventure} />
</div>
{/each}
{/each}
</div>
{#if adventures.length == 0}
<div class="flex flex-col items-center justify-center mt-28">
<article class="prose mb-4"><h2>Add some adventures!</h2></article>
<img src={mapDrawing} width="25%" alt="Logo" />
</div >
</div>
{/if}