trafficcue/trafficcue-client
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: speedometer

Browse Source
This commit is contained in:
Jannik
2025-10-17 21:05:24 +02:00
parent c3dbbf2637
commit 171897033e
1 changed files with 20 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/lib/components/lnv/Sidebar.svelte
View File

@ -174,6 +174,13 @@
<Input class="h-10" placeholder="Search..." bind:value={searchbar.text} /> <Input class="h-10" placeholder="Search..." bind:value={searchbar.text} />
</div> </div>
{/if} {/if}
{#if !hideSearch && !!location.speed != false}
<div id="speedometer" style="position: fixed; {mobileView ? `bottom: calc(50px + ${sidebarHeight.current}px + 10px); right: 10px;` : "bottom: 10px; right: 10px;"}">
{(location.speed * 3.6 | 0).toFixed(0)}
</div>
{/if}
<div <div
id="sidebar" id="sidebar"
class={mobileView ? "mobileView" : ""} class={mobileView ? "mobileView" : ""}
@ -398,4 +405,17 @@
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
padding-bottom: calc(40px + env(safe-area-inset-bottom)); padding-bottom: calc(40px + env(safe-area-inset-bottom));
} }
#speedometer {
z-index: 30;
background-color: hsla(0, 0%, 5%, 0.6);
backdrop-filter: blur(5px);
aspect-ratio: 1 / 1;
font-size: 1.5rem;
font-weight: bold;
padding: 10px;
border-radius: 10px;
text-align: center;
width: calc(2ch + 20px);
}
</style> </style>