NiekRabelink/Fociz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Niek Rabelink
2026-09-09 21:42:34 +02:00
parent ff11f428a6
commit 1a6b82b583
1 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
board.php
+12 -12
View File
@@ -13,24 +13,22 @@ $isAdmin = ($userRole === 'ADMIN');
?> ?>
<style> <style>
/* Soepele overgang tussen standaard en volledige vensterbreedte */ /* Volledige breedte benutting en soepele schermmaximalisatie */
#boardMainWrapper { #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 { #boardMainWrapper.is-maximized {
max-width: 100% !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important; padding-left: 0 !important;
padding-right: 0 !important; padding-right: 0 !important;
} }
#boardMainWrapper.is-maximized #boardLanesContainer { #boardMainWrapper #boardLanesContainer {
width: 100% !important; width: 100% !important;
} }
</style> </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 --> <!-- Bovenbalk: Bord Titel, Filters & Actieknoppen -->
<div class="fociz-card p-4 sm:p-5"> <div class="fociz-card p-4 sm:p-5">
@@ -1224,10 +1222,11 @@ function applyMaximizeState(isMax) {
if (mainContainer) { if (mainContainer) {
mainContainer.style.maxWidth = '100vw'; mainContainer.style.maxWidth = '100vw';
mainContainer.style.width = '100%'; mainContainer.style.width = '100%';
mainContainer.style.paddingLeft = '0.75rem'; mainContainer.style.paddingLeft = '0.5rem';
mainContainer.style.paddingRight = '0.75rem'; 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) { if (icon) {
icon.setAttribute('data-lucide', 'minimize-2'); icon.setAttribute('data-lucide', 'minimize-2');
} }
@@ -1239,7 +1238,8 @@ function applyMaximizeState(isMax) {
mainContainer.style.paddingLeft = ''; mainContainer.style.paddingLeft = '';
mainContainer.style.paddingRight = ''; 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) { if (icon) {
icon.setAttribute('data-lucide', 'maximize-2'); icon.setAttribute('data-lucide', 'maximize-2');
} }