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

View File

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

View File

@ -145,7 +145,7 @@ console.groupEnd();
<link rel="manifest" href="<?= $racineWeb ?>manifest.json"> <link rel="manifest" href="<?= $racineWeb ?>manifest.json">
<!-- 4. VOS STYLES PERSONNALISÉS (en dernier pour qu'ils dominent) --> <!-- 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"> <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"> <header class="app-header">
<div class="header-content"> <div class="header-content">
<div class="logo-container"> <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> <i class="bi bi-list"></i>
</button> </button>
@ -632,7 +632,7 @@ console.groupEnd();
<?php endif; ?> <?php endif; ?>
<!-- UX Enhancement Script --> <!-- 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 --> <!-- Service Worker Registration -->
<script src="/Js/sw-register.js?ver=2025.12.22.00"></script> <script src="/Js/sw-register.js?ver=2025.12.22.00"></script>