steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-08-31 15:43:25 +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

2
website/src/app.html
View File

@@ -4,7 +4,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
%sveltekit.head% %sveltekit.head%
</head> </head>

4
website/src/app.pcss
View File

@@ -32,6 +32,8 @@
--destructive-foreground: 210 40% 98%; --destructive-foreground: 210 40% 98%;
--support: 220 15 130; --support: 220 15 130;
--link: 0 110 180;
--ring: 222.2 84% 4.9%; --ring: 222.2 84% 4.9%;
@@ -67,6 +69,8 @@
--destructive-foreground: 210 40% 98%; --destructive-foreground: 210 40% 98%;
--support: 255 110 190; --support: 255 110 190;
--link: 80 190 255;
--ring: hsl(212.7,26.8%,83.9); --ring: hsl(212.7,26.8%,83.9);
} }

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

@@ -5,16 +5,14 @@
export let link: string | undefined = undefined; export let link: string | undefined = undefined;
</script> </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" /> <CircleHelp size="16" class="w-4 mr-2 shrink-0 grow-0" />
<div> <div>
<slot /> <slot />
{#if link} {#if link}
<a <a href={link} target="_blank" class="text-sm text-link hover:underline">
href={link}
target="_blank"
class="text-sm text-blue-500 dark:text-blue-300 hover:underline"
>
{$_('menu.more')} {$_('menu.more')}
</a> </a>
{/if} {/if}

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

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

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

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

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

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

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

@@ -62,11 +62,11 @@
{#if key !== 'name' && !key.includes('image')} {#if key !== 'name' && !key.includes('image')}
<span class="font-mono">{key}</span> <span class="font-mono">{key}</span>
{#if key === 'website' || key === 'contact:website' || key === 'contact:facebook' || key === 'contact:instagram' || key === 'contact:twitter'} {#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'} {: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'} {: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} {:else}
<span>{value}</span> <span>{value}</span>
{/if} {/if}

4
website/src/routes/[[language]]/help/+layout.svelte
View File

@@ -16,7 +16,7 @@
<Button <Button
variant="link" variant="link"
href={getURLForLanguage($locale, `/help/${guide}`)} href={getURLForLanguage($locale, `/help/${guide}`)}
class="h-fit p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal {$page class="min-h-5 h-fit p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal {$page
.params.guide === guide .params.guide === guide
? 'font-semibold text-foreground' ? 'font-semibold text-foreground'
: ''}" : ''}"
@@ -29,7 +29,7 @@
<Button <Button
variant="link" variant="link"
href={getURLForLanguage($locale, `/help/${guide}/${subGuide}`)} href={getURLForLanguage($locale, `/help/${guide}/${subGuide}`)}
class="h-fit p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal ml-3 {$page class="min-h-5 h-fit p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal ml-3 {$page
.params.guide === .params.guide ===
guide + '/' + subGuide guide + '/' + subGuide
? 'font-semibold text-foreground' ? 'font-semibold text-foreground'

8
website/src/routes/[[language]]/help/+page.svelte
View File

@@ -14,13 +14,13 @@
<Button <Button
variant="outline" variant="outline"
href={getURLForLanguage($locale, `/help/${guide}`)} href={getURLForLanguage($locale, `/help/${guide}`)}
class="h-full pt-6 pb-3 px-0" class="min-h-36 h-full pt-6 pb-3 px-0"
> >
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<div class="text-center text-5xl"> <div class="h-12 text-center text-5xl">
{guideIcons[guide]} {guideIcons[guide]}
</div> </div>
<div class="text-2xl text-center my-3 w-full whitespace-normal px-6"> <div class="min-h-8 text-2xl text-center my-3 w-full whitespace-normal px-6">
{#await data.guideModules[guide] then guideModule} {#await data.guideModules[guide] then guideModule}
{guideModule.metadata.title} {guideModule.metadata.title}
{/await} {/await}
@@ -30,7 +30,7 @@
<Button <Button
variant="link" variant="link"
href={getURLForLanguage($locale, `/help/${guide}/${subGuide}`)} href={getURLForLanguage($locale, `/help/${guide}/${subGuide}`)}
class="h-fit px-0 py-1 text-muted-foreground text-base text-center whitespace-normal" class="min-h-8 h-fit min-w-24 px-0 py-1 text-muted-foreground text-base text-center whitespace-normal"
> >
<svelte:component this={guideIcons[subGuide]} size="16" class="mr-1 shrink-0" /> <svelte:component this={guideIcons[subGuide]} size="16" class="mr-1 shrink-0" />
{#await data.guideModules[`${guide}/${subGuide}`] then guideModule} {#await data.guideModules[`${guide}/${subGuide}`] then guideModule}

6
website/src/routes/[[language]]/help/[...guide]/+page.svelte
View File

@@ -53,7 +53,7 @@
variant="link" variant="link"
href="https://www.reddit.com/r/gpxstudio/" href="https://www.reddit.com/r/gpxstudio/"
target="_blank" target="_blank"
class="p-0 h-6 text-blue-500" class="p-0 h-6 text-link"
> >
<CornerDownRight size="16" class="mr-1" /> <CornerDownRight size="16" class="mr-1" />
{$_('docs.ask_on_reddit')} {$_('docs.ask_on_reddit')}
@@ -65,7 +65,7 @@
href="https://github.com/gpxstudio/gpx.studio/edit/dev/website/src/lib/docs/en/{$page.params href="https://github.com/gpxstudio/gpx.studio/edit/dev/website/src/lib/docs/en/{$page.params
.guide}.mdx" .guide}.mdx"
target="_blank" target="_blank"
class="p-0 h-6 ml-auto text-blue-500" class="p-0 h-6 ml-auto text-link"
> >
<PenLine size="16" class="mr-1" /> <PenLine size="16" class="mr-1" />
Edit this page on GitHub Edit this page on GitHub
@@ -75,7 +75,7 @@
variant="link" variant="link"
href="https://crowdin.com/project/gpxstudio/{$locale}" href="https://crowdin.com/project/gpxstudio/{$locale}"
target="_blank" target="_blank"
class="p-0 h-6 ml-auto text-blue-500" class="p-0 h-6 ml-auto text-link"
> >
<PenLine size="16" class="mr-1" /> <PenLine size="16" class="mr-1" />
{$_('docs.translate')} {$_('docs.translate')}

1
website/tailwind.config.js
View File

@@ -42,6 +42,7 @@ const config = {
foreground: "hsl(var(--card-foreground) / <alpha-value>)" foreground: "hsl(var(--card-foreground) / <alpha-value>)"
}, },
support: "rgb(var(--support))", support: "rgb(var(--support))",
link: "rgb(var(--link))"
}, },
borderRadius: { borderRadius: {
lg: "var(--radius)", lg: "var(--radius)",