Standardise & styles and improve performance on small displays.

Add inter-route linking from Junctions.
This commit is contained in:
2026-02-11 20:58:01 +00:00
parent e94b0e811a
commit 7e68192312
6 changed files with 101 additions and 42 deletions

View File

@@ -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;
}