This commit is contained in:
KONE SOREL 2025-12-23 12:10:29 +00:00
parent 843639740c
commit 62c5dafa1d
3 changed files with 44 additions and 43 deletions

View File

@ -233,6 +233,16 @@ body {
background-color: var(--office-light);
}
/* Quand sidebar réduite */
.app-sidebar.collapsed {
width: var(--sidebar-collapsed);
}
.app-main.collapsed {
margin-left: var(--sidebar-collapsed);
}
content-area {
padding: 0 24px 24px 24px;
max-width: 1400px;
@ -307,28 +317,20 @@ content-area {
font-size: 16px;
}
/* ============================================
CONTENT AREA - SIMPLIFIÉ
============================================ */
.content-area.content-area {
padding: calc(var(--header-height) + 56px + 16px) 0 0 0 !important;
max-width: 100vw !important;
margin: 0 !important;
width: 100vw !important;
overflow-x: hidden;
/* Content area fluide */
.content-area {
padding: calc(var(--header-height) + 56px + 16px) 24px 24px 24px;
max-width: 1400px;
margin: 0 auto;
}
/* ============================================
CONTENT CARD - SIMPLE ET PROPRE
============================================ */
/* Content card */
.content-card {
border: none !important;
background: transparent !important;
box-shadow: none !important;
width: 100vw !important;
max-width: 100vw !important;
margin-top: -120px !important;
background: var(--office-card);
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,.05);
margin-top: 24px;
}
@ -357,15 +359,11 @@ content-area {
}
.card-body {
background-color: var(--office-light);
padding: 30px !important;
border: none !important;
width: 100vw !important;
max-width: 100vw !important;
min-height: calc(100vh - var(--header-height) - 56px - 16px) !important;
margin-left: -75px;
padding: 24px;
background-color: var(--office-card);
}
/* ============================================
HEADER CONTROLS
============================================ */
@ -700,10 +698,10 @@ content-area {
.app-sidebar {
width: var(--sidebar-collapsed);
}
.app-main {
margin-left: var(--sidebar-collapsed);
}
.nav-text,
.nav-title,
@ -743,21 +741,22 @@ content-area {
transform: translateX(-100%);
width: var(--sidebar-width);
}
.app-sidebar.open {
.app-sidebar.show {
transform: translateX(0);
}
.app-main {
margin-left: 0;
}
.header-content {
padding: 0 16px;
.content-area {
padding: calc(var(--header-height) + 56px) 16px 16px 16px;
max-width: 100%;
}
.content-area {
padding: 16px;
.header-content {
padding: 0 16px;
}
.user-info {

View File

@ -69,16 +69,18 @@ class UXManager {
*/
toggleSidebar() {
const sidebar = document.getElementById('sidebar');
if (sidebar) {
sidebar.classList.toggle('show');
// Annoncer le changement pour l'accessibilité
const main = document.getElementById('mainContent');
if (sidebar && main) {
sidebar.classList.toggle('collapsed');
main.classList.toggle('collapsed');
this.accessibility.announce(
sidebar.classList.contains('show')
? 'Menu latéral ouvert'
: 'Menu latéral fermé'
sidebar.classList.contains('collapsed')
? 'Menu latéral réduit'
: 'Menu latéral ouvert'
);
}
}
/**
* Vérifier et gérer l'expiration de session utilisateur

View File

@ -145,7 +145,7 @@ console.groupEnd();
<link rel="manifest" href="<?= $racineWeb ?>manifest.json">
<!-- 4. VOS STYLES PERSONNALISÉS (en dernier pour qu'ils dominent) -->
<link href="<?= $racineWeb ?>Bootstrap_new/css/style_office.css?ver=2025.12.23.05" rel="stylesheet">
<link href="<?= $racineWeb ?>Bootstrap_new/css/style_office.css?ver=2025.12.23.06" rel="stylesheet">
<link href="<?= $racineWeb ?>Bootstrap_new/css/ux_enhancements.css?ver=2025.12.21.02" rel="stylesheet">
<!-- ============================================
@ -278,7 +278,7 @@ console.groupEnd();
<header class="app-header">
<div class="header-content">
<div class="logo-container">
<button class="header-btn sidebar-toggle" aria-label="Menu navigation" onclick="appUX.toggleSidebar()">
<button class="header-btn toggle-sidebar-btn" aria-label="Basculer la sidebar" onclick="appUX.toggleSidebar()">
<i class="bi bi-list"></i>
</button>
@ -632,7 +632,7 @@ console.groupEnd();
<?php endif; ?>
<!-- UX Enhancement Script -->
<script src="/Bootstrap_new/js/ux-manager.js?ver=2025.12.23.00"></script>
<script src="/Bootstrap_new/js/ux-manager.js?ver=2025.12.23.01"></script>
<!-- Service Worker Registration -->
<script src="/Js/sw-register.js?ver=2025.12.22.00"></script>