From deea375d565761a6b63fc2f255066571b8310b0e Mon Sep 17 00:00:00 2001 From: KONE SOREL Date: Mon, 2 Feb 2026 18:34:02 +0000 Subject: [PATCH] fer --- Bootstrap_new/css/style_moderne.css | 276 +++++++++++++++++++++++----- Vue/contexte.php | 51 ++--- Vue/gabarit.php | 49 ++--- Vue/head.php | 109 ++++++----- Vue/header.php | 4 +- 5 files changed, 323 insertions(+), 166 deletions(-) diff --git a/Bootstrap_new/css/style_moderne.css b/Bootstrap_new/css/style_moderne.css index 098a747d..cfd33c0c 100644 --- a/Bootstrap_new/css/style_moderne.css +++ b/Bootstrap_new/css/style_moderne.css @@ -242,32 +242,38 @@ body { } /* ========================================================================== - SECONDARY NAVIGATION (TABS) + GABARIT SPECIFIC STYLES ========================================================================== */ +/* Main container */ +.main-container { + margin-top: 60px; +} + +/* Secondary navigation */ +.secondary-nav-container { + flex-wrap: nowrap; +} + .nav-link-sub { - transition: all 0.3s ease; - border-right: 1px solid var(--border-color); - padding: 1rem 1.5rem; - display: block; - text-decoration: none; - color: #495057; - font-weight: 500; min-width: 150px; white-space: nowrap; + border-right: 1px solid var(--border-color); + padding: 1rem 1.5rem; + text-decoration: none; + color: var(--dark-color); text-align: center; + transition: all 0.3s ease; } .nav-link-sub:hover { background-color: rgba(0, 136, 207, 0.05); - transform: translateY(-2px); } .nav-link-sub.active { background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: white !important; font-weight: 600; - box-shadow: 0 4px 12px rgba(0, 136, 207, 0.2); } .nav-link-sub:last-child { @@ -401,9 +407,10 @@ body { } /* ========================================================================== - CONTEXT BAR (BARRE LATERALE D) + CONTEXT BAR (BARRE LATERALE D) - UNIFIED VERSION ========================================================================== */ +/* Context Panel */ #barre_laterale_d { background: white; width: 300px; @@ -416,47 +423,165 @@ body { top: 60px; height: calc(100vh - 60px); z-index: 1010; - transition: transform 0.3s ease; - transform: translateX(100%); /* Ajouté pour l'animation */ + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); + transform: translateX(100%); + display: flex; + flex-direction: column; } #barre_laterale_d.active { - transform: translateX(0); /* Ajouté pour l'animation */ + transform: translateX(0); } -#barre_laterale_d .card { - border: none; - box-shadow: var(--shadow-sm); - border-radius: var(--border-radius); - margin-bottom: 1rem; -} - -/* Bouton toggle pour la barre de contexte */ +/* Context toggle button */ .btn-context-toggle { position: fixed; right: 0; top: 50%; transform: translateY(-50%); - z-index: 1000; + z-index: 1005; border-radius: 20px 0 0 20px; padding: 12px 8px; - transition: right 0.3s ease; - background: var(--primary-color); + background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: white; border: none; cursor: pointer; + box-shadow: var(--shadow-md); + transition: all 0.3s ease; + display: flex; + align-items: center; + justify-content: center; } .btn-context-toggle:hover { right: 5px; - background: var(--primary-dark); + background: linear-gradient(135deg, var(--primary-dark), var(--primary-color)); } -/* Quand la barre est active, cacher le bouton toggle */ +.btn-context-toggle i { + font-size: 1.2rem; + margin: 0 2px; +} + +/* Hide context button when panel is active */ #barre_laterale_d.active ~ .btn-context-toggle { display: none; } +/* Context Panel internal structure */ +.context-panel { + display: flex; + flex-direction: column; + height: 100%; +} + +.context-header { + flex-shrink: 0; +} + +.context-body { + flex: 1; + overflow-y: auto; +} + +.context-footer { + flex-shrink: 0; +} + +.context-card { + margin-bottom: 1rem; +} + +.context-card .card-header { + padding: 0.5rem 1rem; +} + +.context-card .card-body { + padding: 1rem; +} + +/* Context Panel specific elements */ +.context-scrollable { + max-height: calc(100vh - 180px); + overflow-y: auto; +} + +.context-button { + transition: all 0.2s ease; +} + +.context-button:hover { + transform: translateY(-1px); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.context-text-truncate { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 100%; +} + +.context-text-truncate-long { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 100%; +} + +.context-photo { + width: 120px; + height: 120px; + object-fit: cover; + cursor: pointer; + transition: transform 0.3s ease; + border: 3px solid var(--primary-color); +} + +.context-photo:hover { + transform: scale(1.05); +} + +.context-stats-item { + min-height: 60px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.context-list { + max-height: 200px; + overflow-y: auto; +} + +.context-list-item { + border-bottom: 1px solid var(--border-color) !important; +} + +.context-list-item:last-child { + border-bottom: none !important; +} + +.context-list-item:hover { + background-color: rgba(0, 136, 207, 0.05); +} + +.context-badge-index { + width: 24px; + height: 24px; + font-size: 0.7rem; +} + +.context-action-button { + min-height: 38px; + display: flex; + align-items: center; + justify-content: center; +} + /* ========================================================================== MODALS ========================================================================== */ @@ -465,6 +590,17 @@ body { transition: transform 0.3s ease-out; } +/* Modal specific styles */ +.modal-messages-content { + max-height: 400px; + overflow-y: auto; +} + +.modal-photo-image { + max-height: 80vh; + object-fit: contain; +} + /* ========================================================================== ANIMATIONS ========================================================================== */ @@ -559,18 +695,22 @@ body { LOADERS & OVERLAYS ========================================================================== */ -.loading-overlay { +.global-loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; - background: rgba(255, 255, 255, 0.85); - display: flex; + background: rgba(255, 255, 255, 0.75); + display: none; align-items: center; justify-content: center; z-index: 9999; - backdrop-filter: blur(3px); +} + +.global-loading-spinner { + width: 3rem; + height: 3rem; } .loader-modern { @@ -659,6 +799,10 @@ body { padding: 1rem; } + .main-container { + margin-top: 56px; + } + .breadcrumb { font-size: 0.8rem; padding: 0.5rem; @@ -675,7 +819,33 @@ body { .nav-link-sub { min-width: 120px; padding: 0.75rem 1rem; - font-size: 0.8rem; + font-size: 0.875rem; + } + + .btn-context-toggle { + padding: 10px 6px; + } + + .context-scrollable { + max-height: calc(100vh - 160px); + } + + .context-photo { + width: 100px; + height: 100px; + } + + .context-stats-item { + min-height: 50px; + padding: 0.25rem; + } + + .context-text-truncate { + max-width: 180px; + } + + .context-text-truncate-long { + max-width: 200px; } } @@ -693,6 +863,23 @@ body { #barre_laterale_d { width: 100%; } + + .context-scrollable { + max-height: calc(100vh - 140px); + } + + .context-photo { + width: 80px; + height: 80px; + } + + .context-text-truncate { + max-width: 150px; + } + + .context-text-truncate-long { + max-width: 170px; + } } /* ========================================================================== @@ -825,22 +1012,9 @@ body { animation-name: bounceIn; } -/* Critical CSS Inline (optionnel pour les performances) */ -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; - } - - /* Prévenir le FOUC (Flash of Unstyled Content) */ - .js-loading *, - .js-loading *:before, - .js-loading *:after { - animation-play-state: paused !important; - } \ No newline at end of file +/* Prévenir le FOUC (Flash of Unstyled Content) */ +.js-loading *, +.js-loading *:before, +.js-loading *:after { + animation-play-state: paused !important; +} \ No newline at end of file diff --git a/Vue/contexte.php b/Vue/contexte.php index 8ccd38bc..12083711 100755 --- a/Vue/contexte.php +++ b/Vue/contexte.php @@ -2,15 +2,6 @@ - - -
@@ -23,7 +14,7 @@
-
+
@@ -43,7 +34,7 @@
- - @@ -156,8 +147,7 @@
<?= _(" @@ -177,14 +167,13 @@
-
+
$contextPolice): ?> + class="list-group-item list-group-item-action border-0 py-2 px-0 context-list-item">
-
+
@@ -205,14 +194,14 @@
-
-
-
-
+
nettoyer($_SESSION['nomClient_d_C']), 0, 30) ?>
- @@ -142,7 +141,7 @@ $retourVue = $infovue['lienRetour'];
-
+

@@ -199,8 +198,7 @@ $retourVue = $infovue['lienRetour'];
<?= _(">

@@ -218,10 +216,6 @@ $retourVue = $infovue['lienRetour']; - - - - @@ -293,16 +287,15 @@ $retourVue = $infovue['lienRetour']; $('body').toggleClass('toggle-sidebar'); }); - // Gestion de la barre de contexte - version corrigée + // Gestion de la barre de contexte $(document).on('click', '#showSideNav', function(e) { console.log("Show context panel cliqué"); e.preventDefault(); e.stopPropagation(); - // Vérifier si l'élément existe if ($('#barre_laterale_d').length) { $('#barre_laterale_d').addClass('active'); - $(this).fadeOut(200); + $(this).hide(); console.log("Panel de contexte activé"); } else { console.error("Élément #barre_laterale_d non trouvé"); @@ -315,7 +308,7 @@ $retourVue = $infovue['lienRetour']; e.stopPropagation(); $('#barre_laterale_d').removeClass('active'); - $('#showSideNav').fadeIn(200); + $('#showSideNav').show(); }); // Fermer le panneau si on clique en dehors @@ -324,7 +317,7 @@ $retourVue = $infovue['lienRetour']; !$(e.target).closest('#barre_laterale_d').length && !$(e.target).closest('#showSideNav').length) { $('#barre_laterale_d').removeClass('active'); - $('#showSideNav').fadeIn(200); + $('#showSideNav').show(); } }); @@ -348,7 +341,7 @@ $retourVue = $infovue['lienRetour']; // Vérifier toutes les 2 secondes setInterval(syncBadge, 2000); - syncBadge(); // Première exécution + syncBadge(); // Rafraîchir le gabarit if (typeof raffraichier_gabarit === 'function') { @@ -379,24 +372,18 @@ $retourVue = $infovue['lienRetour']; "extendedTimeOut": "1000" }; } - - // Debug: Vérifier que les éléments existent - console.log("Éléments trouvés:"); - console.log("#showSideNav:", $('#showSideNav').length); - console.log("#hideSideNav:", $('#hideSideNav').length); - console.log("#barre_laterale_d:", $('#barre_laterale_d').length); }); // Fonction pour ouvrir le panneau depuis d'autres scripts function ouvrirPanneauContexte() { $('#barre_laterale_d').addClass('active'); - $('#showSideNav').fadeOut(200); + $('#showSideNav').hide(); } // Fonction pour fermer le panneau depuis d'autres scripts function fermerPanneauContexte() { $('#barre_laterale_d').removeClass('active'); - $('#showSideNav').fadeIn(200); + $('#showSideNav').show(); } @@ -404,8 +391,8 @@ $retourVue = $infovue['lienRetour'];
-
-