Fred Boniface
6ed262ce59
- Update to @tabler/icons-svelte-runes for a more 'Svente 5' experience. - Adjust error handling in load functions, plain error thrown for handling in the error handler. - Fix the warning regarding a click handler attached to an <img> on the About page - Re-organise component directory - Remove unused font declarations from global.css Features: - Add service-worker caching of FilterData API response to allow for filtering to work fully offline -
72 lines
1.4 KiB
Svelte
72 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
|
|
import Button from '$lib/components/ui/form-elements/Button.svelte';
|
|
|
|
import { fade } from 'svelte/transition';
|
|
import { flip } from 'svelte/animate';
|
|
|
|
import { quickLinks } from '$lib/quick-links.svelte';
|
|
|
|
const flipDuration = 300;
|
|
</script>
|
|
|
|
<BaseCard header={'Quick Links'}>
|
|
<div class="card-content">
|
|
{#if quickLinks.list.length === 0}
|
|
<p class="msg">Your most viewed stations will appear here</p>
|
|
{:else}
|
|
<div class="stations-flex">
|
|
{#each quickLinks.list as station (station.id)}
|
|
<div
|
|
class="btn-container"
|
|
animate:flip={{ duration: flipDuration }}
|
|
in:fade|global={{ duration: 200 }}
|
|
>
|
|
<Button href={`/board?loc=${station.id}`}
|
|
><span class="stn-name">{station.id}</span></Button
|
|
>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</BaseCard>
|
|
|
|
<style>
|
|
.card-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
width: 90%;
|
|
min-height: 98px;
|
|
margin: auto;
|
|
padding: 10px 0 10px 0;
|
|
}
|
|
|
|
.stations-flex {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.1rem 0.5rem;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.btn-container {
|
|
display: block;
|
|
width: fit-content;
|
|
will-change: transform;
|
|
}
|
|
|
|
.msg {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: var(--color-title);
|
|
}
|
|
|
|
.stn-name {
|
|
text-transform: capitalize;
|
|
}
|
|
</style>
|