diff --git a/board.php b/board.php index 5a1fa78..abfae79 100644 --- a/board.php +++ b/board.php @@ -12,16 +12,28 @@ $userRole = $currentUser['role'] ?? 'MEMBER'; $isAdmin = ($userRole === 'ADMIN'); ?> -
+ + +
-
+
- +
@@ -39,7 +51,7 @@ $isAdmin = ($userRole === 'ADMIN');
-
+
@@ -66,12 +78,23 @@ $isAdmin = ($userRole === 'ADMIN');
+ + +
- -
+ +
Bord laden... @@ -606,9 +629,9 @@ function renderCards() { const dotColorClass = LANE_ACCENT_COLORS[lane.color] || 'bg-slate-500'; - // Lane kolom HTML + // Lane kolom HTML (past zich automatisch aan de schermbreedte aan) const laneEl = document.createElement('div'); - laneEl.className = 'flex-shrink-0 w-80 rounded-2xl bg-slate-100/70 dark:bg-[#0c0f17]/70 border border-slate-200/80 dark:border-slate-800/80 p-3.5 flex flex-col shadow-xs max-h-[82vh] transition'; + laneEl.className = 'flex-1 min-w-[260px] rounded-2xl bg-slate-100/70 dark:bg-[#0c0f17]/70 border border-slate-200/80 dark:border-slate-800/80 p-3.5 flex flex-col shadow-xs max-h-[82vh] transition-all duration-200'; laneEl.setAttribute('data-lane-id', lane.id); let cardsHtml = ''; @@ -1176,6 +1199,54 @@ function escapeHtml(str) { .replace(/"/g, '"') .replace(/'/g, '''); } + +// 10. Bord Maximaliseren & Verkleinen (Soepele breedte-overgang) +let isBoardMaximized = localStorage.getItem('fociz_board_maximized') === 'true'; + +function applyMaximizeState(isMax) { + const wrapper = document.getElementById('boardMainWrapper'); + 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'; + 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'; + btn.setAttribute('title', 'Bord maximaliseren naar volledige schermbreedte'); + if (icon) { + icon.setAttribute('data-lucide', 'maximize-2'); + } + } + if (typeof lucide !== 'undefined') lucide.createIcons(); +} + +function toggleBoardMaximize() { + isBoardMaximized = !isBoardMaximized; + localStorage.setItem('fociz_board_maximized', isBoardMaximized ? 'true' : 'false'); + applyMaximizeState(isBoardMaximized); +} + +// Pas bewaarde breedte-status direct toe bij het laden +applyMaximizeState(isBoardMaximized); + +// Sneltoets Escape om gemaximaliseerd bord te verkleinen (mits geen modal openstaat) +document.addEventListener('keydown', (e) => { + if (e.key === 'Escape' && isBoardMaximized) { + const anyModalOpen = document.querySelector('#cardModal:not(.hidden), #manageBoardModal:not(.hidden), #createBoardModal:not(.hidden)'); + if (!anyModalOpen) { + toggleBoardMaximize(); + } + } +}); diff --git a/includes/header.php b/includes/header.php index 29784a1..2e83edb 100644 --- a/includes/header.php +++ b/includes/header.php @@ -174,16 +174,13 @@ require_once __DIR__ . '/env_badge.php';