Fix responsive design elements

This commit is contained in:
Fred Boniface 2023-06-16 12:38:32 +01:00
parent 5ec325e8a5
commit 005f05b738
4 changed files with 18 additions and 5 deletions

View File

@ -10,7 +10,7 @@
<Island {variables}> <Island {variables}>
{#if $ql.length === 0} {#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} {/if}
<div class="buttons"> <div class="buttons">
{#each $ql as link} {#each $ql as link}

View File

@ -11,7 +11,13 @@
console.log(qlData); 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]) // Fetch the content of all text entries within the island then run ql.set([ARRAY OF INPUT CONTENT])
const inputs = document.getElementsByClassName('qlInput'); const inputs = document.getElementsByClassName('qlInput');
let inputLinks = [] let inputLinks = []
@ -23,13 +29,18 @@
} }
console.log(inputLinks) console.log(inputLinks)
ql.set(inputLinks) ql.set(inputLinks)
saveButton = "&#10004;"
await timeout(3000);
saveButton = "Saved"
} }
function clearQl() { function clearQl() {
ql.set([]); ql.set([]);
saveButton = "Saved"
} }
function addQlBox() { function addQlBox() {
saveButton = "Save"
const updatedQl = [...$ql, ""]; const updatedQl = [...$ql, ""];
$ql = updatedQl; $ql = updatedQl;
ql.set(updatedQl); ql.set(updatedQl);
@ -47,12 +58,13 @@
<p>Click the + button to add links</p> <p>Click the + button to add links</p>
{/if} {/if}
<div id="buttons" class="buttons"> <div id="buttons" class="buttons">
<p>Quick links can be CRS Codes or Headcodes</p>
{#each qlData as link} {#each qlData as link}
<input class="qlInput" type="text" value={link}> <input class="qlInput" type="text" value={link}>
{/each} {/each}
<button on:click={addQlBox} id="qlAdd">+</button> <button on:click={addQlBox} id="qlAdd">+</button>
</div> </div>
<button on:click={saveQl}>Save</button> <button on:click={saveQl}>{@html saveButton}</button>
<button on:click={clearQl}>Clear</button> <button on:click={clearQl}>Clear</button>
</Island> </Island>

View File

@ -22,7 +22,7 @@
<footer> <footer>
{#each links as item} {#each links as item}
<a href={item.path} class:active={$page.url.pathname == item.path}> <a href={item.path} class:active={$page.url.pathname == item.path}>
<img src="{item.svgPath}" alt=""> <img src="{item.svgPath}" alt="{item.title}">
<br> <br>
<span>{item.title}</span> <span>{item.title}</span>
</a> </a>

View File

@ -20,7 +20,8 @@
<style> <style>
img { img {
width: 50%; width: 50%;
margin-top: 85px; max-width: 250px;
margin-top: 55px;
margin-bottom: 85px; margin-bottom: 85px;
} }
</style> </style>