Fix responsive design elements
This commit is contained in:
parent
5ec325e8a5
commit
005f05b738
@ -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}
|
||||||
|
@ -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 = "✔"
|
||||||
|
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>
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
Loading…
Reference in New Issue
Block a user