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

Refactor modal layout and add visit count to home page and log page

Browse source
This commit is contained in:
Sean Morley 2024-04-02 21:46:37 +00:00
parent f0894a964f
commit 302a59c86d
3 changed files with 37 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/lib/components/EditModal.svelte
View file

@ -43,17 +43,23 @@
<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
<h3 class="font-bold text-lg">Edit Adventure {originalName}</h3>
<p class="py-4">Press ESC key or click the button below to close</p>
<div class="modal-action">
<form method="dialog">
<label for="name">Name</label>
<input type="text" id="name" bind:value={editName} class="input input-bordered w-full max-w-xs" />
<label for="location">Location</label>
<input type="text" id="location" bind:value={editLocation} class="input input-bordered w-full max-w-xs" />
<label for="created">Created</label>
<input type="date" id="created" bind:value={editCreated} class="input input-bordered w-full max-w-xs" />
<button class="btn btn-primary" on:click={submit}>Save</button>
<div class="modal-action items-center" style="display: flex; flex-direction: column; align-items: center; width: 100%;">
<form method="dialog" style="width: 100%;">
<div>
<label for="name">Name</label>
<input type="text" id="name" bind:value={editName} class="input input-bordered w-full max-w-xs" />
</div>
<div>
<label for="location">Location</label>
<input type="text" id="location" bind:value={editLocation} class="input input-bordered w-full max-w-xs" />
</div>
<div>
<label for="created">Created</label>
<input type="date" id="created" bind:value={editCreated} class="input input-bordered w-full max-w-xs" />
</div>
<button class="btn btn-primary mr-4 mt-4" on:click={submit}>Save</button>
<!-- if there is a button in form, it will close the modal -->
<button class="btn" on:click={close}>Close</button>
<button class="btn mt-4" on:click={close}>Close</button>
</form>
</div>
</div>

16
src/routes/+page.svelte
View file

@ -1,6 +1,8 @@
<script lang="ts">
import { goto } from '$app/navigation';
import campingDrawing from "$lib/assets/camping.svg";
import { visitCount } from '$lib/utils/stores/visitCountStore';
async function navToLog() {
goto('/log');
}
@ -10,4 +12,16 @@
<article class="prose"><h1 class="mb-4">Welcome. Let's get Exploring!</h1></article>
<img src={campingDrawing} class="w-1/4 mb-4" alt="Logo" />
<button on:click={navToLog} class="btn btn-primary">Open Log</button>
</div>
<div class="stats shadow">
<div class="stat">
<div class="stat-title">Logged Adventures</div>
<div class="stat-value text-center">{$visitCount}</div>
<!-- <div class="stat-desc">21% more than last month</div> -->
</div>
</div>
</div>

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

@ -160,7 +160,12 @@
{/if}
{#if adventures.length != 0}
<div class="flex flex-row items-center justify-center mt-16 gap-4 mb-4">
<div class="flex justify-center items-center w-full mt-4">
<article class="prose">
<h2 class="text-center">Actions</h2>
</article>
</div>
<div class="flex flex-row items-center justify-center mt-2 gap-4 mb-4 flex-wrap">
<button class="btn btn-neutral" on:click={async () => { window.location.href = exportData(); }}>
<img src={exportFile} class="inline-block -mt-1" alt="Logo" /> Save as File
</button>