fav
This commit is contained in:
parent
69b57a7564
commit
c159dccd60
|
|
@ -119,14 +119,35 @@
|
|||
$('select.selectpicker').selectpicker('refresh');
|
||||
}
|
||||
|
||||
/* --- Sidebar toggle responsive --- */
|
||||
$('.toggle-sidebar-btn').on('click', function () {
|
||||
$('body').toggleClass('toggle-sidebar');
|
||||
// Sur mobile, slide le sidebar
|
||||
if ($(window).width() < 1200) {
|
||||
$('#sidebar').toggleClass('sidebar-open');
|
||||
}
|
||||
});
|
||||
/* --- Sidebar toggle ---
|
||||
* On désactive le listener natif de main.js (Bootstrap template) en
|
||||
* clonant le nœud DOM, ce qui supprime tous ses event listeners,
|
||||
* puis on rebranche notre propre logique.
|
||||
*/
|
||||
(function () {
|
||||
var $btn = $('.toggle-sidebar-btn');
|
||||
if (!$btn.length) return;
|
||||
|
||||
// Cloner pour vider les listeners attachés par main.js
|
||||
var $clone = $btn.clone(false);
|
||||
$btn.replaceWith($clone);
|
||||
|
||||
$clone.on('click', function () {
|
||||
var isMobile = $(window).width() < 1200;
|
||||
|
||||
if (isMobile) {
|
||||
// Mobile : slide complet via classe CSS
|
||||
$('#sidebar').toggleClass('sidebar-mobile-open');
|
||||
} else {
|
||||
// Desktop : basculer entre plein / icônes seules
|
||||
$('body').toggleClass('toggle-sidebar');
|
||||
// Forcer la fermeture des sous-menus collapse ouverts
|
||||
if ($('body').hasClass('toggle-sidebar')) {
|
||||
$('#sidebar .nav-content.show').collapse('hide');
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
/* --- Highlight ligne active DataTable au clic --- */
|
||||
$(document).on('click', '.table tbody tr', function () {
|
||||
|
|
@ -149,22 +170,92 @@
|
|||
}); // end document.ready
|
||||
</script>
|
||||
|
||||
<!-- Style additionnel pour la ligne sélectionnée dans les tables -->
|
||||
<!-- Styles sidebar toggle + ligne sélectionnée -->
|
||||
<style>
|
||||
/* ── Ligne DataTable sélectionnée ── */
|
||||
.table tbody tr.row-selected > td {
|
||||
background: rgba(26, 107, 74, 0.08) !important;
|
||||
border-left: 3px solid var(--color-accent, #0abf7c);
|
||||
}
|
||||
|
||||
/* Sidebar toggle body class */
|
||||
body.toggle-sidebar #sidebar { width: var(--sidebar-collapsed, 68px); }
|
||||
/* ── Transitions fluides (doivent être déclarées ici, APRÈS le CSS du template,
|
||||
pour ne pas être écrasées par Bootstrap/css/style.css) ── */
|
||||
#sidebar {
|
||||
transition: width 0.3s cubic-bezier(.4,0,.2,1),
|
||||
transform 0.3s cubic-bezier(.4,0,.2,1) !important;
|
||||
overflow: hidden !important;
|
||||
will-change: width;
|
||||
}
|
||||
#main {
|
||||
transition: margin-left 0.3s cubic-bezier(.4,0,.2,1) !important;
|
||||
will-change: margin-left;
|
||||
}
|
||||
|
||||
/* ── Mode réduit (icônes seules) — desktop ── */
|
||||
body.toggle-sidebar #sidebar {
|
||||
width: 68px !important;
|
||||
min-width: 68px !important;
|
||||
}
|
||||
body.toggle-sidebar #main {
|
||||
margin-left: 68px !important;
|
||||
}
|
||||
/* Masquer textes et chevrons */
|
||||
body.toggle-sidebar #sidebar .nav-link span,
|
||||
body.toggle-sidebar #sidebar .nav-link .bi-chevron-down,
|
||||
body.toggle-sidebar #sidebar .sidebar-section-label { display: none; }
|
||||
body.toggle-sidebar #main { margin-left: var(--sidebar-collapsed, 68px); }
|
||||
body.toggle-sidebar #sidebar .nav-link { justify-content: center; padding: 10px; }
|
||||
body.toggle-sidebar #sidebar .nav-link i:first-child { font-size: 1.2rem; width: auto; }
|
||||
body.toggle-sidebar #sidebar .nav-content { display: none !important; }
|
||||
body.toggle-sidebar #sidebar .sidebar-section-label {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
display: inline-block; /* garder dans le flux mais invisible — évite le reflow brutal */
|
||||
transition: opacity 0.2s ease, width 0.2s ease;
|
||||
}
|
||||
body:not(.toggle-sidebar) #sidebar .nav-link span,
|
||||
body:not(.toggle-sidebar) #sidebar .nav-link .bi-chevron-down {
|
||||
opacity: 1;
|
||||
width: auto;
|
||||
transition: opacity 0.25s ease 0.05s, width 0.25s ease;
|
||||
}
|
||||
/* Centrer les icônes et agrandir légèrement */
|
||||
body.toggle-sidebar #sidebar .nav-link {
|
||||
justify-content: center !important;
|
||||
padding: 11px 0 !important;
|
||||
}
|
||||
body.toggle-sidebar #sidebar .nav-link i:first-child {
|
||||
font-size: 1.25rem !important;
|
||||
width: auto !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
/* Fermer les sous-menus */
|
||||
body.toggle-sidebar #sidebar .nav-content {
|
||||
display: none !important;
|
||||
}
|
||||
/* Tooltip natif au survol en mode réduit */
|
||||
body.toggle-sidebar #sidebar .nav-link {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ── Mobile : slide depuis la gauche ── */
|
||||
@media (max-width: 1199px) {
|
||||
#sidebar {
|
||||
transform: translateX(-100%);
|
||||
width: var(--sidebar-width, 240px) !important;
|
||||
}
|
||||
#sidebar.sidebar-mobile-open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
/* Overlay semi-transparent derrière le sidebar mobile */
|
||||
#sidebar.sidebar-mobile-open::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.35);
|
||||
z-index: -1;
|
||||
}
|
||||
#main {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user