furyhawk/bus_sg_app
1
0
Fork 0
mirror of https://github.com/furyhawk/bus_sg_app.git synced 2026-07-21 02:06:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance live map header with flexible layout and location button

Browse Source
This commit is contained in:
furyhawk
2026-06-01 20:01:11 +08:00
parent 8aa0e583e0
commit 3acbcb1bdf
2 changed files with 40 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.css
+13
View File
@@ -101,6 +101,13 @@ h1 {
margin-bottom: 0.65rem;
}
.map-title-row {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.2rem;
}
.map-actions {
display: flex;
gap: 0.45rem;
@@ -534,6 +541,12 @@ button:hover {
grid-template-columns: 1fr;
}
.map-title-row .map-actions {
width: auto;
display: flex;
grid-template-columns: none;
}
.location-head {
flex-direction: column;
align-items: flex-start;
src/routes/+page.svelte
+27 -25
View File
@@ -448,33 +448,35 @@
<section class="panel">
<div class="panel-header compact">
<div>
<h2>Live Map</h2>
<div class="map-title-row">
<h2>Live Map</h2>
<div class="map-actions">
<button
class="btn-ghost icon-btn"
type="button"
aria-label={locating ? "Resolving current location" : "Use current location"}
title={locating ? "Locating" : "Use Current Location"}
on:click={() => resolveLocationAndNearestStop()}
disabled={locating}
>
{#if locating}
<svg class="spin" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
<circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" />
<path d="M12 3a9 9 0 0 1 9 9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
{:else}
<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
<circle cx="12" cy="12" r="2" fill="currentColor" />
<circle cx="12" cy="12" r="7" fill="none" stroke="currentColor" stroke-width="1.8" />
<path d="M12 2v3m0 14v3M2 12h3m14 0h3" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
</svg>
{/if}
<span class="visually-hidden">{locating ? "Locating..." : "Use Current Location"}</span>
</button>
</div>
</div>
<p class="hint">{locationMessage}</p>
</div>
<div class="map-actions">
<button
class="btn-ghost icon-btn"
type="button"
aria-label={locating ? "Resolving current location" : "Use current location"}
title={locating ? "Locating" : "Use Current Location"}
on:click={() => resolveLocationAndNearestStop()}
disabled={locating}
>
{#if locating}
<svg class="spin" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
<circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" />
<path d="M12 3a9 9 0 0 1 9 9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
{:else}
<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
<circle cx="12" cy="12" r="2" fill="currentColor" />
<circle cx="12" cy="12" r="7" fill="none" stroke="currentColor" stroke-width="1.8" />
<path d="M12 2v3m0 14v3M2 12h3m14 0h3" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
</svg>
{/if}
<span class="visually-hidden">{locating ? "Locating..." : "Use Current Location"}</span>
</button>
</div>
</div>
<div class="map-wrap">