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

Merge pull request 'Postits' (#72) from dev into main

Browse Source 
Reviewed-on: #72
This commit was merged in pull request #72.
This commit is contained in:
NiekRabelink
2026-09-12 15:24:09 +00:00
parent 880c1bf9bb 5f15eb67fe
commit 0bafe0afe9
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;
}
/* --- Realistische Post-it Styling met Opkrullende Rand Links Onder --- */
/* --- Realistische Echte Post-it Sticky Note Styling --- */
.postit-note {
position: relative;
border-radius: 4px 18px 4px 18px;
box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.12), 0 2px 6px -1px rgba(0, 0, 0, 0.08);
border-top-left-radius: 2px;
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;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.04));
}
.postit-note:hover {
transform: translateY(-3px) scale(1.01);
box-shadow: 0 12px 20px -4px rgba(0, 0, 0, 0.16), 0 6px 10px -2px rgba(0, 0, 0, 0.08);
transform: translateY(-3px) rotate(-0.5deg);
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 {
content: '';
position: absolute;
bottom: -1px;
left: -1px;
width: 20px;
height: 20px;
background: linear-gradient(135deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.06) 45%, transparent 50%);
width: 24px;
height: 24px;
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;
box-shadow: -2px 2px 4px rgba(0,0,0,0.12);
pointer-events: none;
z-index: 5;
}
/* Subtiele klevende plakrand aan de bovenkant */
.postit-note::before {
content: '';
position: absolute;
top: 0;
left: 15%;
right: 15%;
height: 4px;
background: rgba(255, 255, 255, 0.4);
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), transparent);
border-top-left-radius: 2px;
border-top-right-radius: 3px;
pointer-events: none;
}
.dark .postit-note::before {
background: rgba(255, 255, 255, 0.1);
}
</style>
<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',
'icon' => 'lightbulb',
'color' => 'amber',
'border' => 'border-amber-300 dark:border-amber-600/40',
'bg' => 'bg-[#fef9c3] dark:bg-[#713f12]/30 text-amber-950 dark:text-amber-100',
'border' => 'border-amber-300/80 dark:border-amber-500/40',
'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'
],
'Knelpunten' => [
'title' => 'Knelpunten & Uitdagingen',
'icon' => 'alert-triangle',
'color' => 'rose',
'border' => 'border-rose-300 dark:border-rose-600/40',
'bg' => 'bg-[#ffe4e6] dark:bg-[#881337]/30 text-rose-950 dark:text-rose-100',
'border' => 'border-rose-300/80 dark:border-rose-500/40',
'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'
],
'Oplossingen' => [
'title' => 'Oplossingen & Features',
'icon' => 'rocket',
'color' => 'teal',
'border' => 'border-teal-300 dark:border-teal-600/40',
'bg' => 'bg-[#ccfbf1] dark:bg-[#134e4a]/30 text-teal-950 dark:text-teal-100',
'border' => 'border-teal-300/80 dark:border-teal-500/40',
'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'
],
'Quick Wins' => [
'title' => 'Quick Wins (Direct)',
'icon' => 'zap',
'color' => 'indigo',
'border' => 'border-indigo-300 dark:border-indigo-600/40',
'bg' => 'bg-[#e0e7ff] dark:bg-[#312e81]/30 text-indigo-950 dark:text-indigo-100',
'border' => 'border-indigo-300/80 dark:border-indigo-500/40',
'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'
],
];
?>
<style>
/* --- Realistische Post-it Styling met Opkrullende Rand Links Onder --- */
/* --- Realistische Echte Post-it Sticky Note Styling --- */
.postit-note {
position: relative;
border-radius: 4px 18px 4px 18px;
box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.12), 0 2px 6px -1px rgba(0, 0, 0, 0.08);
border-top-left-radius: 2px;
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;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.04));
}
.postit-note:hover {
transform: translateY(-3px) scale(1.01);
box-shadow: 0 12px 20px -4px rgba(0, 0, 0, 0.16), 0 6px 10px -2px rgba(0, 0, 0, 0.08);
transform: translateY(-3px) rotate(-0.5deg);
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 {
content: '';
position: absolute;
bottom: -1px;
left: -1px;
width: 22px;
height: 22px;
background: linear-gradient(135deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.06) 45%, transparent 50%);
width: 24px;
height: 24px;
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;
box-shadow: -2px 2px 4px rgba(0,0,0,0.12);
pointer-events: none;
z-index: 5;
}
/* Subtiele tape / plakrand bovenaan */
/* Subtiele klevende plakrand aan de bovenkant */
.postit-note::before {
content: '';
position: absolute;
top: 0;
left: 15%;
right: 15%;
height: 4px;
background: rgba(255, 255, 255, 0.4);
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), transparent);
border-top-left-radius: 2px;
border-top-right-radius: 3px;
pointer-events: none;
}
.dark .postit-note::before {
background: rgba(255, 255, 255, 0.1);
}
</style>
<div class="space-y-6 max-w-7xl mx-auto">
@@ -252,10 +260,8 @@ $categories = [
</div>
<!-- Inhoud Post-it met verfijnde typografie en uitlijning -->
<div class="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">
<?= htmlspecialchars($card['content']) ?>
</p>
<div class="w-full text-left py-1" onclick="openEditCardModal(<?= $cardJson ?>)">
<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>
</div>
<!-- Assignee & Agenda Tijdblok Badge (indien gekoppeld) -->
@@ -1156,20 +1162,20 @@ async function handleCanvasLaneDrop(e, targetCategory) {
const placeholder = lane.querySelector('.lane-empty-placeholder');
if (placeholder) placeholder.remove();
// Kleurstijlen per categorie bijwerken
// Kleurstijlen per categorie bijwerken (1-op-1 identiek aan PHP styling)
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' },
'Knelpunten': { border: 'border-rose-200/80', darkBorder: 'dark:border-rose-800/40', bg: 'bg-rose-50/60', darkBg: 'dark:bg-rose-950/20' },
'Oplossingen': { border: 'border-teal-200/80', darkBorder: 'dark:border-teal-800/40', bg: 'bg-teal-50/60', darkBg: 'dark:bg-teal-950/20' },
'Quick Wins': { border: 'border-indigo-200/80', darkBorder: 'dark:border-indigo-800/40', bg: 'bg-indigo-50/60', darkBg: 'dark:bg-indigo-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-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-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-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
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'];
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
try {