Rewrite Cards - not yet implemented on public pages
This commit is contained in:
parent
95e45c8cb1
commit
e0227516d8
79
src/lib/cards/Card.svelte
Normal file
79
src/lib/cards/Card.svelte
Normal 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>
|
16
src/lib/cards/Card.types.ts
Normal file
16
src/lib/cards/Card.types.ts
Normal 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;
|
||||||
|
}
|
60
src/lib/cards/LookupCard.svelte
Normal file
60
src/lib/cards/LookupCard.svelte
Normal 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>
|
42
src/routes/test/+page.svelte
Normal file
42
src/routes/test/+page.svelte
Normal 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} />
|
Loading…
Reference in New Issue
Block a user