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

improve layout shift and accessibility

Browse Source
This commit is contained in:
vcoppe
2024-09-21 19:15:19 +02:00
parent 1483460ec6
commit d4460f95dd
11 changed files with 29 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
website/src/lib/components/Help.svelte
View File

@@ -5,16 +5,14 @@
export let link: string | undefined = undefined;
</script>
<div class="text-sm bg-muted rounded border flex flex-row items-center p-2 {$$props.class || ''}">
<div
class="text-sm bg-secondary rounded border flex flex-row items-center p-2 {$$props.class || ''}"
>
<CircleHelp size="16" class="w-4 mr-2 shrink-0 grow-0" />
<div>
<slot />
{#if link}
<a
href={link}
target="_blank"
class="text-sm text-blue-500 dark:text-blue-300 hover:underline"
>
<a href={link} target="_blank" class="text-sm text-link hover:underline">
{$_('menu.more')}
</a>
{/if}

6
website/src/lib/components/docs/DocsContainer.svelte
View File

@@ -41,17 +41,17 @@
}
:global(.markdown > a) {
@apply text-blue-500;
@apply text-link;
@apply hover:underline;
}
:global(.markdown p > a) {
@apply text-blue-500;
@apply text-link;
@apply hover:underline;
}
:global(.markdown li > a) {
@apply text-blue-500;
@apply text-link;
@apply hover:underline;
}

6
website/src/lib/components/docs/DocsNote.svelte
View File

@@ -3,8 +3,8 @@
</script>
<div
class="bg-accent border-l-8 {type === 'note'
? 'border-blue-500'
class="bg-secondary border-l-8 {type === 'note'
? 'border-link'
: 'border-destructive'} p-2 text-sm rounded-md"
>
<slot />
@@ -12,7 +12,7 @@
<style lang="postcss">
div :global(a) {
@apply text-blue-500;
@apply text-link;
@apply hover:underline;
}
</style>

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

@@ -99,7 +99,7 @@
<style lang="postcss">
div :global(a) {
@apply text-blue-500 dark:text-blue-300;
@apply text-link;
@apply hover:underline;
}

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

@@ -62,11 +62,11 @@
{#if key !== 'name' && !key.includes('image')}
<span class="font-mono">{key}</span>
{#if key === 'website' || key === 'contact:website' || key === 'contact:facebook' || key === 'contact:instagram' || key === 'contact:twitter'}
<a href={value} target="_blank" class="text-blue-500 underline">{value}</a>
<a href={value} target="_blank" class="text-link underline">{value}</a>
{:else if key === 'phone' || key === 'contact:phone'}
<a href={'tel:' + value} class="text-blue-500 underline">{value}</a>
<a href={'tel:' + value} class="text-link underline">{value}</a>
{:else if key === 'email' || key === 'contact:email'}
<a href={'mailto:' + value} class="text-blue-500 underline">{value}</a>
<a href={'mailto:' + value} class="text-link underline">{value}</a>
{:else}
<span>{value}</span>
{/if}