From 005f05b73875eb034f097134766bb760fd636d00 Mon Sep 17 00:00:00 2001
From: Fred Boniface <fred@fjla.uk>
Date: Fri, 16 Jun 2023 12:38:32 +0100
Subject: [PATCH] Fix responsive design elements

---
 src/lib/islands/quick-link-island.svelte     |  2 +-
 src/lib/islands/quick-link-set-island.svelte | 16 ++++++++++++++--
 src/lib/navigation/nav.svelte                |  2 +-
 src/routes/more/versions/+page.svelte        |  3 ++-
 4 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/lib/islands/quick-link-island.svelte b/src/lib/islands/quick-link-island.svelte
index b4b4654..c539348 100644
--- a/src/lib/islands/quick-link-island.svelte
+++ b/src/lib/islands/quick-link-island.svelte
@@ -10,7 +10,7 @@
 <Island {variables}>
     
     {#if $ql.length === 0}
-    <p>Go to <a href="/null">settings</a> to add your Quick Links</p>
+    <p>Go to <a href="/more/settings">settings</a> to add your Quick Links</p>
     {/if}
     <div class="buttons">
         {#each $ql as link}
diff --git a/src/lib/islands/quick-link-set-island.svelte b/src/lib/islands/quick-link-set-island.svelte
index 22cd2a2..3d4e282 100644
--- a/src/lib/islands/quick-link-set-island.svelte
+++ b/src/lib/islands/quick-link-set-island.svelte
@@ -11,7 +11,13 @@
         console.log(qlData);
     }
 
-    function saveQl() {
+    let saveButton = "Save"
+
+    async function timeout(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+    async function saveQl() {
       // Fetch the content of all text entries within the island then run ql.set([ARRAY OF INPUT CONTENT])
       const inputs = document.getElementsByClassName('qlInput');
       let inputLinks = []
@@ -23,13 +29,18 @@
       }
       console.log(inputLinks)
       ql.set(inputLinks)
+      saveButton = "&#10004;"
+      await timeout(3000);
+      saveButton = "Saved"
     }
 
     function clearQl() {
         ql.set([]);
+        saveButton = "Saved"
     }
 
     function addQlBox() {
+        saveButton = "Save"
         const updatedQl = [...$ql, ""];
         $ql = updatedQl;
         ql.set(updatedQl);
@@ -47,12 +58,13 @@
       <p>Click the + button to add links</p>
     {/if}
     <div id="buttons" class="buttons">
+      <p>Quick links can be CRS Codes or Headcodes</p>
       {#each qlData as link}
         <input class="qlInput" type="text" value={link}>
       {/each}
       <button on:click={addQlBox} id="qlAdd">+</button>
     </div>
-    <button on:click={saveQl}>Save</button>
+    <button on:click={saveQl}>{@html saveButton}</button>
     <button on:click={clearQl}>Clear</button>
   </Island>
   
diff --git a/src/lib/navigation/nav.svelte b/src/lib/navigation/nav.svelte
index 91ebda1..b442c82 100644
--- a/src/lib/navigation/nav.svelte
+++ b/src/lib/navigation/nav.svelte
@@ -22,7 +22,7 @@
 <footer>
   {#each links as item}
         <a href={item.path} class:active={$page.url.pathname == item.path}>
-          <img src="{item.svgPath}" alt="">
+          <img src="{item.svgPath}" alt="{item.title}">
           <br>
           <span>{item.title}</span>
         </a>
diff --git a/src/routes/more/versions/+page.svelte b/src/routes/more/versions/+page.svelte
index 59e5a41..1110b09 100644
--- a/src/routes/more/versions/+page.svelte
+++ b/src/routes/more/versions/+page.svelte
@@ -20,7 +20,8 @@
 <style>
     img {
         width: 50%;
-        margin-top: 85px;
+        max-width: 250px;
+        margin-top: 55px;
         margin-bottom: 85px;
     }
 </style>
\ No newline at end of file