- add flag images for language switcher

- hide messages if room parameter is not given
This commit is contained in:
stefan.tollkuehn committed 2026-09-30 13:53:23 +02:00
1 parent 0d06c9ab24
commit 77367e86a1
4 files changed
+62 -6

No files matched your search

+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600">
<rect width="900" height="200" fill="#000"/>
<rect y="200" width="900" height="200" fill="#DD0000"/>
<rect y="400" width="900" height="200" fill="#FFCE00"/>
</svg>

After

Width:  |  Height:  |  Size: 233 B

+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600">
<rect width="300" height="600" fill="#0055A4"/>
<rect x="300" width="300" height="600" fill="#fff"/>
<rect x="600" width="300" height="600" fill="#EF4135"/>
</svg>

After

Width:  |  Height:  |  Size: 233 B

+10
View File
@@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30">
<clipPath id="t">
<path d="M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z"/>
</clipPath>
<path d="M0,0 v30 h60 v-30 z" fill="#012169"/>
<path d="M0,0 L60,30 M60,0 L0,30" stroke="#fff" stroke-width="6"/>
<path d="M0,0 L60,30 M60,0 L0,30" clip-path="url(#t)" stroke="#C8102E" stroke-width="4"/>
<path d="M30,0 v30 M0,15 h60" stroke="#fff" stroke-width="10"/>
<path d="M30,0 v30 M0,15 h60" stroke="#C8102E" stroke-width="6"/>
</svg>

After

Width:  |  Height:  |  Size: 513 B

+42 -6
View File
@@ -32,6 +32,9 @@
top: 16px; top: 16px;
right: 16px; right: 16px;
z-index: 100; z-index: 100;
display: flex;
align-items: flex-start;
gap: 8px;
} }
.lang-menu { .lang-menu {
@@ -78,6 +81,14 @@
background: #f0f8ff; background: #f0f8ff;
} }
.lang-flag {
width: 20px;
height: 13px;
margin-right: 6px;
border-radius: 2px;
vertical-align: -2px;
}
.card { .card {
box-sizing: border-box; box-sizing: border-box;
width: min(600px, calc(100% - 32px)); width: min(600px, calc(100% - 32px));
@@ -266,14 +277,18 @@
<body> <body>
<nav class="navbar"> <nav class="navbar">
<a class="button secondary" href="https://www.bnvb-ingenieure.de/impressum" target="_blank" rel="noopener noreferrer">
Impressum
</a>
<div id="langMenu" class="lang-menu"> <div id="langMenu" class="lang-menu">
<button id="langButton" class="button secondary" type="button" aria-haspopup="true" aria-expanded="false"> <button id="langButton" class="button secondary" type="button" aria-haspopup="true" aria-expanded="false">
English <img id="langFlag" class="lang-flag" src="assets/uk.svg" alt="">
<span id="langLabel">English</span>
</button> </button>
<div id="langDropdown" class="lang-dropdown"> <div id="langDropdown" class="lang-dropdown">
<button type="button" data-lang="en">English</button> <button type="button" data-lang="en"><img class="lang-flag" src="assets/uk.svg" alt="">English</button>
<button type="button" data-lang="de">Deutsch</button> <button type="button" data-lang="de"><img class="lang-flag" src="assets/de.svg" alt="">Deutsch</button>
<button type="button" data-lang="fr">Français</button> <button type="button" data-lang="fr"><img class="lang-flag" src="assets/fr.svg" alt="">Français</button>
</div> </div>
</div> </div>
</nav> </nav>
@@ -881,8 +896,15 @@
fr: "Français" fr: "Français"
}; };
const LANGUAGE_FLAGS = {
en: "assets/uk.svg",
de: "assets/de.svg",
fr: "assets/fr.svg"
};
function updateLanguageMenu() { function updateLanguageMenu() {
langButton.textContent = LANGUAGE_NAMES[currentLanguage]; langFlag.src = LANGUAGE_FLAGS[currentLanguage];
langLabel.textContent = LANGUAGE_NAMES[currentLanguage];
langDropdown langDropdown
.querySelectorAll("button[data-lang]") .querySelectorAll("button[data-lang]")
@@ -982,6 +1004,8 @@
const langMenu = document.getElementById("langMenu"); const langMenu = document.getElementById("langMenu");
const langButton = document.getElementById("langButton"); const langButton = document.getElementById("langButton");
const langDropdown = document.getElementById("langDropdown"); const langDropdown = document.getElementById("langDropdown");
const langFlag = document.getElementById("langFlag");
const langLabel = document.getElementById("langLabel");
/* ============================================================ /* ============================================================
* GET ROOM FROM QUERY-PARAMETER * GET ROOM FROM QUERY-PARAMETER
@@ -1501,7 +1525,19 @@ END:VCALENDAR`;
const room = getRoom(); const room = getRoom();
/* /*
* Kein room-Parameter * Kein room-Parameter: Meldungen ausblenden,
* nur den Create-Button anzeigen.
*/
if (room === null) {
invalidRoom.querySelector("h1").classList.add("hidden");
invalidRoom.querySelector(".error").classList.add("hidden");
invalidRoom.classList.remove("hidden");
createNewMeetingButton.classList.remove("hidden");
return;
}
/*
* Ungültiger room-Parameter.
*/ */
if (!isValidRoom(room)) { if (!isValidRoom(room)) {
invalidRoom.classList.remove("hidden"); invalidRoom.classList.remove("hidden");