Migrate transport mode icons to Tabler Icons

This commit is contained in:
Fred Boniface 2024-07-12 19:29:45 +01:00
parent d75b69df26
commit f92f01af16
5 changed files with 13 additions and 10 deletions

View File

@ -15,10 +15,11 @@
</script> </script>
<Card config={upstreamProps}> <Card config={upstreamProps}>
<div class="quick-links">
{#if !$ql.length} {#if !$ql.length}
<LinkButton text={"Add Quick Links"} link={"/more/settings"} /> <LinkButton text={"Add Quick Links"} link={"/more/settings"} />
{:else} {:else}
<div class="quick-links">
{#each $ql as link} {#each $ql as link}
{#if link.length === 3} {#if link.length === 3}
<LinkButton text={link.toUpperCase()} link={`/ldb?station=${link.toLowerCase()}`} /> <LinkButton text={link.toUpperCase()} link={`/ldb?station=${link.toLowerCase()}`} />
@ -26,8 +27,9 @@
<LinkButton text={link.toUpperCase()} link={`/train?headcode=${link.toLowerCase()}`} /> <LinkButton text={link.toUpperCase()} link={`/train?headcode=${link.toLowerCase()}`} />
{/if} {/if}
{/each} {/each}
</div>
{/if} {/if}
</div>
</Card> </Card>
<style> <style>

View File

@ -8,6 +8,7 @@
import Island from "$lib/islands/island.svelte"; import Island from "$lib/islands/island.svelte";
import { getApiUrl } from "$lib/scripts/upstream"; import { getApiUrl } from "$lib/scripts/upstream";
import TimeBar from "$lib/navigation/TimeBar.svelte"; import TimeBar from "$lib/navigation/TimeBar.svelte";
import { IconBus, IconSailboat } from "@tabler/icons-svelte";
let requestedStation; let requestedStation;
$: requestedStation = station; $: requestedStation = station;
@ -157,7 +158,6 @@
{#if isLoading} {#if isLoading}
<Loading /> <Loading />
{:else if dataAge} {:else if dataAge}
<p id="timestamp">Updated: {dataAge.toLocaleTimeString()}</p>
{#if services.length} {#if services.length}
<table class="ldbTable"> <table class="ldbTable">
<tr> <tr>
@ -215,7 +215,7 @@
{/if} {/if}
{#if busServices.length} {#if busServices.length}
<br /> <br />
<img class="transport-mode" src="/images/transport-modes/bus.svg" alt="Bus services" /><br /> <IconBus /><br />
<span class="table-head-text">Bus Services</span> <span class="table-head-text">Bus Services</span>
<table class="ldbTable"> <table class="ldbTable">
<tr> <tr>
@ -258,7 +258,7 @@
{/if} {/if}
{#if ferryServices.length} {#if ferryServices.length}
<br /> <br />
<img class="transport-mode" src="/images/transport-modes/ferry.svg" alt="Bus services" /><br /> <IconSailboat /><br />
<span class="table-head-text">Ferry Services</span> <span class="table-head-text">Ferry Services</span>
<table class="ldbTable"> <table class="ldbTable">
<tr> <tr>

View File

@ -1,13 +1,14 @@
<script lang="ts"> <script lang="ts">
import TableGenerator from "./table/table-generator.svelte"; import TableGenerator from "./table/table-generator.svelte";
import Loading from "$lib/navigation/loading.svelte"; import Loading from "$lib/navigation/loading.svelte";
import type { ApiResponse, StaffLdb } from "@owlboard/ts-types"; import type { StaffLdb } from "@owlboard/ts-types";
import { detailInit, defineDetail } from "./train-detail"; import { detailInit, defineDetail } from "./train-detail";
import TrainDetail from "./train-detail.svelte"; import TrainDetail from "./train-detail.svelte";
import { fetchStaffLdb } from "./fetch"; import { fetchStaffLdb } from "./fetch";
import AlertBar from "../common/nrcc/alert-bar.svelte"; import AlertBar from "../common/nrcc/alert-bar.svelte";
import TimeBar from "$lib/navigation/TimeBar.svelte"; import TimeBar from "$lib/navigation/TimeBar.svelte";
import { onMount } from "svelte"; import { onMount } from "svelte";
import { IconBus, IconSailboat } from "@tabler/icons-svelte";
export let station: string; export let station: string;
export let title: string | undefined = "Loading..."; export let title: string | undefined = "Loading...";
@ -76,12 +77,14 @@
<TableGenerator services={data.trainServices} click={showDetail} /> <TableGenerator services={data.trainServices} click={showDetail} />
{/if} {/if}
{#if data.busServices?.length} {#if data.busServices?.length}
<img class="transport-mode" src="/images/transport-modes/bus.svg" alt="Bus services" /><br /> <IconBus />
<br />
<span class="table-head-text">Bus Services</span> <span class="table-head-text">Bus Services</span>
<TableGenerator services={data.busServices} click={showDetail} /> <TableGenerator services={data.busServices} click={showDetail} />
{/if} {/if}
{#if data.ferryServices?.length} {#if data.ferryServices?.length}
<img class="transport-mode" src="/images/transport-modes/ferry.svg" alt="Ferry services" /><br /> <IconSailboat />
<br>
<span class="table-head-text">Ferry Services</span> <span class="table-head-text">Ferry Services</span>
<TableGenerator services={data.ferryServices} click={showDetail} /> <TableGenerator services={data.ferryServices} click={showDetail} />
{/if} {/if}

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="410.181" height="180.211" xmlns:v="https://vecta.io/nano"><path d="M84.369 178.557c-2.583-.921-6.603-3.487-8.933-5.703-20.084-19.096-2.644-52.209 24.117-45.789 11.159 2.677 20.412 14.569 20.412 26.235 0 6.752-3.623 14.6-9.051 19.602-7.754 7.147-16.894 9.094-26.545 5.654zm17.513-16.303c2.83-2.83 3.542-4.602 3.542-8.819 0-2.902-.796-6.413-1.769-7.803-4.304-6.145-14.796-6.627-20.151-.926-2.283 2.43-2.92 4.432-2.92 9.175 0 5.144.517 6.511 3.4 8.991 5.093 4.38 13.18 4.101 17.899-.618zm187.347 16.328c-10.704-3.817-17.718-14.055-17.767-25.932-.033-8.089 2.381-13.284 9.017-19.4 16.893-15.572 44.221-3.321 44.221 19.823 0 18.413-18.355 31.613-35.471 25.509zm17.255-16.514c7.994-7.994 2.922-21.718-8.026-21.718-12.289 0-17.964 14.558-8.711 22.345 5.356 4.506 11.848 4.264 16.737-.626zm-301.955-.21C.582 158.862 0 153.752 0 122.136V90.751l3.468-3.98 3.468-3.98L8.35 51.285c2.167-48.276 2.047-47.571 8.582-50.271C19.025.148 77.487-.15 201.758.069L383.522.39l6.059 2.789c7.665 3.528 13.268 8.88 17.376 16.6l3.224 6.059v113.553l-38.776 11.984-39.57 11.991c-.437.004-.506-3.168-.154-7.048 1.869-20.616-13.667-37.78-34.197-37.78-8.509 0-16.355 3.477-23.127 10.249-7.867 7.867-10.77 15.765-9.879 26.875l.619 7.71H124.648l.917-2.726c1.739-5.17.785-15.992-1.916-21.739-9.878-21.015-35.928-26.357-53.461-10.963-7.184 6.307-10.206 13.838-10.206 25.429v9.995l-26.73.002c-19.516.002-27.268-.406-28.725-1.512zm45.235-19.128c2.264-1.212 2.344-3.116 2.344-56.105 0-41.046-.366-55.216-1.454-56.304-.896-.896-5.295-1.454-11.469-1.454-8.758 0-10.177.303-11.306 2.412-.873 1.631-1.181 19.893-.951 56.392.292 46.412.594 54.141 2.157 55.128 2.452 1.549 17.752 1.498 20.68-.069zm91.523-67.943c2.065-2.282 2.308-4.569 2.308-21.684s-.244-19.403-2.308-21.684c-2.237-2.472-3.308-2.551-34.752-2.551-27.337 0-32.732.288-34.275 1.832-2.685 2.685-3.585 11.152-2.915 27.417.857 20.799-2.204 19.221 37.292 19.221 31.341 0 32.413-.079 34.65-2.551zm83.568.832c2.168-1.585 2.352-3.325 2.352-22.229 0-15.602-.398-20.99-1.663-22.516-1.472-1.776-5.401-2.006-34.232-2.006-30.953 0-32.689.12-34.993 2.424-2.219 2.219-2.424 4.039-2.424 21.542 0 15.343.373 19.65 1.886 21.812 1.869 2.669 2.178 2.693 34.304 2.693 26.077 0 32.877-.336 34.769-1.719zm82.553-.916c2.709-2.545 2.805-3.309 2.805-22.349 0-18.998-.098-19.783-2.693-21.6-2.268-1.589-7.619-1.886-33.929-1.886-39.658 0-36.393-2.203-35.863 24.194.338 16.836.668 19.494 2.694 21.729 2.231 2.461 3.348 2.547 33.245 2.547 30.096 0 31.013-.072 33.741-2.635zm85.741-.058c2.861-4.085 2.687-31.482-.236-37.192-4.054-7.918-7.056-8.585-38.668-8.585H326.14l-2.511 3.193c-2.286 2.906-2.511 4.817-2.511 21.261 0 17.568.082 18.15 2.974 21.042l2.974 2.974h32.098c31.796 0 32.116-.025 33.984-2.693z" fill="#fff"/></svg>

Before

Width:  |  Height:  |  Size: 2.7 KiB

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="477.4" height="251.927" xmlns:v="https://vecta.io/nano"><path fill="#fff" d="M0 161.3h87.4l10-20.1h350.9l10.5 20.1h18.6v70.5a100 100 0 0 1-119.3 0 100 100 0 0 1-119.3 0 100 100 0 0 1-119.3 0A100 100 0 0 1 57 251.9zM215.7 0h9.9l-6.5 20.6h16.4v14.1h-20.9L181 141.2h-44.4zM126 82.9h72.9l16.8 18h121.6l28.1-50.1h39.7v50.1h22.2l10.5 20.2H107.2z"/></svg>

Before

Width:  |  Height:  |  Size: 395 B