diff --git a/public/faq.html b/public/faq.html index a4f95021..7ff83394 100644 --- a/public/faq.html +++ b/public/faq.html @@ -676,6 +676,10 @@ + + + + diff --git a/public/implementer.html b/public/implementer.html index 803e989f..25189465 100644 --- a/public/implementer.html +++ b/public/implementer.html @@ -778,6 +778,10 @@ if (pressure.level === 'CRITICAL') { + + + + diff --git a/public/js/components/language-selector.js b/public/js/components/language-selector.js index 33474c80..e0aa03b4 100644 --- a/public/js/components/language-selector.js +++ b/public/js/components/language-selector.js @@ -1,7 +1,6 @@ /** * Language Selector Component - * Mobile: Icon-only buttons (flags) - * Desktop: Dropdown with full language names + * Mobile-friendly: Icons on mobile, dropdown on desktop */ (function() { @@ -12,88 +11,53 @@ { code: 'mi', name: 'Te Reo Māori', flag: '🇳🇿', disabled: true, tooltip: 'Coming when system is complete' } ]; - /** - * Create desktop dropdown selector (with text) - */ - function createDesktopSelector(currentLang) { - return ` - - `; - } - - /** - * Create mobile icon-only selector - */ - function createMobileSelector(currentLang) { - return ` -
- ${supportedLanguages.filter(lang => !lang.disabled).map(lang => ` - - `).join('')} -
- `; - } - - /** - * Create mobile menu language selector (inside drawer) - */ - function createMobileMenuSelector(currentLang) { - const container = document.getElementById('mobile-menu-language-selector'); + function createLanguageSelector() { + const container = document.getElementById('language-selector-container'); if (!container) return; + const currentLang = (window.I18n && window.I18n.currentLang) || 'en'; + const selectorHTML = ` -
-

Language

-
- ${supportedLanguages.map(lang => ` +
+ + + + +
+ ${supportedLanguages.filter(lang => !lang.disabled).map(lang => ` `).join('')}
@@ -102,105 +66,40 @@ container.innerHTML = selectorHTML; - // Attach event listeners for mobile menu buttons - document.querySelectorAll('.mobile-menu-lang-btn').forEach(btn => { - if (!btn.disabled) { - btn.addEventListener('click', function(e) { - const selectedLang = this.getAttribute('data-lang'); - if (window.I18n && selectedLang) { - window.I18n.setLanguage(selectedLang); - // Close mobile menu after selection - const mobileMenu = document.getElementById('mobile-menu'); - if (mobileMenu) { - mobileMenu.classList.add('hidden'); - document.body.style.overflow = ''; - } - } - }); - } - }); + // Add event listeners + attachEventListeners(currentLang); } - /** - * Initialize language selector - */ - function createLanguageSelector() { - const container = document.getElementById('language-selector-container'); - if (!container) return; - - const currentLang = (window.I18n && window.I18n.currentLang) || 'en'; - - // Create both mobile and desktop versions - const combinedHTML = createMobileSelector(currentLang) + createDesktopSelector(currentLang); - container.innerHTML = combinedHTML; - - // Attach event listener for desktop dropdown - const desktopDropdown = document.getElementById('language-selector-dropdown'); - if (desktopDropdown && window.I18n) { - desktopDropdown.addEventListener('change', function(e) { + function attachEventListeners(currentLang) { + // Desktop dropdown + const desktopSelector = document.getElementById('language-selector-desktop'); + if (desktopSelector && window.I18n) { + desktopSelector.addEventListener('change', function(e) { const selectedLang = e.target.value; window.I18n.setLanguage(selectedLang); }); } - // Attach event listeners for mobile icon buttons - document.querySelectorAll('.language-btn').forEach(btn => { - btn.addEventListener('click', function(e) { + // Mobile icon buttons + const iconButtons = document.querySelectorAll('.language-icon-btn'); + iconButtons.forEach(button => { + button.addEventListener('click', function() { const selectedLang = this.getAttribute('data-lang'); - if (window.I18n && selectedLang) { + if (window.I18n) { window.I18n.setLanguage(selectedLang); } + + // Update active state + iconButtons.forEach(btn => { + btn.classList.remove('border-blue-600', 'bg-blue-50'); + btn.classList.add('border-gray-300', 'bg-white'); + }); + this.classList.remove('border-gray-300', 'bg-white'); + this.classList.add('border-blue-600', 'bg-blue-50'); }); }); - - // Initialize mobile menu language selector (if container exists) - createMobileMenuSelector(currentLang); } - /** - * Update UI when language changes - */ - function updateLanguageUI(newLang) { - // Update mobile icon buttons - document.querySelectorAll('.language-btn').forEach(btn => { - const lang = btn.getAttribute('data-lang'); - if (lang === newLang) { - btn.classList.add('bg-blue-100', 'ring-2', 'ring-blue-500'); - btn.classList.remove('bg-white', 'border', 'border-gray-300'); - btn.setAttribute('aria-pressed', 'true'); - } else { - btn.classList.remove('bg-blue-100', 'ring-2', 'ring-blue-500'); - btn.classList.add('bg-white', 'border', 'border-gray-300'); - btn.setAttribute('aria-pressed', 'false'); - } - }); - - // Update desktop dropdown - const dropdown = document.getElementById('language-selector-dropdown'); - if (dropdown) { - dropdown.value = newLang; - } - - // Update mobile menu buttons - document.querySelectorAll('.mobile-menu-lang-btn').forEach(btn => { - const lang = btn.getAttribute('data-lang'); - if (lang === newLang) { - btn.classList.add('bg-blue-50', 'text-blue-700'); - btn.classList.remove('text-gray-700', 'hover:bg-gray-50'); - } else { - btn.classList.remove('bg-blue-50', 'text-blue-700'); - btn.classList.add('text-gray-700', 'hover:bg-gray-50'); - } - }); - } - - // Listen for language change events - window.addEventListener('languageChanged', function(e) { - if (e.detail && e.detail.language) { - updateLanguageUI(e.detail.language); - } - }); - // Initialize when DOM is ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', createLanguageSelector); @@ -208,7 +107,12 @@ createLanguageSelector(); } - // Re-initialize when mobile menu is rendered (if needed) - window.addEventListener('mobileMenuRendered', createLanguageSelector); - + // Re-initialize when language changes (to update active state) + if (window.I18n) { + const originalSetLanguage = window.I18n.setLanguage; + window.I18n.setLanguage = function(lang) { + originalSetLanguage.call(window.I18n, lang); + createLanguageSelector(); // Refresh selector with new active language + }; + } })(); diff --git a/public/leader.html b/public/leader.html index b5f33655..ceadc061 100644 --- a/public/leader.html +++ b/public/leader.html @@ -613,6 +613,10 @@
+ + + + diff --git a/public/researcher.html b/public/researcher.html index f284633f..787432e2 100644 --- a/public/researcher.html +++ b/public/researcher.html @@ -546,6 +546,10 @@
+ + + +