Enhance board and planner UI; implement smooth width transitions, update icons, and improve layout responsiveness
This commit is contained in:
@@ -12,16 +12,28 @@ $userRole = $currentUser['role'] ?? 'MEMBER';
|
||||
$isAdmin = ($userRole === 'ADMIN');
|
||||
?>
|
||||
|
||||
<div class="space-y-6 max-w-[1600px] mx-auto px-2 sm:px-4">
|
||||
<style>
|
||||
/* Soepele overgang tussen standaard en gemaximaliseerde browserbreedte */
|
||||
#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);
|
||||
}
|
||||
#boardMainWrapper.is-maximized {
|
||||
max-width: 100% !important;
|
||||
padding-left: 1.25rem !important;
|
||||
padding-right: 1.25rem !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="boardMainWrapper" class="space-y-5 max-w-[1600px] mx-auto px-2 sm:px-4">
|
||||
|
||||
<!-- Bovenbalk: Bord Titel, Filters & Actieknoppen -->
|
||||
<div class="fociz-card p-5 sm:p-6">
|
||||
<div class="fociz-card p-4 sm:p-5">
|
||||
<div class="flex flex-col xl:flex-row xl:items-center justify-between gap-4">
|
||||
|
||||
<!-- Linkerkant: Bordkiezer & Titel -->
|
||||
<div class="flex items-center space-x-3.5">
|
||||
<div class="w-10 h-10 rounded-2xl bg-gradient-to-tr from-indigo-600 to-sky-500 text-white flex items-center justify-center shadow-sm shadow-indigo-500/20 flex-shrink-0">
|
||||
<i data-lucide="trello" class="w-5 h-5"></i>
|
||||
<i data-lucide="kanban" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center space-x-2">
|
||||
@@ -39,7 +51,7 @@ $isAdmin = ($userRole === 'ADMIN');
|
||||
</div>
|
||||
|
||||
<!-- Midden & Rechts: Filters & Actieknoppen -->
|
||||
<div class="flex flex-wrap items-center gap-2.5">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
|
||||
<!-- Filter: Assignee / Collega -->
|
||||
<div class="relative">
|
||||
@@ -66,12 +78,23 @@ $isAdmin = ($userRole === 'ADMIN');
|
||||
<input
|
||||
type="text"
|
||||
id="filterSearch"
|
||||
placeholder="Zoeken op taak..."
|
||||
placeholder="Zoeken..."
|
||||
oninput="renderCards()"
|
||||
class="pl-8 pr-3 py-2 text-xs bg-slate-50 dark:bg-[#0c0f17] border border-slate-200 dark:border-slate-800 rounded-xl text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-2 focus:ring-indigo-500/30 w-36 sm:w-44 shadow-2xs"
|
||||
class="pl-8 pr-3 py-2 text-xs bg-slate-50 dark:bg-[#0c0f17] border border-slate-200 dark:border-slate-800 rounded-xl text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-2 focus:ring-indigo-500/30 w-32 sm:w-40 shadow-2xs"
|
||||
>
|
||||
</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"
|
||||
@@ -105,8 +128,8 @@ $isAdmin = ($userRole === 'ADMIN');
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kanban Board Container (Horizontaal scrollbaar) -->
|
||||
<div id="boardLanesContainer" class="flex gap-5 overflow-x-auto pb-8 pt-1 min-h-[650px] items-start select-none">
|
||||
<!-- 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">
|
||||
<i data-lucide="loader-2" class="w-5 h-5 animate-spin mr-2"></i>
|
||||
<span>Bord laden...</span>
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<?php require_once __DIR__ . '/includes/footer.php'; ?>
|
||||
|
||||
Reference in New Issue
Block a user