Standardise & styles and improve performance on small displays.
Add inter-route linking from Junctions.
This commit is contained in:
@@ -7,6 +7,7 @@
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
|
||||
/>
|
||||
<link rel="manifest" href="/manifest.webmanifest" />
|
||||
<title>OwlBoard Maps</title>
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
|
||||
@@ -1,12 +1,19 @@
|
||||
<script lang="ts">
|
||||
import { components } from '$lib/mapRegistry';
|
||||
import type { ElecType } from '$lib/railStyles';
|
||||
import { IconArrowNarrowRight } from '@tabler/icons-svelte';
|
||||
|
||||
export let feature: any; // Raw Object
|
||||
export let activeElec: string; // Active Electrification Type
|
||||
type featureType = "station" | "junction" | "crossovers" | "siteof" | "bridge" | "minorBridge" | "crossover" | "crossing" | "loop" | "loops" | "signallerChange" | "electrificationChange" | "default" | "tunnel";
|
||||
export let feature: {name: string; type: featureType; goto?: string; entryPoint?: string; miles: number; chains: number; description?: string}; // Raw Object
|
||||
export let activeElec: ElecType; // Active Electrification Type
|
||||
export let reversed: boolean = false;
|
||||
|
||||
$: Icon = components[feature.type] || components.default;
|
||||
|
||||
// Linking Logic
|
||||
$: isLinkable = !!(feature.goto && feature.entryPoint);
|
||||
$: href = `/map/${feature.goto}#${feature.entryPoint}`;
|
||||
|
||||
const slugify = (str?: string) =>
|
||||
str?.toLocaleLowerCase().trim().replace(/\s+/g, '-') ?? 'unknown';
|
||||
</script>
|
||||
@@ -18,9 +25,10 @@
|
||||
</div>
|
||||
|
||||
<div class="icon-col">
|
||||
<svelte:component this={Icon} {feature} {activeElec} {reversed} />
|
||||
<svelte:component this={Icon} feature={feature as any} {activeElec} {reversed} />
|
||||
</div>
|
||||
|
||||
<svelte:element this={isLinkable ? 'a' : 'div'} {...(isLinkable ? { href } : {})} class="link-wrapper">
|
||||
<div class="label-col">
|
||||
{#if feature.name}
|
||||
<div class="feature-name">{feature.name}</div>
|
||||
@@ -29,18 +37,31 @@
|
||||
<div class="feature-desc">{feature.description}</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if isLinkable}
|
||||
<div class="link-indicator">
|
||||
<IconArrowNarrowRight />
|
||||
</div>
|
||||
{/if}
|
||||
</svelte:element>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
a {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.row-container {
|
||||
display: grid;
|
||||
/* Balanced columns: 1fr on both sides keeps the 64px icon in the dead center */
|
||||
grid-template-columns: 3.5rem 64px 1fr;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
max-height: 64px;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mileage-col {
|
||||
@@ -50,7 +71,7 @@
|
||||
padding-right: 12px;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 0.85rem;
|
||||
color: #64748b; /* Adjusted slightly for contrast */
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.miles {
|
||||
@@ -62,13 +83,46 @@
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
|
||||
.icon-col {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
/* Ensure the icon itself is centered if the SVG is smaller than 64px */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.link-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.link-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 5px;
|
||||
margin-right: 8px;
|
||||
flex-shrink: 0;
|
||||
color: #e1ebeb;
|
||||
background-color: #3c6f79;
|
||||
padding: 2px 2px;
|
||||
border-radius: 999px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.link-wrapper:hover .link-indicator {
|
||||
background-color: #404c55;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.label-col {
|
||||
@@ -76,20 +130,16 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
/* FIX: Allow children to manage their own wrapping */
|
||||
overflow: hidden;
|
||||
/* min-width: 0 is critical for flex children to allow truncation */
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.feature-name {
|
||||
font-weight: 700;
|
||||
font-family: sans-serif;
|
||||
color: #1e293b;
|
||||
font-size: 0.8rem;
|
||||
text-transform: capitalize;
|
||||
|
||||
/* Allow the title to wrap naturally onto multiple lines */
|
||||
white-space: normal;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 2px;
|
||||
@@ -98,12 +148,11 @@
|
||||
.feature-desc {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font-family: sans-serif;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
overflow: hidden;
|
||||
|
||||
/* Firefox Fix: Ensure white-space is normal here too */
|
||||
white-space: normal;
|
||||
|
||||
line-height: 1.2rem;
|
||||
max-height: 2.4rem;
|
||||
font-size: 0.75rem;
|
||||
@@ -111,21 +160,26 @@
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* Tablet and Desktop scaling */
|
||||
@media (max-width: 320px) {
|
||||
.feature-desc {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
.feature-name {
|
||||
font-size: 1rem; /* The larger title you requested */
|
||||
font-size: 1rem;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 0.85rem; /* Slightly larger desc to match */
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.3rem;
|
||||
max-height: 2.6rem;
|
||||
}
|
||||
|
||||
.label-col {
|
||||
padding-left: 24px; /* More "breathing room" on big screens */
|
||||
padding-left: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -9,10 +9,9 @@
|
||||
|
||||
$: type = feature.kind.toLowerCase();
|
||||
$: isFoot = type === 'foot';
|
||||
$: filterCategory = isFoot ? 'foot' : type === 'uwc' ? 'uwc' : 'level-crossing';
|
||||
</script>
|
||||
|
||||
<svg viewBox="0 0 64 64" width="64" height="64" class={filterCategory}>
|
||||
<svg viewBox="0 0 64 64" width="64" height="64">
|
||||
<BaseTrack {activeElec} height={64} />
|
||||
|
||||
{#if type === 'foot'}
|
||||
|
||||
@@ -6,6 +6,8 @@
|
||||
direction: 'up' | 'down';
|
||||
diverges: 'left' | 'right' | 'both';
|
||||
elecBranch?: string;
|
||||
goto?: string;
|
||||
entryPoint?: string;
|
||||
};
|
||||
export let activeElec: any;
|
||||
export let reversed: boolean = false;
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { IconArrowNarrowRight } from '@tabler/icons-svelte';
|
||||
export let feature: {
|
||||
routeName: string;
|
||||
routeId: string;
|
||||
@@ -17,16 +18,7 @@
|
||||
</div>
|
||||
|
||||
<div class="icon-circle">
|
||||
<svg viewBox="0 0 24 24" width="20" height="20">
|
||||
<path
|
||||
d="M5 12h14M12 5l7 7-7 7"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="3"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<IconArrowNarrowRight />
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@@ -69,12 +61,14 @@
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-family: "urwgothic";
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.route-id-chip {
|
||||
font-size: 0.6rem;
|
||||
font-weight: 800;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
background: #f1f5f9;
|
||||
color: #475569;
|
||||
padding: 2px 6px;
|
||||
@@ -83,6 +77,7 @@
|
||||
}
|
||||
|
||||
.main-text {
|
||||
font-family: "urwgothic";
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
@@ -92,16 +87,15 @@
|
||||
}
|
||||
|
||||
.icon-circle {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f8fafc;
|
||||
border-radius: 50%;
|
||||
color: #94a3b8;
|
||||
|
||||
color: #e1ebeb;
|
||||
background-color: #3c6f79;
|
||||
padding: 4px 4px;
|
||||
border-radius: 999px;
|
||||
transition: all 0.3s ease;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.wide-button:hover {
|
||||
@@ -111,8 +105,7 @@
|
||||
}
|
||||
|
||||
.wide-button:hover .icon-circle {
|
||||
background: #4f46e5;
|
||||
color: #ffffff;
|
||||
background-color: #404c55;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
|
||||
@@ -22,7 +22,8 @@
|
||||
electrificationChange: true,
|
||||
siteof: true,
|
||||
junction: true,
|
||||
tunnel: true
|
||||
tunnel: true,
|
||||
crossing: true,
|
||||
};
|
||||
|
||||
let showFilters = false;
|
||||
@@ -75,7 +76,8 @@
|
||||
{reversed ? data.route.routeEnd : data.route.routeStart}
|
||||
</h1>
|
||||
<span class="secondary-station">
|
||||
to {reversed ? data.route.routeStart : data.route.routeEnd}
|
||||
<span class="route-stack-to">
|
||||
to</span> {reversed ? data.route.routeStart : data.route.routeEnd}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -186,6 +188,8 @@
|
||||
height: 52px;
|
||||
padding-left: 0;
|
||||
margin-left: 15px;
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
@@ -208,8 +212,14 @@
|
||||
|
||||
.route-stack {
|
||||
display: flex;
|
||||
font-family: "urwgothic";
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.route-stack-to {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.primary-station {
|
||||
@@ -225,7 +235,7 @@
|
||||
.secondary-station {
|
||||
font-size: 0.7rem;
|
||||
color: #cce9e9;
|
||||
text-transform: uppercase;
|
||||
text-transform: capitalize;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -365,7 +375,7 @@
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
@media (max-width: 390px) {
|
||||
.icon-btn {
|
||||
padding: 0.3rem 0.3rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user