steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-09-04 01:22:32 +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

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

@@ -16,7 +16,7 @@
<Button
variant="link"
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
? 'font-semibold text-foreground'
: ''}"
@@ -29,7 +29,7 @@
<Button
variant="link"
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 ===
guide + '/' + subGuide
? 'font-semibold text-foreground'

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

@@ -14,13 +14,13 @@
<Button
variant="outline"
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="text-center text-5xl">
<div class="h-12 text-center text-5xl">
{guideIcons[guide]}
</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}
{guideModule.metadata.title}
{/await}
@@ -30,7 +30,7 @@
<Button
variant="link"
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" />
{#await data.guideModules[`${guide}/${subGuide}`] then guideModule}

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

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