Merge pull request #7 from seanmorley15/development

Development

src/lib/components/AdventureCard.svelte

@@ -17,7 +17,7 @@
     }
 </script>
 
-<div class="card min-w-max w-96 bg-neutral shadow-xl overflow-hidden">
+<div class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 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>

src/lib/components/EditModal.svelte

@@ -9,6 +9,8 @@
         import { onMount } from 'svelte';
         let modal: HTMLDialogElement;
 
+        let originalName = editName;
+
         onMount(() => {
                 modal = document.getElementById("my_modal_1") as HTMLDialogElement;
                 if (modal) {
@@ -27,11 +29,19 @@
     function close() {
         dispatch('close');
     }
+
+    function handleKeydown(event: KeyboardEvent) {
+        if (event.key === 'Escape') {
+            close();
+        }
+    }
 </script>
 
-<dialog id="my_modal_1" class="modal">
-    <div class="modal-box">
-        <h3 class="font-bold text-lg">Edit Adventure {editName}</h3>
+<dialog id="my_modal_1" class="modal" >
+    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+    <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+    <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">

src/lib/components/Navbar.svelte

@@ -9,15 +9,15 @@
         goto('/log');
     }
 </script>
-<div class="navbar bg-base-100">
-    <div class="navbar-start">
-        <button class="btn btn-primary mr-4 ml-2" on:click={goHome}>Home</button>
-        <button class="btn btn-primary" on:click={goToLog}>My Log</button>
+<div class="navbar bg-base-100 flex flex-col md:flex-row">
+    <div class="navbar-start flex justify-around md:justify-start">
+        <button class="btn btn-primary my-2 md:my-0 md:mr-4 md:ml-2" on:click={goHome}>Home</button>
+        <button class="btn btn-primary my-2 md:my-0" on:click={goToLog}>My Log</button>
     </div>
-    <div class="navbar-center">
+    <div class="navbar-center flex justify-center md:justify-center">
       <a class="btn btn-ghost text-xl" href="/">AdventureLog 🗺️</a>
     </div>
-    <div class="navbar-end">
+    <div class="navbar-end flex justify-around md:justify-end">
       <p>Adventures: {getNumberOfAdventures()} </p>
     </div>
-  </div>
+</div>

src/routes/+layout.svelte

@@ -2,6 +2,9 @@
     import Footer from "$lib/components/Footer.svelte";
     import Navbar from "$lib/components/Navbar.svelte";
     import "../app.css";
+
+    // only show footer if scrolled to the bottom
+    
 </script>
 
 <Navbar />
@@ -10,10 +13,10 @@
   </section>
   <!-- <Footer /> -->
 
-  <style>
+  <!-- <style>
     section {
         margin-top: 2rem;
         margin-bottom: 5rem;
         /* gives the footer space! */
     }
-  </style>
+  </style> -->

src/routes/log/+page.svelte

@@ -10,8 +10,6 @@
     import SucessToast from "$lib/components/SucessToast.svelte";
     import mapDrawing from "$lib/assets/adventure_map.svg"
     import EditModal from "$lib/components/EditModal.svelte";
-    import { Input } from "postcss";
-
 
     let newName = '';
     let newLocation = '';
@@ -112,21 +110,21 @@
 <EditModal bind:editId={editId} bind:editName={editName} bind:editLocation={editLocation} bind:editCreated={editCreated} on:submit={saveAdventure} on:close={handleClose} />
 {/if}
 
-<div class="grid grid-cols-3 gap-4 mt-4 content-center auto-cols-auto ml-6">
+<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 adventures as adventure (adventure.id)}
         <AdventureCard id={adventure.id} name={adventure.name} location={adventure.location} created={adventure.created} on:remove={triggerRemoveAdventure} on:edit={editAdventure} />
     {/each}
 </div>
 
 {#if adventures.length == 0}
-<div class="flex flex-col items-center justify-center mt-28">
+<div class="flex flex-col items-center justify-center  mt-16">
     <article class="prose mb-4"><h2>Add some adventures!</h2></article>
     <img src={mapDrawing} width="25%" alt="Logo" />
 </div>
 {/if}
 
 {#if adventures.length != 0}
-<div class="flex flex-row items-center justify-center mt-28 gap-4">
+<div class="flex flex-row items-center justify-center mt-16 gap-4">
     <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>