steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2026-02-20 14:49:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

small ui improvements

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

6
website/src/lib/components/GPXStatistics.svelte
View File

@@ -31,13 +31,13 @@
<Card.Root
class="h-full {orientation === 'vertical'
? 'min-w-40 sm:min-w-44 text-sm sm:text-base'
: 'w-full'} border-none shadow-none p-0"
? 'min-w-40 sm:min-w-44'
: 'w-full h-10'} border-none shadow-none p-0 text-sm sm:text-base"
>
<Card.Content
class="h-full flex {orientation === 'vertical'
? 'flex-col justify-center'
: 'flex-row w-full justify-between'} gap-4 p-0"
: 'flex-row w-full justify-evenly'} gap-4 p-0"
>
<Tooltip label={i18n._('quantities.distance')}>
<span class="flex flex-row items-center">

2
website/src/lib/components/elevation-profile/ElevationProfile.svelte
View File

@@ -64,7 +64,7 @@
});
</script>
<div class="h-full grow min-w-0 relative py-2">
<div class="h-full grow min-w-0 min-h-0 relative">
<canvas bind:this={overlay} class="w-full h-full absolute pointer-events-none"></canvas>
<canvas bind:this={canvas} class="w-full h-full absolute"></canvas>
{#if showControls}

11
website/src/lib/components/map/Map.svelte
View File

@@ -129,12 +129,21 @@
@apply relative;
@apply top-0;
@apply left-0;
@apply my-2;
@apply w-[29px];
}
div :global(.maplibregl-ctrl-geocoder--icon-loading) {
@apply -mt-1;
@apply mb-0;
}
div :global(.maplibregl-ctrl-geocoder--icon-close) {
@apply my-0;
}
div :global(.maplibregl-ctrl-geocoder--input) {
@apply relative;
@apply h-8;
@apply w-64;
@apply py-0;
@apply pl-2;

12
website/src/routes/[[language]]/app/+page.svelte
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