steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-12-02 10:02:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

small style fixes

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

10
website/src/lib/components/export/Export.svelte
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"
>
<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="max-w-[80%] text-sm">
<span class="w-12 shrink-0 text-center text-xl">⚠️</span>
<span class="text-sm">
{i18n._('menu.support_message')}
</span>
</div>
<div class="w-full flex flex-row flex-wrap gap-2">
<Button class="bg-support grow" href="https://ko-fi.com/gpxstudio" target="_blank">
{i18n._('menu.support_button')}
<span class="ml-2">🙏</span>
<span>🙏</span>
</Button>
<Button
variant="outline"
@@ -117,7 +117,7 @@
exportState.current = ExportState.NONE;
}}
>
<Download size="16" class="mr-1" />
<Download size="16" />
{#if $fileStateCollection.size === 1 || (exportState.current === ExportState.SELECTION && $selection.size === 1)}
{i18n._('menu.download_file')}
{:else}

2
website/src/lib/components/file-list/metadata/MetadataDialog.svelte
View File

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

2
website/src/lib/components/file-list/style/StyleDialog.svelte
View File

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

4
website/src/lib/components/map/gpx-layer/CopyCoordinates.svelte
View File

@@ -16,7 +16,7 @@
</script>
<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"
onclick={() => {
navigator.clipboard.writeText(
@@ -25,6 +25,6 @@
onCopy();
}}
>
<ClipboardCopy size="16" class="mr-1" />
<ClipboardCopy size="16" />
{i18n._('menu.copy_coordinates')}
</Button>

22
website/src/lib/components/map/gpx-layer/WaypointPopup.svelte
View File

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

4
website/src/lib/components/map/layer-control/CustomLayers.svelte
View File

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

7
website/src/lib/components/map/layer-control/OverpassPopup.svelte
View File

@@ -53,13 +53,14 @@
<div class="flex flex-row gap-3">
<div class="flex flex-col">
{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;
</div>
</div>
<Button
class="ml-auto p-1.5 h-8"
class="ml-auto"
variant="outline"
size="icon"
href="https://www.openstreetmap.org/edit?editor=id&{poi.item.type ??
'node'}={poi.item.id}"
target="_blank"
@@ -95,7 +96,7 @@
</div>
</ScrollArea>
<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')}
</Button>
</Card.Content>

2
website/src/lib/components/toolbar/tools/Clean.svelte
View File

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

2
website/src/lib/components/toolbar/tools/Elevation.svelte
View File

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

2
website/src/lib/components/toolbar/tools/Extract.svelte
View File

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

2
website/src/lib/components/toolbar/tools/Merge.svelte
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')}
</Button>
<Help link={getURLForLanguage(i18n.lang, '/help/toolbar/merge')}>

12
website/src/lib/components/toolbar/tools/Time.svelte
View File

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

2
website/src/lib/components/toolbar/tools/reduce/Reduce.svelte
View File

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

6
website/src/lib/components/toolbar/tools/routing/RoutingControlPopup.svelte
View File

@@ -15,7 +15,7 @@
</script>
<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">
{#if $canChangeStart}
<Button
@@ -23,7 +23,7 @@
variant="ghost"
onclick={() => element?.dispatchEvent(new CustomEvent('change-start'))}
>
<CirclePlay size="16" class="mr-1" />
<CirclePlay size="16" />
{i18n._('toolbar.routing.start_loop_here')}
</Button>
{/if}
@@ -32,7 +32,7 @@
variant="ghost"
onclick={() => element?.dispatchEvent(new CustomEvent('delete'))}
>
<Trash2 size="16" class="mr-1" />
<Trash2 size="16" />
{i18n._('menu.delete')}
<Shortcut shift={true} click={true} />
</Button>

2
website/src/lib/components/toolbar/tools/scissors/Scissors.svelte
View File

@@ -99,7 +99,7 @@
disabled={!validSelection || !canCrop}
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>
<Separator />
<Label class="flex flex-row flex-wrap gap-3 items-center">

6
website/src/lib/components/toolbar/tools/waypoint/Waypoint.svelte
View File

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