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

Postits

Browse Source
This commit is contained in:
Niek Rabelink
2026-09-12 17:23:52 +02:00
parent 94d6325693
commit 5f15eb67fe
2 changed files with 75 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
board.php
+29 -19
View File
@@ -22,46 +22,56 @@ $isAdmin = ($userRole === 'ADMIN');
width: 100% !important; width: 100% !important;
} }
/* --- Realistische Post-it Styling met Opkrullende Rand Links Onder --- */ /* --- Realistische Echte Post-it Sticky Note Styling --- */
.postit-note { .postit-note {
position: relative; position: relative;
border-radius: 4px 18px 4px 18px; border-top-left-radius: 2px;
box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.12), 0 2px 6px -1px rgba(0, 0, 0, 0.08); border-top-right-radius: 3px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 14px;
box-shadow:
0 1px 1px rgba(0, 0, 0, 0.08),
0 4px 6px -1px rgba(0, 0, 0, 0.08),
0 10px 18px -4px rgba(0, 0, 0, 0.12),
-2px 6px 8px -2px rgba(0, 0, 0, 0.08);
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.04));
} }
.postit-note:hover { .postit-note:hover {
transform: translateY(-3px) scale(1.01); transform: translateY(-3px) rotate(-0.5deg);
box-shadow: 0 12px 20px -4px rgba(0, 0, 0, 0.16), 0 6px 10px -2px rgba(0, 0, 0, 0.08); box-shadow:
0 2px 4px rgba(0, 0, 0, 0.06),
0 8px 12px -2px rgba(0, 0, 0, 0.12),
0 16px 24px -4px rgba(0, 0, 0, 0.16),
-4px 8px 12px -2px rgba(0, 0, 0, 0.12);
} }
/* Echte sticky note curl & schaduw links onder */
.postit-note::after { .postit-note::after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: -1px; bottom: -1px;
left: -1px; left: -1px;
width: 20px; width: 24px;
height: 20px; height: 24px;
background: linear-gradient(135deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.06) 45%, transparent 50%); background:
linear-gradient(135deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.08) 35%, transparent 45%),
linear-gradient(315deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 40%, transparent 48%);
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
box-shadow: -2px 2px 4px rgba(0,0,0,0.12);
pointer-events: none; pointer-events: none;
z-index: 5; z-index: 5;
} }
/* Subtiele klevende plakrand aan de bovenkant */
.postit-note::before { .postit-note::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 15%; left: 0;
right: 15%; right: 0;
height: 4px; height: 6px;
background: rgba(255, 255, 255, 0.4); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), transparent);
border-bottom-left-radius: 2px; border-top-left-radius: 2px;
border-bottom-right-radius: 2px; border-top-right-radius: 3px;
pointer-events: none; pointer-events: none;
} }
.dark .postit-note::before {
background: rgba(255, 255, 255, 0.1);
}
</style> </style>
<div id="boardPageContainer" class="space-y-4 w-full"> <div id="boardPageContainer" class="space-y-4 w-full">
brainstorm_canvas.php
+46 -40
View File
@@ -55,80 +55,88 @@ $categories = [
'title' => 'Ideeën & Concepten', 'title' => 'Ideeën & Concepten',
'icon' => 'lightbulb', 'icon' => 'lightbulb',
'color' => 'amber', 'color' => 'amber',
'border' => 'border-amber-300 dark:border-amber-600/40', 'border' => 'border-amber-300/80 dark:border-amber-500/40',
'bg' => 'bg-[#fef9c3] dark:bg-[#713f12]/30 text-amber-950 dark:text-amber-100', 'bg' => 'bg-[#fffbeb] dark:bg-[#713f12]/35 text-amber-950 dark:text-amber-100',
'badge' => 'bg-amber-500/20 text-amber-900 dark:text-amber-200' 'badge' => 'bg-amber-500/20 text-amber-900 dark:text-amber-200'
], ],
'Knelpunten' => [ 'Knelpunten' => [
'title' => 'Knelpunten & Uitdagingen', 'title' => 'Knelpunten & Uitdagingen',
'icon' => 'alert-triangle', 'icon' => 'alert-triangle',
'color' => 'rose', 'color' => 'rose',
'border' => 'border-rose-300 dark:border-rose-600/40', 'border' => 'border-rose-300/80 dark:border-rose-500/40',
'bg' => 'bg-[#ffe4e6] dark:bg-[#881337]/30 text-rose-950 dark:text-rose-100', 'bg' => 'bg-[#fff1f2] dark:bg-[#881337]/35 text-rose-950 dark:text-rose-100',
'badge' => 'bg-rose-500/20 text-rose-900 dark:text-rose-200' 'badge' => 'bg-rose-500/20 text-rose-900 dark:text-rose-200'
], ],
'Oplossingen' => [ 'Oplossingen' => [
'title' => 'Oplossingen & Features', 'title' => 'Oplossingen & Features',
'icon' => 'rocket', 'icon' => 'rocket',
'color' => 'teal', 'color' => 'teal',
'border' => 'border-teal-300 dark:border-teal-600/40', 'border' => 'border-teal-300/80 dark:border-teal-500/40',
'bg' => 'bg-[#ccfbf1] dark:bg-[#134e4a]/30 text-teal-950 dark:text-teal-100', 'bg' => 'bg-[#f0fdfa] dark:bg-[#134e4a]/35 text-teal-950 dark:text-teal-100',
'badge' => 'bg-teal-500/20 text-teal-900 dark:text-teal-200' 'badge' => 'bg-teal-500/20 text-teal-900 dark:text-teal-200'
], ],
'Quick Wins' => [ 'Quick Wins' => [
'title' => 'Quick Wins (Direct)', 'title' => 'Quick Wins (Direct)',
'icon' => 'zap', 'icon' => 'zap',
'color' => 'indigo', 'color' => 'indigo',
'border' => 'border-indigo-300 dark:border-indigo-600/40', 'border' => 'border-indigo-300/80 dark:border-indigo-500/40',
'bg' => 'bg-[#e0e7ff] dark:bg-[#312e81]/30 text-indigo-950 dark:text-indigo-100', 'bg' => 'bg-[#eef2ff] dark:bg-[#312e81]/35 text-indigo-950 dark:text-indigo-100',
'badge' => 'bg-indigo-500/20 text-indigo-900 dark:text-indigo-200' 'badge' => 'bg-indigo-500/20 text-indigo-900 dark:text-indigo-200'
], ],
]; ];
?> ?>
<style> <style>
/* --- Realistische Post-it Styling met Opkrullende Rand Links Onder --- */ /* --- Realistische Echte Post-it Sticky Note Styling --- */
.postit-note { .postit-note {
position: relative; position: relative;
border-radius: 4px 18px 4px 18px; border-top-left-radius: 2px;
box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.12), 0 2px 6px -1px rgba(0, 0, 0, 0.08); border-top-right-radius: 3px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 14px;
box-shadow:
0 1px 1px rgba(0, 0, 0, 0.08),
0 4px 6px -1px rgba(0, 0, 0, 0.08),
0 10px 18px -4px rgba(0, 0, 0, 0.12),
-2px 6px 8px -2px rgba(0, 0, 0, 0.08);
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.04));
} }
.postit-note:hover { .postit-note:hover {
transform: translateY(-3px) scale(1.01); transform: translateY(-3px) rotate(-0.5deg);
box-shadow: 0 12px 20px -4px rgba(0, 0, 0, 0.16), 0 6px 10px -2px rgba(0, 0, 0, 0.08); box-shadow:
0 2px 4px rgba(0, 0, 0, 0.06),
0 8px 12px -2px rgba(0, 0, 0, 0.12),
0 16px 24px -4px rgba(0, 0, 0, 0.16),
-4px 8px 12px -2px rgba(0, 0, 0, 0.12);
} }
/* Opkrullend hoekje links onder */ /* Echte sticky note curl & schaduw links onder */
.postit-note::after { .postit-note::after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: -1px; bottom: -1px;
left: -1px; left: -1px;
width: 22px; width: 24px;
height: 22px; height: 24px;
background: linear-gradient(135deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.06) 45%, transparent 50%); background:
linear-gradient(135deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.08) 35%, transparent 45%),
linear-gradient(315deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 40%, transparent 48%);
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
box-shadow: -2px 2px 4px rgba(0,0,0,0.12);
pointer-events: none; pointer-events: none;
z-index: 5; z-index: 5;
} }
/* Subtiele tape / plakrand bovenaan */ /* Subtiele klevende plakrand aan de bovenkant */
.postit-note::before { .postit-note::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 15%; left: 0;
right: 15%; right: 0;
height: 4px; height: 6px;
background: rgba(255, 255, 255, 0.4); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), transparent);
border-bottom-left-radius: 2px; border-top-left-radius: 2px;
border-bottom-right-radius: 2px; border-top-right-radius: 3px;
pointer-events: none; pointer-events: none;
} }
.dark .postit-note::before {
background: rgba(255, 255, 255, 0.1);
}
</style> </style>
<div class="space-y-6 max-w-7xl mx-auto"> <div class="space-y-6 max-w-7xl mx-auto">
@@ -252,10 +260,8 @@ $categories = [
</div> </div>
<!-- Inhoud Post-it met verfijnde typografie en uitlijning --> <!-- Inhoud Post-it met verfijnde typografie en uitlijning -->
<div class="text-left py-1" onclick="openEditCardModal(<?= $cardJson ?>)"> <div class="w-full text-left py-1" onclick="openEditCardModal(<?= $cardJson ?>)">
<p class="text-xs font-semibold leading-relaxed whitespace-pre-wrap break-words text-left cursor-pointer" title="Klik om te bewerken"> <p class="text-xs font-semibold leading-relaxed whitespace-pre-line break-words text-left text-slate-900 dark:text-slate-100 cursor-pointer m-0 p-0 block" title="Klik om te bewerken"><?= htmlspecialchars(trim($card['content'])) ?></p>
<?= htmlspecialchars($card['content']) ?>
</p>
</div> </div>
<!-- Assignee & Agenda Tijdblok Badge (indien gekoppeld) --> <!-- Assignee & Agenda Tijdblok Badge (indien gekoppeld) -->
@@ -1156,20 +1162,20 @@ async function handleCanvasLaneDrop(e, targetCategory) {
const placeholder = lane.querySelector('.lane-empty-placeholder'); const placeholder = lane.querySelector('.lane-empty-placeholder');
if (placeholder) placeholder.remove(); if (placeholder) placeholder.remove();
// Kleurstijlen per categorie bijwerken // Kleurstijlen per categorie bijwerken (1-op-1 identiek aan PHP styling)
const categoryStyles = { const categoryStyles = {
'Ideeën': { border: 'border-amber-200/80', darkBorder: 'dark:border-amber-800/40', bg: 'bg-amber-50/60', darkBg: 'dark:bg-amber-950/20' }, 'Ideeën': { border: 'border-amber-300/80', darkBorder: 'dark:border-amber-500/40', bg: 'bg-[#fffbeb]', darkBg: 'dark:bg-[#713f12]/35', text: 'text-amber-950', darkText: 'dark:text-amber-100' },
'Knelpunten': { border: 'border-rose-200/80', darkBorder: 'dark:border-rose-800/40', bg: 'bg-rose-50/60', darkBg: 'dark:bg-rose-950/20' }, 'Knelpunten': { border: 'border-rose-300/80', darkBorder: 'dark:border-rose-500/40', bg: 'bg-[#fff1f2]', darkBg: 'dark:bg-[#881337]/35', text: 'text-rose-950', darkText: 'dark:text-rose-100' },
'Oplossingen': { border: 'border-teal-200/80', darkBorder: 'dark:border-teal-800/40', bg: 'bg-teal-50/60', darkBg: 'dark:bg-teal-950/20' }, 'Oplossingen': { border: 'border-teal-300/80', darkBorder: 'dark:border-teal-500/40', bg: 'bg-[#f0fdfa]', darkBg: 'dark:bg-[#134e4a]/35', text: 'text-teal-950', darkText: 'dark:text-teal-100' },
'Quick Wins': { border: 'border-indigo-200/80', darkBorder: 'dark:border-indigo-800/40', bg: 'bg-indigo-50/60', darkBg: 'dark:bg-indigo-950/20' } 'Quick Wins': { border: 'border-indigo-300/80', darkBorder: 'dark:border-indigo-500/40', bg: 'bg-[#eef2ff]', darkBg: 'dark:bg-[#312e81]/35', text: 'text-indigo-950', darkText: 'dark:text-indigo-100' }
}; };
// Verwijder oude kleurklassen en voeg nieuwe toe // Verwijder oude kleurklassen en voeg nieuwe toe
Object.values(categoryStyles).forEach(st => { Object.values(categoryStyles).forEach(st => {
cardEl.classList.remove(st.border, st.darkBorder, st.bg, st.darkBg); cardEl.classList.remove(st.border, st.darkBorder, st.bg, st.darkBg, st.text, st.darkText, 'bg-[#fef9c3]', 'bg-[#ffe4e6]', 'bg-[#ccfbf1]', 'bg-[#e0e7ff]', 'bg-amber-50/60', 'bg-rose-50/60', 'bg-teal-50/60', 'bg-indigo-50/60');
}); });
const targetStyle = categoryStyles[targetCategory] || categoryStyles['Ideeën']; const targetStyle = categoryStyles[targetCategory] || categoryStyles['Ideeën'];
cardEl.classList.add(targetStyle.border, targetStyle.darkBorder, targetStyle.bg, targetStyle.darkBg); cardEl.classList.add(targetStyle.border, targetStyle.darkBorder, targetStyle.bg, targetStyle.darkBg, targetStyle.text, targetStyle.darkText);
// Stuur POST naar backend om categorie en kleur te bewaren // Stuur POST naar backend om categorie en kleur te bewaren
try { try {