Fix: Apply translations after sidebar load to resolve 'sidebar.screen' display issue
This commit is contained in:
@@ -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));
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
Reference in New Issue
Block a user