diff --git a/app/Controllers/LocaleSwitcher.php b/app/Controllers/LocaleSwitcher.php index d168874..4bfa525 100644 --- a/app/Controllers/LocaleSwitcher.php +++ b/app/Controllers/LocaleSwitcher.php @@ -110,7 +110,11 @@ final class LocaleSwitcher public static function flagImg(string $locale): string { $src = self::flagSource($locale); - return ''; + // 32×24 = ~4:3, large enough that the flag is the visual + // anchor of the option. No loading="lazy" — these are 4 + // small SVGs that must be ready the moment the
+ // opens (lazy would cause a flash of empty boxes). + return ''; } /** diff --git a/public/css/haus-schleusingen.css b/public/css/haus-schleusingen.css index 5607074..5eee285 100755 --- a/public/css/haus-schleusingen.css +++ b/public/css/haus-schleusingen.css @@ -1476,7 +1476,14 @@ footer { } } -/* LOCALE SWITCHER — single
dropdown, flag-sized trigger */ +/* LOCALE SWITCHER — single
dropdown, flag-sized trigger. + Design goals (after Martin-feedback round 3): + - The flag is the visual anchor of every row, not a tiny icon + drowning in padding. + - Trigger is a 44×44 touch target with the flag centred, no + artificial 1px outline (real flag-icons need no border). + - Menu rows are 40px+ tall with comfortable flag+label spacing. + - No FOUC on open: SVGs load eager (4 small files). */ .locale-switcher { position: relative; display: inline-block; @@ -1485,15 +1492,14 @@ footer { .locale-switcher__trigger { display: inline-flex; align-items: center; - gap: 0.25rem; - padding: 14px 8px; + gap: 4px; + padding: 6px; + min-height: 44px; border: none; - border-radius: 4px; + border-radius: 6px; background: transparent; cursor: pointer; list-style: none; - min-height: 44px; - min-width: 44px; color: var(--dark); transition: background 0.2s, @@ -1516,11 +1522,10 @@ footer { } .locale-switcher__caret { - font-size: 0.65rem; + font-size: 0.7rem; line-height: 1; color: inherit; transition: transform 0.2s ease; - margin-left: 2px; } .locale-switcher[open] .locale-switcher__caret { @@ -1533,25 +1538,27 @@ footer { right: 0; min-width: 180px; margin: 0; - padding: 0.4rem; + padding: 6px; list-style: none; background: var(--white); border: 1px solid var(--warm); - border-radius: 8px; - box-shadow: 0 8px 24px rgb(0 0 0 / 14%); + border-radius: 10px; + box-shadow: + 0 1px 2px rgb(0 0 0 / 6%), + 0 8px 24px rgb(0 0 0 / 14%); z-index: 60; } .locale-switcher__option { display: flex; align-items: center; - gap: 0.6rem; - padding: 0.6rem 0.7rem; - border-radius: 4px; + gap: 10px; + padding: 8px 10px; + border-radius: 6px; text-decoration: none; color: var(--dark); - font-size: 0.85rem; - min-height: 44px; + font-size: 0.9rem; + font-weight: 500; } .locale-switcher__option.is-current { @@ -1566,24 +1573,13 @@ footer { outline: none; } +/* Flag is the visual anchor: 32×24, no border, no rounded corners + (flags look better as crisp rectangles than as pills). */ .locale-switcher .flag { - width: 24px; - height: 18px; - flex: 0 0 24px; - border-radius: 2px; - box-shadow: 0 0 0 1px rgb(0 0 0 / 15%); + width: 32px; + height: 24px; + flex: 0 0 32px; display: block; - object-fit: cover; -} - -.locale-switcher__option .flag { - width: 24px; - height: 18px; - flex: 0 0 24px; - border-radius: 2px; - box-shadow: 0 0 0 1px rgb(0 0 0 / 15%); - display: block; - object-fit: cover; } .locale-switcher__label { diff --git a/tests/Controllers/LocaleSwitcherTest.php b/tests/Controllers/LocaleSwitcherTest.php index 95b9356..4a9d2f8 100644 --- a/tests/Controllers/LocaleSwitcherTest.php +++ b/tests/Controllers/LocaleSwitcherTest.php @@ -111,7 +111,7 @@ final class LocaleSwitcherTest extends TestCase $img = LocaleSwitcher::flagImg($code); self::assertStringStartsWith('', $img); }