Sprachumschalter: Flaggen-Emojis durch Globus-Symbol + Klarnamen ersetzt
Windows rendert Flaggen-Emojis nicht als Bild, sondern zeigt den nackten
Regions-Code an (z.B. "DE") — zusammen mit dem eigenen Kürzel ergab das
eine unschöne Dopplung ("DE DE") bzw. bei Englisch sogar einen falschen
Ländercode (🇬🇧 = GB, nicht EN). Jetzt: einzelnes 🌐-Symbol im Knopf,
volle Sprachnamen im Dropdown (Deutsch, Deutsch (Schweiz), English,
Français, Português) - eindeutig auf jedem Betriebssystem.
This commit is contained in:
+1
-1
@@ -195,7 +195,7 @@ header.site-header {
|
|||||||
Kürzel pro Zeile), rechtsbündig statt zentriert, damit er nicht über
|
Kürzel pro Zeile), rechtsbündig statt zentriert, damit er nicht über
|
||||||
den Seitenrand hinausragt. */
|
den Seitenrand hinausragt. */
|
||||||
.sprach-schalter > button { font-size: 1.02rem; }
|
.sprach-schalter > button { font-size: 1.02rem; }
|
||||||
.sprach-schalter .nav-dropdown { min-width: 130px; left: auto; right: 0; transform: none; }
|
.sprach-schalter .nav-dropdown { min-width: 175px; left: auto; right: 0; transform: none; }
|
||||||
.sprach-schalter .nav-dropdown a { display: flex; align-items: center; gap: .5rem; }
|
.sprach-schalter .nav-dropdown a { display: flex; align-items: center; gap: .5rem; }
|
||||||
|
|
||||||
/* "Bewerben" ist der Treffpunkt beider Welten (Team Dogi + Spicy Media) —
|
/* "Bewerben" ist der Treffpunkt beider Welten (Team Dogi + Spicy Media) —
|
||||||
|
|||||||
+13
-7
@@ -27,12 +27,18 @@
|
|||||||
die Seite erhalten. Ein komplett neuer Besuch (keine Speicherung)
|
die Seite erhalten. Ein komplett neuer Besuch (keine Speicherung)
|
||||||
startet immer auf Deutsch — nie automatische Browsersprache-Erkennung.
|
startet immer auf Deutsch — nie automatische Browsersprache-Erkennung.
|
||||||
=================================================================== */
|
=================================================================== */
|
||||||
|
/* Bewusst KEINE Flaggen-Emojis: Windows rendert Flaggen-Emojis
|
||||||
|
grundsätzlich nicht als Bild, sondern als nackten Buchstaben-Code
|
||||||
|
(z.B. "DE") — zusammen mit dem eigenen Kürzel wäre das "DE DE",
|
||||||
|
"GB EN" (Flagge≠Sprachcode bei Englisch) usw. Ein einzelnes
|
||||||
|
Globus-Symbol im Knopf plus volle Sprachnamen im Dropdown ist
|
||||||
|
eindeutig und funktioniert auf jedem Betriebssystem gleich. */
|
||||||
const SPRACHEN = [
|
const SPRACHEN = [
|
||||||
{ code: "de", flagge: "🇩🇪", kurz: "DE" },
|
{ code: "de", kurz: "DE", name: "Deutsch" },
|
||||||
{ code: "de-CH", flagge: "🇨🇭", kurz: "CH" },
|
{ code: "de-CH", kurz: "CH", name: "Deutsch (Schweiz)" },
|
||||||
{ code: "en", flagge: "🇬🇧", kurz: "EN" },
|
{ code: "en", kurz: "EN", name: "English" },
|
||||||
{ code: "fr", flagge: "🇫🇷", kurz: "FR" },
|
{ code: "fr", kurz: "FR", name: "Français" },
|
||||||
{ code: "pt", flagge: "🇵🇹", kurz: "PT" },
|
{ code: "pt", kurz: "PT", name: "Português" },
|
||||||
];
|
];
|
||||||
const SPRACHE_SCHLUESSEL = "dogi-sprache";
|
const SPRACHE_SCHLUESSEL = "dogi-sprache";
|
||||||
|
|
||||||
@@ -246,11 +252,11 @@
|
|||||||
const aktiv = SPRACHEN.find((s) => s.code === aktuell) || SPRACHEN[0];
|
const aktiv = SPRACHEN.find((s) => s.code === aktuell) || SPRACHEN[0];
|
||||||
return `
|
return `
|
||||||
<div class="nav-group sprach-schalter">
|
<div class="nav-group sprach-schalter">
|
||||||
<button type="button" aria-expanded="false" aria-label="${t("sprache_aria")}">${aktiv.flagge} ${aktiv.kurz} <span aria-hidden="true">▾</span></button>
|
<button type="button" aria-expanded="false" aria-label="${t("sprache_aria")}">🌐 ${aktiv.kurz} <span aria-hidden="true">▾</span></button>
|
||||||
<div class="nav-dropdown">
|
<div class="nav-dropdown">
|
||||||
${SPRACHEN.map(
|
${SPRACHEN.map(
|
||||||
(s) =>
|
(s) =>
|
||||||
`<a href="#" data-sprache="${s.code}"${s.code === aktuell ? ' class="active"' : ""}>${s.flagge} ${s.kurz}</a>`
|
`<a href="#" data-sprache="${s.code}"${s.code === aktuell ? ' class="active"' : ""}>${s.name}</a>`
|
||||||
).join("")}
|
).join("")}
|
||||||
</div>
|
</div>
|
||||||
</div>`;
|
</div>`;
|
||||||
|
|||||||
Reference in New Issue
Block a user