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

Include tabler icons and switch buttons to use icons

Browse Source
This commit is contained in:
Fred Boniface
2026-02-11 19:01:24 +00:00
parent 117d1f752e
commit 54e3483a39
3 changed files with 52 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
package-lock.json generated
View File

@@ -13,6 +13,7 @@
"@sveltejs/adapter-node": "^5.5.2",
"@sveltejs/kit": "^2.50.1",
"@sveltejs/vite-plugin-svelte": "^6.2.4",
"@tabler/icons-svelte": "^3.36.1",
"@types/node": "^22",
"eslint": "^9.39.2",
"eslint-config-prettier": "^10.1.8",
@@ -1344,6 +1345,34 @@
"vite": "^6.3.0 || ^7.0.0"
}
},
"node_modules/@tabler/icons": {
"version": "3.36.1",
"resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.36.1.tgz",
"integrity": "sha512-f4Jg3Fof/Vru5ioix/UO4GX+sdDsF9wQo47FbtvG+utIYYVQ/QVAC0QYgcBbAjQGfbdOh2CCf0BgiFOF9Ixtjw==",
"dev": true,
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/codecalm"
}
},
"node_modules/@tabler/icons-svelte": {
"version": "3.36.1",
"resolved": "https://registry.npmjs.org/@tabler/icons-svelte/-/icons-svelte-3.36.1.tgz",
"integrity": "sha512-f48RDkXJr7dMbbWHho81rR91QiPleHTlOwJUM5uFhTqo7dXH4mNZxJo3tksQNmlIauh7PqoS3i+RY7YlZxg5yg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@tabler/icons": ""
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/codecalm"
},
"peerDependencies": {
"svelte": ">=3 <6 || >=5.0.0-next.0"
}
},
"node_modules/@types/cookie": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",

1
package.json
View File

@@ -19,6 +19,7 @@
"@sveltejs/adapter-node": "^5.5.2",
"@sveltejs/kit": "^2.50.1",
"@sveltejs/vite-plugin-svelte": "^6.2.4",
"@tabler/icons-svelte": "^3.36.1",
"@types/node": "^22",
"eslint": "^9.39.2",
"eslint-config-prettier": "^10.1.8",

32
src/routes/map/[slug]/+page.svelte
View File

@@ -5,6 +5,7 @@
import { resolve } from '$app/paths';
import logo from '$lib/assets/round-logo.svg';
import { IconArrowsExchange, IconSettings } from '@tabler/icons-svelte';
// data.route contains: routeStart, routeEnd, routeId, elecStart, elecEnd, routeDetail[]
export let data;
@@ -82,9 +83,9 @@
<div class="quick-actions">
<button class="icon-btn" onclick={() => (reversed = !reversed)}>
⇄ {reversed ? 'UP' : 'DN'}
<IconArrowsExchange />
</button>
<button class="icon-btn" onclick={() => (showFilters = !showFilters)}> Settings </button>
<button class="icon-btn" onclick={() => (showFilters = !showFilters)}> <IconSettings /> </button>
</div>
</header>
@@ -184,11 +185,18 @@
width: 52px;
height: 52px;
padding-left: 0;
margin-left: 0;
margin-left: 15px;
flex-shrink: 0;
transition: all 0.3s ease;
}
@media (max-width: 350px) {
.home-link {
width: 42px;
height: 42px;
}
}
.home-link:hover {
transform: translateY(-1px) scale(1.05);
filter: brightness(1.1);
@@ -224,25 +232,23 @@
.quick-actions {
display: flex;
gap: 0.5rem;
margin-right: 15px;
}
.map-spine {
padding-top: 72px;
}
@media (min-width: 768px) {
.primary-station {
@media (min-width: 536px) {
.primary-station {
font-size: 1.5rem;
}
.secondary-station {
font-size: 1rem;
}
}
.top-nav {
padding: 0 2rem;
height: 80px;
}
@media (min-width: 768px) {
h1 {
font-size: 1.5rem;
letter-spacing: -0.03em;
@@ -359,6 +365,12 @@
transition: all 0.3s ease;
}
@media (max-width: 350px) {
.icon-btn {
padding: 0.3rem 0.3rem;
}
}
.icon-btn:hover {
background: #2d2d2d;
}