Allow board to always use full screen width and hide header on maximize #28

Merged
NiekRabelink merged 1 commits from dev into main 2026-09-09 19:44:16 +00:00
+12 -12
View File
@@ -13,24 +13,22 @@ $isAdmin = ($userRole === 'ADMIN');
?>
<style>
/* Soepele overgang tussen standaard en volledige vensterbreedte */
/* Volledige breedte benutting en soepele schermmaximalisatie */
#boardMainWrapper {
transition: max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1), padding 0.35s cubic-bezier(0.16, 1, 0.3, 1), width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
width: 100% !important;
max-width: 100% !important;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#boardMainWrapper.is-maximized {
max-width: 100% !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
#boardMainWrapper.is-maximized #boardLanesContainer {
#boardMainWrapper #boardLanesContainer {
width: 100% !important;
}
</style>
<div id="boardMainWrapper" class="space-y-4 max-w-[1600px] mx-auto px-2 sm:px-4 w-full">
<div id="boardMainWrapper" class="space-y-4 w-full max-w-none">
<!-- Bovenbalk: Bord Titel, Filters & Actieknoppen -->
<div class="fociz-card p-4 sm:p-5">
@@ -1224,10 +1222,11 @@ function applyMaximizeState(isMax) {
if (mainContainer) {
mainContainer.style.maxWidth = '100vw';
mainContainer.style.width = '100%';
mainContainer.style.paddingLeft = '0.75rem';
mainContainer.style.paddingRight = '0.75rem';
mainContainer.style.paddingLeft = '0.5rem';
mainContainer.style.paddingRight = '0.5rem';
}
btn.setAttribute('title', 'Bord verkleinen naar standaard breedte');
document.querySelector('header')?.classList.add('hidden');
btn.setAttribute('title', 'Bord verkleinen / navigatie tonen (Escape)');
if (icon) {
icon.setAttribute('data-lucide', 'minimize-2');
}
@@ -1239,7 +1238,8 @@ function applyMaximizeState(isMax) {
mainContainer.style.paddingLeft = '';
mainContainer.style.paddingRight = '';
}
btn.setAttribute('title', 'Bord maximaliseren naar volledige schermbreedte');
document.querySelector('header')?.classList.remove('hidden');
btn.setAttribute('title', 'Bord maximaliseren (volledig venster)');
if (icon) {
icon.setAttribute('data-lucide', 'maximize-2');
}