Skip to content

Commit c66f689

Browse files
authored
feat: Show local language name in language switcher (#285)
Instead of the English language name, show the local language name of the individual languages in the language switcher. Since users might not understand or recognize the local language name, a translate icon has been added.
1 parent 6d9caaf commit c66f689

File tree

3 files changed

+9
-10
lines changed

3 files changed

+9
-10
lines changed

assets/sass/footer.scss

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,8 @@
4848
display: flex;
4949
font-weight: 500;
5050
padding: 1rem 1rem 1rem 0;
51-
}
52-
53-
.o-language-switcher__current {
54-
margin-right: 0.5rem;
51+
gap: 0.5rem;
52+
align-items: center;
5553
}
5654

5755
.o-language-switcher__icon {
@@ -88,7 +86,7 @@
8886
}
8987

9088
.o-language-switcher__item {
91-
margin: 1.6rem;
89+
margin: 1.6rem 3rem;
9290
}
9391

9492
.o-language-switcher__link {

hugo.yaml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,12 @@ languages:
1212
weight: 1
1313
title: 'FIP Guide – Fast. Clear. Community-based.'
1414
de:
15-
languageName: "German"
15+
languageName: "Deutsch"
1616
languageCode: de
1717
weight: 2
1818
title: 'FIP Guide – Schnell. Übersichtlich. Community-basiert.'
1919
fr:
20-
languageName: "French"
20+
languageName: "Français"
2121
languageCode: fr
2222
weight: 3
2323
title: 'FIP Guide – Rapide. Clair. Basé sur le partage.'

layouts/partials/footer.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,11 @@
2626
aria-controls="language-dropdown"
2727
title="{{ T "language-switcher.aria-label" }}"
2828
aria-label='{{ T "language-switcher.aria-label" }}'>
29-
<span class="o-language-switcher__current">{{ $.Site.Language.LanguageName }}</span>
30-
<span class="o-language-switcher__icon">
29+
{{ partial "icon" "translate" }}
30+
<div>{{ $.Site.Language.LanguageName }}</div>
31+
<div class="o-language-switcher__icon">
3132
{{ partial "icon" "keyboard_arrow_down" }}
32-
</span>
33+
</div>
3334
</button>
3435
<ul class="o-language-switcher__dropdown"
3536
role="listbox"

0 commit comments

Comments
 (0)