OwlBoard/owlboard-svelte
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Introduce LinkButton and ScriptButton components and updated NearToMeCard to make use of the new components

Browse Source
This commit is contained in:
Fred Boniface 2024-07-07 09:56:07 +01:00
parent bf28984b80
commit b48795563f
3 changed files with 46 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/lib/buttons/LinkButton.svelte
View File

@ -13,6 +13,7 @@
text-decoration: none;
margin: 5px;
background-color: var(--island-button-color);
font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
padding: 5px 10px;
min-width: 40px;
height: 25px;

36
src/lib/buttons/ScriptButton.svelte Normal file
View File

@ -0,0 +1,36 @@
<script lang="ts">
export let fn = () => {};
export let text: string;
</script>
<button class="script-button" on:click={fn} on:keypress={fn}>{text}</button>
<style>
.script-button {
color: aliceblue;
border: none;
border-radius: 20px;
text-decoration: none;
margin: auto;
font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
background-color: var(--island-button-color);
padding: 5px 10px;
min-width: 40px;
height: 35px;
font-size: 16px;
font-weight: 400;
box-shadow: var(--box-shadow);
transition: all 0.3s ease;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.script-button:hover {
box-shadow: var(--box-shadow-dark);
background-color: rgb(45,45,45);
}
</style>

39
src/lib/cards/NearToMeCard.svelte
View File

@ -10,6 +10,8 @@
import { apiGet } from "$lib/scripts/apiFetch";
import { onMount } from "svelte";
import { nearToMeCache } from "$lib/stores/nearToMeCache";
import LinkButton from "$lib/buttons/LinkButton.svelte";
import ScriptButton from "$lib/buttons/ScriptButton.svelte";
let errorMessage: string;
let stations: NearestStationResponse[] = [];
@ -61,7 +63,7 @@
<Card {config}>
{#if !$uuid || $uuid === "null"}
<p><a href="/more/reg">Register to use this feature</a></p>
<LinkButton text="Register to use this feature" link="/more/reg" />
{:else if $location}
{#if !stations.length}
{#if errorMessage}
@ -72,39 +74,16 @@
{:else}
<div id="buttons">
{#each stations as station}
<a class="link" href="/ldb?station={station['3ALPHA']}">{station.NLCDESC} - {station.miles}mi</a>
<LinkButton text={`${station.NLCDESC} - ${station.miles}mi`} link={`/ldb?station=${station["3ALPHA"]}`} />
{/each}
</div>
{/if}
{:else}
<p><button on:click={turnOnLocation}>Turn on Location</button></p>
<ScriptButton text={"Turn on Location"} fn={turnOnLocation} />
{/if}
</Card>
<style>
a,
button {
color: aliceblue;
text-decoration: none;
margin: auto;
padding: 5px 10px;
background-color: var(--island-button-color);
border: none;
border-radius: 20px;
box-shadow: var(--box-shadow);
font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
font-size: 16px;
font-weight: 400;
white-space: nowrap;
transition: all 0.3s ease;
}
a:hover,
button:hover {
background-color: rgb(45, 45, 45);
box-shadow: var(--box-shadow-dark);
}
#buttons {
display: flex;
flex-wrap: wrap;
@ -114,9 +93,9 @@
margin: auto;
padding-top: 5px;
}
.link {
display: inline-flex;
margin: 5px;
padding: 5px 10px;
p {
text-align: center;
margin: auto;
}
</style>