small ui improvements

This commit is contained in:
vcoppe
2026-02-17 22:24:14 +01:00
parent 091f6a3ed0
commit c9ca75e2e8
4 changed files with 24 additions and 7 deletions

View File

@@ -30,6 +30,11 @@
elevationFill,
} = settings;
let bottomPanelWidth: number | undefined = $state();
let bottomPanelOrientation = $derived(
bottomPanelWidth && bottomPanelWidth >= 540 && $elevationProfile ? 'horizontal' : 'vertical'
);
onMount(async () => {
settings.connectToDatabase(db);
fileStateCollection.connectToDatabase(db).then(() => {
@@ -127,14 +132,17 @@
/>
{/if}
<div
class="{$elevationProfile ? '' : 'h-10'} flex flex-row gap-2 px-2 sm:px-4"
bind:offsetWidth={bottomPanelWidth}
class="flex {bottomPanelOrientation == 'vertical'
? 'flex-col'
: 'flex-row py-2'} gap-1 px-2"
style={$elevationProfile ? `height: ${$bottomPanelSize}px` : ''}
>
<GPXStatistics
{gpxStatistics}
{slicedGPXStatistics}
panelSize={$bottomPanelSize}
orientation={$elevationProfile ? 'vertical' : 'horizontal'}
orientation={bottomPanelOrientation == 'horizontal' ? 'vertical' : 'horizontal'}
/>
{#if $elevationProfile}
<ElevationProfile