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

Update train detail layout to improve icon placement

Browse Source
This commit is contained in:
Fred Boniface
2024-04-23 19:53:43 +01:00
parent 2a615a822e
commit 41f673c68f
10 changed files with 83 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/lib/Tooltip.svelte
View File

@@ -1,40 +1,40 @@
<script lang="ts">
import { onMount, onDestroy } from "svelte";
export let text: string
import { onMount, onDestroy } from 'svelte';
export let text: string;
let isVisible: boolean = false;
let timer: number;
let isVisible: boolean = false;
let timer: number;
function showTooltip() {
isVisible = true;
timer = setTimeout(() => {
isVisible = false;
}, 2000);
}
function showTooltip() {
isVisible = true;
timer = setTimeout(() => {
isVisible = false;
}, 2000);
}
function hideTooltip() {
isVisible = false;
clearTimeout(timer);
}
function hideTooltip() {
isVisible = false;
clearTimeout(timer);
}
onDestroy(() => {
clearTimeout(timer);
});
onDestroy(() => {
clearTimeout(timer);
});
</script>
<div class="tooltip" on:touchstart={showTooltip} on:touchend={hideTooltip} on:touchcancel={hideTooltip}>
<slot />
<span class="tooltiptext">{text}</span>
<slot />
<span class="tooltiptext">{text}</span>
</div>
<style>
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip .tooltiptext {
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: var(--island-button-color);
@@ -52,7 +52,7 @@
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
visibility: visible;
opacity: 1;
}
</style>

3
src/lib/navigation/nav.svelte
View File

@@ -21,9 +21,8 @@
</script>
<footer>
{#each links as item}
<a href={item.path} class:active={$page.url.pathname == item.path || $page.url.pathname == item.path + "/"}>
<a href={item.path} class:active={$page.url.pathname == item.path || $page.url.pathname == item.path + '/'}>
<svelte:component this={item.icon} />
<br />
<span>{item.title}</span>

2
src/lib/overlays/welcome.svelte
View File

@@ -27,7 +27,7 @@
'<h3>Resgistration Update</h3>' +
'<p>The registration issue has been fixed and registrations are now open.</p>' +
'<p>Headcode and PIS Lookups will still be possible without registering but only for a limited time.</p>' +
'<p>You will receive further warning before mandatory registration is re-enabled.</p>',
'<p>You will receive further warning before mandatory registration is re-enabled.</p>'
];
</script>

32
src/lib/train/train-detail.svelte
View File

@@ -49,19 +49,13 @@
<LoadingText />
{:then serviceDetail}
{#if serviceDetail.stpIndicator === 'C'}
<p class="text-message">
This has been removed from the timetable for today.
</p>
<p class="text-message">
The service may have been retimed, re-routed or removed from todays timetable completely.
</p>
<p class="text-message">
If it has been retimed or re-routed, there is likely to be another service with the same headcode booked to run.
</p>
<p class="text-message">This has been removed from the timetable for today.</p>
<p class="text-message">The service may have been retimed, re-routed or removed from todays timetable completely.</p>
<p class="text-message">If it has been retimed or re-routed, there is likely to be another service with the same headcode booked to run.</p>
{:else}
<div class="detailOperator"><StylesToc toc={service?.operator || ''} full={true} /></div>
<TrainIcons serviceDetails={serviceDetail.serviceDetails} />
<TrainIcons serviceDetails={serviceDetail.serviceDetail} />
{#if serviceDetail.pis}
<PisHandler pisObject={serviceDetail.pis} />
{/if}
@@ -86,26 +80,26 @@
<th>Sch Arr.</th>
<th>Sch Dep.</th>
</tr>
{#each serviceDetail.stops as stop}
<tr>
{#if stop.publicArrival || stop.publicDeparture}
{#each serviceDetail.stops as stop}
<tr>
{#if stop.publicArrival || stop.publicDeparture}
<td>{stop.tiploc}</td>
<td>{stop.platform || '-'}</td>
<td>{stop.publicArrival || '-'}</td>
<td>{stop.publicDeparture || '-'}</td>
{:else if stop.wttArrival || stop.wttDeparture}
{:else if stop.wttArrival || stop.wttDeparture}
<td class="wtt">{stop.tiploc}</td>
<td class="wtt">{stop.platform || stop.depLine || stop.arrLine || '-'}</td>
<td class="wtt">{stop.wttArrival || '-'}</td>
<td class="wtt">{stop.wttDeparture || '-'}</td>
{:else}
{:else}
<td class="pass">{stop.tiploc}</td>
<td class="pass">{stop.platform || stop.depLine || stop.arrLine || '-'}</td>
<td class="pass">-</td>
<td class="pass">{stop.pass || '-'}</td>
{/if}
</tr>
{/each}
{/if}
</tr>
{/each}
</table>
{/if}
{:catch}

19
src/lib/train/trainIcons.svelte
View File

@@ -1,14 +1,11 @@
<script lang="ts">
import Tooltip from "$lib/Tooltip.svelte";
import type { ServiceDetail } from "@owlboard/ts-types";
import { IconBed, IconSquare1, IconSquareLetterV, IconToolsKitchen2 } from "@tabler/icons-svelte";
import Tooltip from '$lib/Tooltip.svelte';
import type { ServiceDetail } from '@owlboard/ts-types';
import { IconBed, IconSquare1, IconSquareLetterV, IconToolsKitchen2 } from '@tabler/icons-svelte';
export let serviceDetails: ServiceDetail
export let serviceDetails: ServiceDetail;
</script>
{#if serviceDetails.firstClass}
<Tooltip text="First Class is available">
<IconSquare1 />
@@ -33,6 +30,10 @@ import { IconBed, IconSquare1, IconSquareLetterV, IconToolsKitchen2 } from "@tab
</Tooltip>
{/if}
<style>
<!-- Render a newline if any of the icons is to appear -->
{#if serviceDetails.firstClass || serviceDetails.catering || serviceDetails.sleeper || serviceDetails.vstp}
<br>
{/if}
</style>
<style>
</style>