Changeset 2149f5a in Klonkt

Timestamp:

06/20/2026 01:59:32 PM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

83b8b8f

Parents:

66cfbaa

Message:

feat(i18n): language dropdown (NL/EN/DE) in the header nav instead of footer

• Compact language select in the topnav action row (desktop), codes NL/EN/DE.
• Footer select only on mobile (desktop has it in the header).
• Standalone admin dashboard select removed (header select shows on admin too).

style.css?v=27.

Co-Authored-By: Claude <noreply@…>

Location:

src

Files:

• assets/css/style.css (modified) (1 diff)
• views/pages/admin.ejs (modified) (1 diff)
• views/partials/footer.ejs (modified) (1 diff)
• views/partials/topnav.ejs (modified) (1 diff)
• views/shell.ejs (modified) (1 diff)

src/assets/css/style.css

@@ -1503 +1503 @@
     .pagination-item { width: 100%; }
 }
+
+/* Taal-keuze in de header-nav (NL/EN/DE). Past bij de pill-knoppen ernaast. */
+.nav-lang {
+    background: transparent; color: var(--ink);
+    border: 1px solid var(--rule); border-radius: 999px;
+    padding: .35rem .5rem; font-size: .8rem; font-weight: 600;
+    font-family: inherit; cursor: pointer; line-height: 1;
+}
+.nav-lang:hover { border-color: var(--accent); }
+.nav-lang option { background: var(--paper); color: var(--ink); }
 @media (max-width: 400px) {
     .masthead { padding: calc(.5rem + var(--safe-top)) 0 .5rem; }

src/views/pages/admin.ejs

@@ -1 +1 @@
 <div class="container admin-page">
-  <% if (typeof langs !== 'undefined' && langs && langs.length > 1) { %>
-    <select class="footer-lang" style="float:right;margin-left:1rem" aria-label="<%= t('nav.language') %>"
-            onchange="location.href='/lang/'+this.value+'?r='+encodeURIComponent(location.pathname+location.search)">
-      <% langs.forEach(function(l){ %><option value="<%= l.code %>"<%= l.active ? ' selected' : '' %>><%= l.name %></option><% }); %>
-    </select>
-  <% } %>
   <h1><%= t('admin.title') %></h1>
   <% if (tenancy === 'hub') { %>

src/views/partials/footer.ejs

@@ -116 +116 @@
 /* Open dropdown-opties leesbaar (anders wit-op-wit op dark mode). */
 .footer-lang option { background: var(--paper); color: var(--ink); }
+/* Op desktop staat de taalkeuze in de header-nav → footer-versie verbergen. */
+@media (min-width: 768px) { .footer-lang { display: none; } }
 .footer-version { color: inherit; text-decoration: none; }
 .footer-version:hover { color: var(--accent); text-decoration: underline; }

src/views/partials/topnav.ejs

@@ -81 +81 @@
         <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
       </button>
+
+      <% if (typeof langs !== 'undefined' && langs && langs.length > 1) { %>
+        <select class="nav-lang" aria-label="<%= t('nav.language') %>" title="<%= t('nav.language') %>"
+                onchange="location.href='/lang/'+this.value+'?r='+encodeURIComponent(location.pathname+location.search)">
+          <% langs.forEach(function(l){ %><option value="<%= l.code %>"<%= l.active ? ' selected' : '' %>><%= l.code.toUpperCase() %></option><% }); %>
+        </select>
+      <% } %>
 
       <% if (_hasPrutter) { %>

src/views/shell.ejs

@@ -163 +163 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=26">
+<link rel="stylesheet" href="/assets/css/style.css?v=27">
 
 <!-- Audio player styles: loaded on every page so the mini-player works