Merge pull request 'Update board layout: add small maximize icon directly above lanes and enable true full-width screen expansion' (#27) from dev into main

Reviewed-on: #27

board.php

@@ -13,18 +13,24 @@ $isAdmin = ($userRole === 'ADMIN');
 ?>
 
 <style>
-/* Soepele overgang tussen standaard en gemaximaliseerde browserbreedte */
+/* Soepele overgang tussen standaard en volledige vensterbreedte */
 #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);
+    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);
 }
 #boardMainWrapper.is-maximized {
     max-width: 100% !important;
-    padding-left: 1.25rem !important;
-    padding-right: 1.25rem !important;
+    width: 100% !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+#boardMainWrapper.is-maximized #boardLanesContainer {
+    width: 100% !important;
 }
 </style>
 
-<div id="boardMainWrapper" class="space-y-5 max-w-[1600px] mx-auto px-2 sm:px-4">
+<div id="boardMainWrapper" class="space-y-4 max-w-[1600px] mx-auto px-2 sm:px-4 w-full">
     
     <!-- Bovenbalk: Bord Titel, Filters & Actieknoppen -->
     <div class="fociz-card p-4 sm:p-5">
@@ -84,17 +90,6 @@ $isAdmin = ($userRole === 'ADMIN');
                     >
                 </div>
 
-                <!-- Knop: Maximaliseren / Volledige breedte (Toggle) -->
-                <button 
-                    id="btnToggleMaximize" 
-                    onclick="toggleBoardMaximize()" 
-                    title="Bord maximaliseren naar volledige schermbreedte"
-                    class="px-2.5 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 dark:bg-slate-800/80 dark:hover:bg-slate-700 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 text-xs font-semibold transition cursor-pointer shadow-2xs flex items-center gap-1.5"
-                >
-                    <i id="maximizeIcon" data-lucide="maximize-2" class="w-3.5 h-3.5"></i>
-                    <span id="maximizeText" class="hidden sm:inline text-xs font-medium">Maximaliseren</span>
-                </button>
-
                 <!-- Beheer knoppen -->
                 <button 
                     id="btnManageBoard" 
@@ -128,6 +123,19 @@ $isAdmin = ($userRole === 'ADMIN');
         </div>
     </div>
 
+    <!-- Strook direct boven de lane blokken: klein maximaliseer-icoon rechts -->
+    <div class="flex items-center justify-between px-1 -mb-1">
+        <div class="text-[11px] font-semibold text-slate-500 dark:text-slate-400" id="boardLanesSummary"></div>
+        <button 
+            id="btnToggleMaximize" 
+            onclick="toggleBoardMaximize()" 
+            title="Bord maximaliseren naar volledige vensterbreedte"
+            class="w-7 h-7 rounded-lg bg-white dark:bg-[#111624] hover:bg-slate-100 dark:hover:bg-slate-800 border border-slate-200 dark:border-slate-800 text-slate-600 dark:text-slate-300 flex items-center justify-center transition cursor-pointer shadow-2xs hover:scale-105 active:scale-95 ml-auto"
+        >
+            <i id="maximizeIcon" data-lucide="maximize-2" class="w-3.5 h-3.5"></i>
+        </button>
+    </div>
+
     <!-- Kanban Board Container (Horizontaal scrollbaar indien te smal, past automatisch in de breedte) -->
     <div id="boardLanesContainer" class="flex gap-4 overflow-x-auto pb-8 pt-1 min-h-[650px] items-start select-none w-full transition-all duration-300">
         <div class="flex items-center justify-center w-full py-20 text-slate-400 text-sm">
@@ -1205,22 +1213,32 @@ let isBoardMaximized = localStorage.getItem('fociz_board_maximized') === 'true';
 
 function applyMaximizeState(isMax) {
     const wrapper = document.getElementById('boardMainWrapper');
+    const mainContainer = document.getElementById('focizMainContainer');
     const icon = document.getElementById('maximizeIcon');
-    const text = document.getElementById('maximizeText');
     const btn = document.getElementById('btnToggleMaximize');
 
     if (!wrapper || !btn) return;
 
     if (isMax) {
         wrapper.classList.add('is-maximized');
-        if (text) text.innerText = 'Verkleinen';
+        if (mainContainer) {
+            mainContainer.style.maxWidth = '100vw';
+            mainContainer.style.width = '100%';
+            mainContainer.style.paddingLeft = '0.75rem';
+            mainContainer.style.paddingRight = '0.75rem';
+        }
         btn.setAttribute('title', 'Bord verkleinen naar standaard breedte');
         if (icon) {
             icon.setAttribute('data-lucide', 'minimize-2');
         }
     } else {
         wrapper.classList.remove('is-maximized');
-        if (text) text.innerText = 'Maximaliseren';
+        if (mainContainer) {
+            mainContainer.style.maxWidth = '';
+            mainContainer.style.width = '';
+            mainContainer.style.paddingLeft = '';
+            mainContainer.style.paddingRight = '';
+        }
         btn.setAttribute('title', 'Bord maximaliseren naar volledige schermbreedte');
         if (icon) {
             icon.setAttribute('data-lucide', 'maximize-2');

includes/header.php

@@ -460,4 +460,5 @@ function focizQuickToggleTheme() {
 }
 </script>
 
-<main class="flex-1 max-w-7xl w-full mx-auto p-4 sm:p-6 lg:p-8">
+<?php $isBoardPage = ($currentPage === 'board.php'); ?>
+<main id="focizMainContainer" class="flex-1 <?= $isBoardPage ? 'w-full max-w-none px-3 sm:px-6 py-4' : 'max-w-7xl w-full mx-auto p-4 sm:p-6 lg:p-8' ?> transition-all duration-300">