small style fixes

This commit is contained in:
vcoppe
2025-11-10 11:51:16 +01:00
parent 0554a85e01
commit 4e5d7d391a
20 changed files with 59 additions and 56 deletions

View File

@@ -92,17 +92,17 @@
class="fixed left-[50%] top-[50%] z-50 w-fit max-w-full translate-x-[-50%] translate-y-[-50%] flex flex-col items-center gap-3 border bg-background p-3 shadow-lg rounded-md" class="fixed left-[50%] top-[50%] z-50 w-fit max-w-full translate-x-[-50%] translate-y-[-50%] flex flex-col items-center gap-3 border bg-background p-3 shadow-lg rounded-md"
> >
<div <div
class="w-full flex flex-row items-center justify-center gap-4 border rounded-md p-2 bg-secondary" class="w-full flex flex-col sm:flex-row items-center justify-center gap-1 sm:gap-2 border rounded-md p-2 bg-secondary"
> >
<span>⚠️</span> <span class="w-12 shrink-0 text-center text-xl">⚠️</span>
<span class="max-w-[80%] text-sm"> <span class="text-sm">
{i18n._('menu.support_message')} {i18n._('menu.support_message')}
</span> </span>
</div> </div>
<div class="w-full flex flex-row flex-wrap gap-2"> <div class="w-full flex flex-row flex-wrap gap-2">
<Button class="bg-support grow" href="https://ko-fi.com/gpxstudio" target="_blank"> <Button class="bg-support grow" href="https://ko-fi.com/gpxstudio" target="_blank">
{i18n._('menu.support_button')} {i18n._('menu.support_button')}
<span class="ml-2">🙏</span> <span>🙏</span>
</Button> </Button>
<Button <Button
variant="outline" variant="outline"
@@ -117,7 +117,7 @@
exportState.current = ExportState.NONE; exportState.current = ExportState.NONE;
}} }}
> >
<Download size="16" class="mr-1" /> <Download size="16" />
{#if $fileStateCollection.size === 1 || (exportState.current === ExportState.SELECTION && $selection.size === 1)} {#if $fileStateCollection.size === 1 || (exportState.current === ExportState.SELECTION && $selection.size === 1)}
{i18n._('menu.download_file')} {i18n._('menu.download_file')}
{:else} {:else}

View File

@@ -68,7 +68,7 @@
open = false; open = false;
}} }}
> >
<Save size="16" class="mr-1" /> <Save size="16" />
{i18n._('menu.metadata.save')} {i18n._('menu.metadata.save')}
</Button> </Button>
</Popover.Content> </Popover.Content>

View File

@@ -164,7 +164,7 @@
disabled={!colorChanged && !opacityChanged && !widthChanged} disabled={!colorChanged && !opacityChanged && !widthChanged}
onclick={applyStyle} onclick={applyStyle}
> >
<Save size="16" class="mr-1" /> <Save size="16" />
{i18n._('menu.metadata.save')} {i18n._('menu.metadata.save')}
</Button> </Button>
</Popover.Content> </Popover.Content>

View File

@@ -16,7 +16,7 @@
</script> </script>
<Button <Button
class="w-full px-2 py-1 h-8 justify-start {className}" class="p-1 has-[>svg]:px-2 h-8 justify-start {className}"
variant="outline" variant="outline"
onclick={() => { onclick={() => {
navigator.clipboard.writeText( navigator.clipboard.writeText(
@@ -25,6 +25,6 @@
onCopy(); onCopy();
}} }}
> >
<ClipboardCopy size="16" class="mr-1" /> <ClipboardCopy size="16" />
{i18n._('menu.copy_coordinates')} {i18n._('menu.copy_coordinates')}
</Button> </Button>

View File

@@ -11,12 +11,16 @@
import sanitizeHtml from 'sanitize-html'; import sanitizeHtml from 'sanitize-html';
import type { Waypoint } from 'gpx'; import type { Waypoint } from 'gpx';
import { ScrollArea } from '$lib/components/ui/scroll-area/index.js'; import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
import type { PopupItem } from '$lib/components/map/map';
import { fileActions } from '$lib/logic/file-actions'; import { fileActions } from '$lib/logic/file-actions';
import type { PopupItem } from '$lib/components/map/map-popup';
export let waypoint: PopupItem<Waypoint>; let {
waypoint,
}: {
waypoint: PopupItem<Waypoint>;
} = $props();
$: symbolKey = waypoint ? getSymbolKey(waypoint.item.sym) : undefined; let symbolKey = $derived(waypoint ? getSymbolKey(waypoint.item.sym) : undefined);
function sanitize(text: string | undefined): string { function sanitize(text: string | undefined): string {
if (text === undefined) { if (text === undefined) {
@@ -50,11 +54,8 @@
{#if symbolKey} {#if symbolKey}
<span> <span>
{#if symbols[symbolKey].icon} {#if symbols[symbolKey].icon}
<svelte:component {@const Icon = symbols[symbolKey].icon}
this={symbols[symbolKey].icon} <Icon size="12" class="inline-block mb-1" />
size="12"
class="inline-block mb-0.5"
/>
{:else} {:else}
<span class="w-4 inline-block"></span> <span class="w-4 inline-block"></span>
{/if} {/if}
@@ -82,15 +83,16 @@
<CopyCoordinates coordinates={waypoint.item.attributes} /> <CopyCoordinates coordinates={waypoint.item.attributes} />
{#if $currentTool === Tool.WAYPOINT} {#if $currentTool === Tool.WAYPOINT}
<Button <Button
class="w-full px-2 py-1 h-8 justify-start" class="p-1 has-[>svg]:px-2 h-8"
variant="outline" variant="outline"
onclick={() => { onclick={() => {
if (waypoint.fileId) { if (waypoint.fileId) {
fileActions.deleteWaypoint(waypoint.fileId, waypoint.item._data.index); fileActions.deleteWaypoint(waypoint.fileId, waypoint.item._data.index);
waypoint.hide?.();
} }
}} }}
> >
<Trash2 size="16" class="mr-1" /> <Trash2 size="16" />
{i18n._('menu.delete')} {i18n._('menu.delete')}
<Shortcut shift={true} click={true} /> <Shortcut shift={true} click={true} />
</Button> </Button>

View File

@@ -463,7 +463,7 @@
{#if selectedLayerId} {#if selectedLayerId}
<div class="mt-2 flex flex-row gap-2"> <div class="mt-2 flex flex-row gap-2">
<Button variant="outline" onclick={createLayer} class="grow"> <Button variant="outline" onclick={createLayer} class="grow">
<Save size="16" class="mr-1" /> <Save size="16" />
{i18n._('layers.custom_layers.update')} {i18n._('layers.custom_layers.update')}
</Button> </Button>
<Button variant="outline" onclick={() => (selectedLayerId = undefined)}> <Button variant="outline" onclick={() => (selectedLayerId = undefined)}>
@@ -472,7 +472,7 @@
</div> </div>
{:else} {:else}
<Button variant="outline" class="mt-2" onclick={createLayer}> <Button variant="outline" class="mt-2" onclick={createLayer}>
<CirclePlus size="16" class="mr-1" /> <CirclePlus size="16" />
{i18n._('layers.custom_layers.create')} {i18n._('layers.custom_layers.create')}
</Button> </Button>
{/if} {/if}

View File

@@ -53,13 +53,14 @@
<div class="flex flex-row gap-3"> <div class="flex flex-row gap-3">
<div class="flex flex-col"> <div class="flex flex-col">
{name} {name}
<div class="text-muted-foreground text-sm font-normal"> <div class="text-muted-foreground text-xs font-normal">
{poi.item.lat.toFixed(6)}&deg; {poi.item.lon.toFixed(6)}&deg; {poi.item.lat.toFixed(6)}&deg; {poi.item.lon.toFixed(6)}&deg;
</div> </div>
</div> </div>
<Button <Button
class="ml-auto p-1.5 h-8" class="ml-auto"
variant="outline" variant="outline"
size="icon"
href="https://www.openstreetmap.org/edit?editor=id&{poi.item.type ?? href="https://www.openstreetmap.org/edit?editor=id&{poi.item.type ??
'node'}={poi.item.id}" 'node'}={poi.item.id}"
target="_blank" target="_blank"
@@ -95,7 +96,7 @@
</div> </div>
</ScrollArea> </ScrollArea>
<Button class="mt-2" variant="outline" disabled={$selection.size === 0} onclick={addToFile}> <Button class="mt-2" variant="outline" disabled={$selection.size === 0} onclick={addToFile}>
<MapPin size="16" class="mr-1" /> <MapPin size="16" />
{i18n._('toolbar.waypoint.add')} {i18n._('toolbar.waypoint.add')}
</Button> </Button>
</Card.Content> </Card.Content>

View File

@@ -177,7 +177,7 @@
rectangleCoordinates = []; rectangleCoordinates = [];
}} }}
> >
<Trash2 size="16" class="mr-1" /> <Trash2 size="16" />
{i18n._('toolbar.clean.button')} {i18n._('toolbar.clean.button')}
</Button> </Button>
<Help link={getURLForLanguage(i18n.lang, '/help/toolbar/clean')}> <Help link={getURLForLanguage(i18n.lang, '/help/toolbar/clean')}>

View File

@@ -26,7 +26,7 @@
} }
}} }}
> >
<MountainSnow size="16" class="mr-1 shrink-0" /> <MountainSnow size="16" class="shrink-0" />
{i18n._('toolbar.elevation.button')} {i18n._('toolbar.elevation.button')}
</Button> </Button>
<Help link={getURLForLanguage(i18n.lang, '/help/toolbar/elevation')}> <Help link={getURLForLanguage(i18n.lang, '/help/toolbar/elevation')}>

View File

@@ -46,7 +46,7 @@
<div class="flex flex-col gap-3 w-full max-w-80 {props.class ?? ''}"> <div class="flex flex-col gap-3 w-full max-w-80 {props.class ?? ''}">
<Button variant="outline" disabled={!validSelection} onclick={fileActions.extractSelection}> <Button variant="outline" disabled={!validSelection} onclick={fileActions.extractSelection}>
<Ungroup size="16" class="mr-1" /> <Ungroup size="16" />
{i18n._('toolbar.extract.button')} {i18n._('toolbar.extract.button')}
</Button> </Button>
<Help link={getURLForLanguage(i18n.lang, '/help/toolbar/extract')}> <Help link={getURLForLanguage(i18n.lang, '/help/toolbar/extract')}>

View File

@@ -86,7 +86,7 @@
); );
}} }}
> >
<Group size="16" class="mr-1 shrink-0" /> <Group size="16" class="shrink-0" />
{i18n._('toolbar.merge.merge_selection')} {i18n._('toolbar.merge.merge_selection')}
</Button> </Button>
<Help link={getURLForLanguage(i18n.lang, '/help/toolbar/merge')}> <Help link={getURLForLanguage(i18n.lang, '/help/toolbar/merge')}>

View File

@@ -188,7 +188,7 @@
<div class="flex flex-row gap-2 justify-center"> <div class="flex flex-row gap-2 justify-center">
<div class="flex flex-col gap-2 grow"> <div class="flex flex-col gap-2 grow">
<Label for="speed" class="flex flex-row"> <Label for="speed" class="flex flex-row">
<Zap size="16" class="mr-1" /> <Zap size="16" />
{#if $velocityUnits === 'speed'} {#if $velocityUnits === 'speed'}
{i18n._('quantities.speed')} {i18n._('quantities.speed')}
{:else} {:else}
@@ -241,7 +241,7 @@
</div> </div>
<div class="flex flex-col gap-2 grow"> <div class="flex flex-col gap-2 grow">
<Label for="duration" class="flex flex-row"> <Label for="duration" class="flex flex-row">
<Timer size="16" class="mr-1" /> <Timer size="16" />
{i18n._('toolbar.time.total_time')} {i18n._('toolbar.time.total_time')}
</Label> </Label>
<TimePicker <TimePicker
@@ -254,7 +254,7 @@
</div> </div>
</div> </div>
<Label class="flex flex-row"> <Label class="flex flex-row">
<CirclePlay size="16" class="mr-1" /> <CirclePlay size="16" />
{i18n._('toolbar.time.start')} {i18n._('toolbar.time.start')}
</Label> </Label>
<div class="flex flex-row gap-2"> <div class="flex flex-row gap-2">
@@ -280,7 +280,7 @@
/> />
</div> </div>
<Label class="flex flex-row"> <Label class="flex flex-row">
<CircleStop size="16" class="mr-1" /> <CircleStop size="16" />
{i18n._('toolbar.time.end')} {i18n._('toolbar.time.end')}
</Label> </Label>
<div class="flex flex-row gap-2"> <div class="flex flex-row gap-2">
@@ -393,10 +393,10 @@
}); });
}} }}
> >
<CalendarClock size="16" class="mr-1 shrink-0" /> <CalendarClock size="16" class="shrink-0" />
{i18n._('toolbar.time.update')} {i18n._('toolbar.time.update')}
</Button> </Button>
<Button variant="outline" onclick={setGPXData}> <Button variant="outline" size="icon" onclick={setGPXData}>
<CircleX size="16" /> <CircleX size="16" />
</Button> </Button>
</div> </div>

View File

@@ -47,7 +47,7 @@
<span class="font-normal">{reducedLayers.currentPoints}/{reducedLayers.maxPoints}</span> <span class="font-normal">{reducedLayers.currentPoints}/{reducedLayers.maxPoints}</span>
</Label> </Label>
<Button variant="outline" disabled={!validSelection} onclick={() => reducedLayers.reduce()}> <Button variant="outline" disabled={!validSelection} onclick={() => reducedLayers.reduce()}>
<Funnel size="16" class="mr-1" /> <Funnel size="16" />
{i18n._('toolbar.reduce.button')} {i18n._('toolbar.reduce.button')}
</Button> </Button>

View File

@@ -15,7 +15,7 @@
</script> </script>
<div bind:this={element} class="hidden"> <div bind:this={element} class="hidden">
<Card.Root class="border-none shadow-md text-base"> <Card.Root class="border-none shadow-md text-base p-0 gap-0 rounded-lg">
<Card.Content class="flex flex-col p-1"> <Card.Content class="flex flex-col p-1">
{#if $canChangeStart} {#if $canChangeStart}
<Button <Button
@@ -23,7 +23,7 @@
variant="ghost" variant="ghost"
onclick={() => element?.dispatchEvent(new CustomEvent('change-start'))} onclick={() => element?.dispatchEvent(new CustomEvent('change-start'))}
> >
<CirclePlay size="16" class="mr-1" /> <CirclePlay size="16" />
{i18n._('toolbar.routing.start_loop_here')} {i18n._('toolbar.routing.start_loop_here')}
</Button> </Button>
{/if} {/if}
@@ -32,7 +32,7 @@
variant="ghost" variant="ghost"
onclick={() => element?.dispatchEvent(new CustomEvent('delete'))} onclick={() => element?.dispatchEvent(new CustomEvent('delete'))}
> >
<Trash2 size="16" class="mr-1" /> <Trash2 size="16" />
{i18n._('menu.delete')} {i18n._('menu.delete')}
<Shortcut shift={true} click={true} /> <Shortcut shift={true} click={true} />
</Button> </Button>

View File

@@ -99,7 +99,7 @@
disabled={!validSelection || !canCrop} disabled={!validSelection || !canCrop}
onclick={() => fileActions.cropSelection(sliderValues[0], sliderValues[1])} onclick={() => fileActions.cropSelection(sliderValues[0], sliderValues[1])}
> >
<Crop size="16" class="mr-1" />{i18n._('toolbar.scissors.crop')} <Crop size="16" />{i18n._('toolbar.scissors.crop')}
</Button> </Button>
<Separator /> <Separator />
<Label class="flex flex-row flex-wrap gap-3 items-center"> <Label class="flex flex-row flex-wrap gap-3 items-center">

View File

@@ -203,14 +203,14 @@
onclick={createOrUpdateWaypoint} onclick={createOrUpdateWaypoint}
> >
{#if $selectedWaypoint} {#if $selectedWaypoint}
<Save size="16" class="mr-1 shrink-0" /> <Save size="16" class="shrink-0" />
{i18n._('menu.metadata.save')} {i18n._('menu.metadata.save')}
{:else} {:else}
<MapPin size="16" class="mr-1 shrink-0" /> <MapPin size="16" class="shrink-0" />
{i18n._('toolbar.waypoint.create')} {i18n._('toolbar.waypoint.create')}
{/if} {/if}
</Button> </Button>
<Button variant="outline" onclick={() => selectedWaypoint.reset()}> <Button variant="outline" size="icon" onclick={() => selectedWaypoint.reset()}>
<CircleX size="16" /> <CircleX size="16" />
</Button> </Button>
</div> </div>

View File

@@ -2,7 +2,7 @@
import { HeartHandshake } from '@lucide/svelte'; import { HeartHandshake } from '@lucide/svelte';
</script> </script>
## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Help keep the website free (and ad-free) ## <HeartHandshake size="18" class="inline-block align-baseline" /> Help keep the website free (and ad-free)
Each time you add or move GPS points, our servers calculate the best route on the road network. Each time you add or move GPS points, our servers calculate the best route on the road network.
We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places. We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.

View File

@@ -2,7 +2,7 @@
import { Languages } from '@lucide/svelte'; import { Languages } from '@lucide/svelte';
</script> </script>
## <Languages size="18" class="mr-1 inline-block align-baseline" /> Translation ## <Languages size="18" class="inline-block align-baseline" /> Translation
The website is translated by volunteers using a collaborative translation platform. The website is translated by volunteers using a collaborative translation platform.
You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>. You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.

View File

@@ -65,7 +65,7 @@
</div> </div>
<div class="w-full flex flex-row justify-center gap-3"> <div class="w-full flex flex-row justify-center gap-3">
<Button href={getURLForLanguage(i18n.lang, '/app')} class="w-1/3 min-w-fit"> <Button href={getURLForLanguage(i18n.lang, '/app')} class="w-1/3 min-w-fit">
<Map size="18" class="mr-1.5" /> <Map size="18" />
{i18n._('homepage.app')} {i18n._('homepage.app')}
</Button> </Button>
<Button <Button
@@ -73,7 +73,7 @@
href={getURLForLanguage(i18n.lang, '/help')} href={getURLForLanguage(i18n.lang, '/help')}
class="w-1/3 min-w-fit" class="w-1/3 min-w-fit"
> >
<BookOpenText size="18" class="mr-1.5" /> <BookOpenText size="18" />
<span>{i18n._('menu.help')}</span> <span>{i18n._('menu.help')}</span>
</Button> </Button>
</div> </div>
@@ -96,7 +96,7 @@
> >
<div class="markdown text-center"> <div class="markdown text-center">
<h1> <h1>
<Route size="24" class="mr-1 inline-block align-baseline" /> <Route size="24" class="inline-block align-baseline" />
{i18n._('homepage.route_planning')} {i18n._('homepage.route_planning')}
</h1> </h1>
<p class="text-muted-foreground">{i18n._('homepage.route_planning_description')}</p> <p class="text-muted-foreground">{i18n._('homepage.route_planning_description')}</p>
@@ -112,7 +112,7 @@
> >
<div class="markdown text-center md:hidden"> <div class="markdown text-center md:hidden">
<h1> <h1>
<PencilRuler size="24" class="mr-1 inline-block align-baseline" /> <PencilRuler size="24" class="inline-block align-baseline" />
{i18n._('homepage.file_processing')} {i18n._('homepage.file_processing')}
</h1> </h1>
<p class="text-muted-foreground"> <p class="text-muted-foreground">
@@ -124,7 +124,7 @@
</div> </div>
<div class="markdown text-center hidden md:block"> <div class="markdown text-center hidden md:block">
<h1> <h1>
<PencilRuler size="24" class="mr-1 inline-block align-baseline" /> <PencilRuler size="24" class="inline-block align-baseline" />
{i18n._('homepage.file_processing')} {i18n._('homepage.file_processing')}
</h1> </h1>
<p class="text-muted-foreground"> <p class="text-muted-foreground">
@@ -139,7 +139,7 @@
> >
<div class="markdown text-center"> <div class="markdown text-center">
<h1> <h1>
<Map size="24" class="mr-1 inline-block align-baseline" /> <Map size="24" class="inline-block align-baseline" />
{i18n._('homepage.maps')} {i18n._('homepage.maps')}
</h1> </h1>
<p class="text-muted-foreground">{i18n._('homepage.maps_description')}</p> <p class="text-muted-foreground">{i18n._('homepage.maps_description')}</p>
@@ -182,7 +182,7 @@
<div class="px-8 md:px-12"> <div class="px-8 md:px-12">
<div class="markdown text-center px-4 md:px-12"> <div class="markdown text-center px-4 md:px-12">
<h1> <h1>
<ChartArea size="24" class="mr-1 inline-block align-baseline" /> <ChartArea size="24" class="inline-block align-baseline" />
{i18n._('homepage.data_visualization')} {i18n._('homepage.data_visualization')}
</h1> </h1>
<p class="text-muted-foreground mb-6"> <p class="text-muted-foreground mb-6">
@@ -214,7 +214,7 @@
> >
<div class="markdown text-center md:hidden"> <div class="markdown text-center md:hidden">
<h1> <h1>
<Scale size="24" class="mr-1 inline-block align-baseline" /> <Scale size="24" class="inline-block align-baseline" />
{i18n._('homepage.identity')} {i18n._('homepage.identity')}
</h1> </h1>
<p class="text-muted-foreground">{i18n._('homepage.identity_description')}</p> <p class="text-muted-foreground">{i18n._('homepage.identity_description')}</p>
@@ -224,7 +224,7 @@
</a> </a>
<div class="markdown text-center hidden md:block"> <div class="markdown text-center hidden md:block">
<h1> <h1>
<Scale size="24" class="mr-1 inline-block align-baseline" /> <Scale size="24" class="inline-block align-baseline" />
{i18n._('homepage.identity')} {i18n._('homepage.identity')}
</h1> </h1>
<p class="text-muted-foreground">{i18n._('homepage.identity_description')}</p> <p class="text-muted-foreground">{i18n._('homepage.identity_description')}</p>
@@ -250,7 +250,7 @@
<DocsContainer module={fundingModule.default} /> <DocsContainer module={fundingModule.default} />
{/await} {/await}
<Button href="https://ko-fi.com/gpxstudio" target="_blank" class="text-base"> <Button href="https://ko-fi.com/gpxstudio" target="_blank" class="text-base">
<Heart size="16" class="mr-1" fill="var(--support)" color="var(--support)" /> <Heart size="16" fill="var(--support)" color="var(--support)" />
<span>{i18n._('homepage.support_button')}</span> <span>{i18n._('homepage.support_button')}</span>
</Button> </Button>
</div> </div>
@@ -261,7 +261,7 @@
<DocsContainer module={translationModule.default} /> <DocsContainer module={translationModule.default} />
{/await} {/await}
<Button href="https://crowdin.com/project/gpxstudio" target="_blank" class="text-base"> <Button href="https://crowdin.com/project/gpxstudio" target="_blank" class="text-base">
<PenLine size="16" class="mr-1" /> <PenLine size="16" />
<span>{i18n._('homepage.contribute')}</span> <span>{i18n._('homepage.contribute')}</span>
</Button> </Button>
</div> </div>

View File

@@ -38,7 +38,7 @@
{guideIcons[subGuide]} {guideIcons[subGuide]}
{:else} {:else}
{@const GuideIcon = guideIcons[subGuide]} {@const GuideIcon = guideIcons[subGuide]}
<GuideIcon size="16" class="mr-1 shrink-0" /> <GuideIcon size="16" class="shrink-0" />
{/if} {/if}
{data.guideTitles[`${guide}/${subGuide}`]} {data.guideTitles[`${guide}/${subGuide}`]}
</Button> </Button>