Fix: Apply translations after sidebar load to resolve 'sidebar.screen' display issue

This commit is contained in:
PaulVua
2026-02-17 12:30:14 +01:00
parent f1d716d900
commit aa1b90e3d5
3 changed files with 362 additions and 342 deletions

View File

@@ -140,6 +140,10 @@
const element = document.getElementById(id); const element = document.getElementById(id);
if (element) { if (element) {
element.innerHTML = data; element.innerHTML = data;
// Apply translations after loading dynamic content
if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
window.i18n.applyTranslations();
}
} }
}) })
.catch(error => console.error(`Error loading ${file}:`, error)); .catch(error => console.error(`Error loading ${file}:`, error));

View File

@@ -121,14 +121,15 @@
const element = document.getElementById(id); const element = document.getElementById(id);
if (element) { if (element) {
element.innerHTML = data; element.innerHTML = data;
// Ensure the screen tab is visible here as well if we are on this page, // Apply translations after loading dynamic content
// though index.html handles it globally, sidebar load might reset it. if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
// Ideally sidebar logic should be consistent. window.i18n.applyTranslations();
// For now, if we are ON screen.html, we should show the nav item. }
// Ensure the screen tab is visible here as well
if (id.includes('sidebar')) { if (id.includes('sidebar')) {
setTimeout(() => { setTimeout(() => {
const navScreen = element.querySelector('#nav-screen'); const navScreenElements = element.querySelectorAll('.nav-screen-item');
if (navScreen) navScreen.style.display = 'flex'; // or block navScreenElements.forEach(el => el.style.display = 'flex');
}, 100); }, 100);
} }
} }

View File

@@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -9,31 +10,39 @@
body { body {
overflow-x: hidden; overflow-x: hidden;
} }
#sidebar a.nav-link { #sidebar a.nav-link {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
} }
#sidebar a.nav-link:hover { #sidebar a.nav-link:hover {
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
} }
#sidebar a.nav-link svg { #sidebar a.nav-link svg {
margin-right: 8px; /* Add spacing between icons and text */ margin-right: 8px;
/* Add spacing between icons and text */
} }
#sidebar { #sidebar {
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
} }
.offcanvas-backdrop { .offcanvas-backdrop {
z-index: 1040; z-index: 1040;
} }
</style> </style>
</head> </head>
<body> <body>
<!-- Topbar --> <!-- Topbar -->
<span id="topbar"></span> <span id="topbar"></span>
<!-- Sidebar Offcanvas for Mobile --> <!-- Sidebar Offcanvas for Mobile -->
<div class="offcanvas offcanvas-start text-white bg-dark" tabindex="-1" id="sidebarOffcanvas" aria-labelledby="sidebarOffcanvasLabel"> <div class="offcanvas offcanvas-start text-white bg-dark" tabindex="-1" id="sidebarOffcanvas"
aria-labelledby="sidebarOffcanvasLabel">
<div class="offcanvas-header"> <div class="offcanvas-header">
<h5 class="offcanvas-title" id="sidebarOffcanvasLabel">NebuleAir</h5> <h5 class="offcanvas-title" id="sidebarOffcanvasLabel">NebuleAir</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button> <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
@@ -50,7 +59,8 @@
<!-- Main content --> <!-- Main content -->
<main class="col-md-10 ms-sm-auto col-lg-11 offset-md-2 offset-lg-1 px-md-4"> <main class="col-md-10 ms-sm-auto col-lg-11 offset-md-2 offset-lg-1 px-md-4">
<h1 class="mt-4" data-i18n="sensors.title">Les sondes de mesure</h1> <h1 class="mt-4" data-i18n="sensors.title">Les sondes de mesure</h1>
<p data-i18n="sensors.description">Votre capteur NebuleAir est équipé de une ou plusieurs sondes qui permettent de mesurer certaines variables environnementales. La mesure <p data-i18n="sensors.description">Votre capteur NebuleAir est équipé de une ou plusieurs sondes qui permettent
de mesurer certaines variables environnementales. La mesure
est automatique mais vous pouvez ici vous assurer de leur bon fonctionnement. est automatique mais vous pouvez ici vous assurer de leur bon fonctionnement.
</p> </p>
<div class="row mb-3" id="card-container"></div> <div class="row mb-3" id="card-container"></div>
@@ -83,6 +93,10 @@
const element = document.getElementById(id); const element = document.getElementById(id);
if (element) { if (element) {
element.innerHTML = data; element.innerHTML = data;
// Apply translations after loading dynamic content
if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
window.i18n.applyTranslations();
}
} }
}) })
.catch(error => console.error(`Error loading ${file}:`, error)); .catch(error => console.error(`Error loading ${file}:`, error));
@@ -603,4 +617,5 @@ error: function(xhr, status, error) {
</script> </script>
</body> </body>
</html> </html>