Rewrite Cards - not yet implemented on public pages

This commit is contained in:
Fred Boniface 2024-07-02 20:18:01 +01:00
parent 95e45c8cb1
commit e0227516d8
4 changed files with 197 additions and 0 deletions

79
src/lib/cards/Card.svelte Normal file
View File

@ -0,0 +1,79 @@
<script lang="ts">
import { fade } from "svelte/transition";
import type { CardConfig } from "./Card.types";
import { IconHelpCircle, IconRefresh } from "@tabler/icons-svelte";
import Tooltip from "$lib/Tooltip.svelte";
export let config: CardConfig;
</script>
<div class="card" in:fade={{ duration: 250 }}>
<div class="header">
<h2 class="title">{config.title}</h2>
<div class="actions">
{#if config.showHelp}
<Tooltip text={config.helpText}>
<button aria-label="Help">
<IconHelpCircle />
</button>
</Tooltip>
{/if}
{#if config.showRefresh}
<button on:click={config.onRefresh} aria-label="Refresh">
<IconRefresh />
</button>
{/if}
</div>
</div>
<div class="content">
<slot />
</div>
</div>
<style>
.card {
width: 85%;
max-width: 400px;
margin: auto;
margin-top: 25px;
padding: 10px;
background-color: var(--island-bg-color);
border-radius: 10px;
box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.29);
}
.header {
color: var(--island-header-color);
display: flex;
width: 100%;
justify-content: center;
align-items: center;
position: relative;
text-shadow: 2px 1px 10px rgba(0, 0, 0, 0.29);
}
.title {
flex-grow: 1;
text-align: center;
margin: 0;
}
.actions {
display: flex;
position: absolute;
right: 0;
display: flex;
gap: 1px
}
.content {
margin-top: 16px;
}
button {
cursor: pointer;
color: white;
background: none;
border: none;
}
</style>

View File

@ -0,0 +1,16 @@
export interface CardConfig {
title: string;
showHelp: boolean;
showRefresh: boolean;
helpText: string;
onRefresh: () => void;
}
export interface LookupCardConfig {
title: string;
formAction: string;
maxLen: number;
placeholder: string;
helpText: string;
fieldName: string;
}

View File

@ -0,0 +1,60 @@
<script lang="ts">
import Card from "./Card.svelte";
import type { CardConfig, LookupCardConfig } from "./Card.types";
export let config: LookupCardConfig;
let upstreamConfig: CardConfig = {
title: config.title,
showHelp: false, // If enabled without showRefresh, cards will be shifted to left!
showRefresh: false,
helpText: config.helpText,
onRefresh: () => {},
};
</script>
<Card config={upstreamConfig}>
<form action={config.formAction}>
<input type="text" name={config.fieldName} placeholder={config.placeholder} maxlength={config.maxLen} autocomplete="off">
<br>
<button type="submit">Submit</button>
</form>
</Card>
<style>
input {
width: 75%;
max-width: 250px;
text-align: center;
text-transform: uppercase;
font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
height: 30px;
border: none;
border-radius: 20px;
box-shadow: var(--box-shadow);
transition: all 0.3s ease;
}
button {
margin: 10px;
background-color: var(--island-button-color);
color: white;
border: none;
border-radius: 20px;
width: 40%;
max-width: 200px;
height: 25px;
box-shadow: var(--box-shadow);
transition: all 0.3s ease;
}
input:hover {
box-shadow: var(--box-shadow-dark);
}
button:hover {
background-color: rgb(45, 45, 45);
box-shadow: var(--box-shadow-dark);
}
</style>

View File

@ -0,0 +1,42 @@
<script lang="ts">
import Card from "$lib/cards/Card.svelte";
import type { LookupCardConfig } from "$lib/cards/Card.types";
import LookupCard from "$lib/cards/LookupCard.svelte";
let CardConfig = {
title: "Near to Me",
showHelp: false,
showRefresh: true,
helpText: "May not detect your location correctly on non-mobile devices",
onRefresh: onRefresh,
};
let LookupConfig: LookupCardConfig = {
title: "Live Arr/Dep Boards",
helpText: "Enter CRS, TIPLOC or STANOX code to see live departures",
placeholder: "Enter CRS/TIPLOC/STANOX",
maxLen: 7,
formAction: "/ldb/",
fieldName: "station"
};
let TimetableConfig: LookupCardConfig = {
title: "Timetable & PIS",
helpText: "Enter a headcode to search the timetable and check PIS Codes",
placeholder: "Enter headcode",
maxLen: 4,
formAction: "/train/",
fieldName: "headcode"
}
function onRefresh() {
console.log("Refresh");
}
</script>
<Card config={CardConfig}>
<p>content</p>
</Card>
<LookupCard config={LookupConfig} />
<LookupCard config={TimetableConfig} />