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

Compare commits

base: NiekRabelink/Fociz:fd59cd69c1d2a420a726fb27e8b34a5a60ff12a4
Branches Tags
NiekRabelink/Fociz:main NiekRabelink/Fociz:MainJouwdriedee NiekRabelink/Fociz:dev
...
compare: NiekRabelink/Fociz:6987cab4f85fdad9bac6cb61306fe6a9037d68df
Branches Tags
NiekRabelink/Fociz:main NiekRabelink/Fociz:MainJouwdriedee NiekRabelink/Fociz:dev

2 Commits
fd59cd69c1 ... 6987cab4f8

Author SHA1 Message Date
NiekRabelink 6987cab4f8 Merge pull request 'Verbetering postit' (#75) from dev into main 
Reviewed-on: #75
 2026-09-12 18:17:15 +00:00
NiekRabelink 89b53f6428 Verbetering postit 2026-09-12 20:16:59 +02:00
2 changed files with 85 additions and 76 deletions
Expand all files Collapse all files
board.php
+42 -38
View File
@@ -22,54 +22,61 @@ $isAdmin = ($userRole === 'ADMIN');
width: 100% !important; width: 100% !important;
} }
/* --- Realistische Echte Post-it Sticky Note Styling (Conform referentie linksboven) --- */ /* --- Strakke, Moderne & Professionele Post-it Sticky Note Styling --- */
.postit-note { .postit-note {
position: relative; position: relative;
border-radius: 2px 2px 0 2px; border-radius: 6px;
box-shadow: box-shadow:
0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04),
0 6px 14px -2px rgba(0, 0, 0, 0.10), 0 4px 10px -2px rgba(0, 0, 0, 0.08),
0 16px 26px -6px rgba(0, 0, 0, 0.12), 0 12px 20px -4px rgba(0, 0, 0, 0.06);
6px 14px 18px -4px rgba(0, 0, 0, 0.15); transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}
.postit-note:hover {
transform: translateY(-3px) rotate(-0.5deg);
box-shadow:
0 3px 6px rgba(0, 0, 0, 0.08),
0 10px 20px -3px rgba(0, 0, 0, 0.14),
0 22px 32px -6px rgba(0, 0, 0, 0.16),
8px 18px 22px -4px rgba(0, 0, 0, 0.20);
} }
/* De echte opkrullende flap rechtsonder rechtstreeks uit de referentieafbeelding */ .postit-note:hover {
.postit-note::after { transform: translateY(-3px);
box-shadow:
0 3px 6px rgba(0, 0, 0, 0.06),
0 8px 18px -2px rgba(0, 0, 0, 0.12),
0 16px 28px -4px rgba(0, 0, 0, 0.10);
}
/* Strakke, semi-transparante plakstrip (tape) bovenaan het briefje */
.postit-note::before {
content: ''; content: '';
position: absolute; position: absolute;
bottom: -18px; top: -6px;
right: -16px; left: 50%;
width: 60px; transform: translateX(-50%);
height: 52px; width: 54px;
background-image: url('/assets/images/postit_curl_corner.png'); height: 13px;
background-size: contain; background: rgba(255, 255, 255, 0.65);
background-repeat: no-repeat; border: 1px solid rgba(0, 0, 0, 0.06);
background-position: bottom right; backdrop-filter: blur(2px);
border-radius: 2px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
pointer-events: none; pointer-events: none;
z-index: 10; z-index: 10;
} }
/* 3D Rode Punaise (Pushpin) linksboven rechtstreeks uit de referentieafbeelding */ .dark .postit-note::before {
.postit-pin { background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
/* Subtiele plakrand glans bovenaan de post-it zelf */
.postit-note::after {
content: '';
position: absolute; position: absolute;
top: -15px; top: 0;
left: 18px; left: 0;
width: 36px; right: 0;
height: 31px; height: 4px;
background-image: url('/assets/images/postit_pin.png'); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), transparent);
background-size: contain; border-top-left-radius: 6px;
background-repeat: no-repeat; border-top-right-radius: 6px;
pointer-events: none; pointer-events: none;
z-index: 25;
} }
</style> </style>
@@ -842,9 +849,6 @@ function renderCards() {
oncontextmenu="openBoardCardContextMenu(event, ${card.id}); return false;" oncontextmenu="openBoardCardContextMenu(event, ${card.id}); return false;"
class="group/card relative p-3 rounded-xl border ${colorClass} shadow-2xs hover:shadow-md hover:-translate-y-0.5 transition cursor-grab active:cursor-grabbing mb-2.5 postit-note" class="group/card relative p-3 rounded-xl border ${colorClass} shadow-2xs hover:shadow-md hover:-translate-y-0.5 transition cursor-grab active:cursor-grabbing mb-2.5 postit-note"
> >
<!-- Realistische Rode Punaise rechtstreeks uit referentieafbeelding -->
<div class="postit-pin" aria-hidden="true"></div>
<div class="flex items-start justify-between gap-1.5 mb-1.5"> <div class="flex items-start justify-between gap-1.5 mb-1.5">
<h4 class="text-xs font-bold leading-snug line-clamp-2 break-words"> <h4 class="text-xs font-bold leading-snug line-clamp-2 break-words">
${escapeHtml(card.title)} ${escapeHtml(card.title)}
brainstorm_canvas.php
+43 -38
View File
@@ -87,54 +87,62 @@ $categories = [
?> ?>
<style> <style>
/* --- Realistische Echte Post-it Sticky Note Styling (Conform referentie linksboven) --- */ /* --- Strakke, Moderne & Professionele Post-it Sticky Note Styling --- */
.postit-note { .postit-note {
position: relative; position: relative;
border-radius: 2px 2px 0 2px; border-radius: 6px;
/* Natuurlijke, strakke papieren diepteschaduw */
box-shadow: box-shadow:
0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04),
0 6px 14px -2px rgba(0, 0, 0, 0.10), 0 4px 10px -2px rgba(0, 0, 0, 0.08),
0 16px 26px -6px rgba(0, 0, 0, 0.12), 0 12px 20px -4px rgba(0, 0, 0, 0.06);
6px 14px 18px -4px rgba(0, 0, 0, 0.15); transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}
.postit-note:hover {
transform: translateY(-3px) rotate(-0.5deg);
box-shadow:
0 3px 6px rgba(0, 0, 0, 0.08),
0 10px 20px -3px rgba(0, 0, 0, 0.14),
0 22px 32px -6px rgba(0, 0, 0, 0.16),
8px 18px 22px -4px rgba(0, 0, 0, 0.20);
} }
/* De echte opkrullende flap rechtsonder rechtstreeks uit de referentieafbeelding */ .postit-note:hover {
.postit-note::after { transform: translateY(-3px);
box-shadow:
0 3px 6px rgba(0, 0, 0, 0.06),
0 8px 18px -2px rgba(0, 0, 0, 0.12),
0 16px 28px -4px rgba(0, 0, 0, 0.10);
}
/* Strakke, semi-transparante plakstrip (tape) bovenaan het briefje */
.postit-note::before {
content: ''; content: '';
position: absolute; position: absolute;
bottom: -18px; top: -6px;
right: -16px; left: 50%;
width: 64px; transform: translateX(-50%);
height: 56px; width: 60px;
background-image: url('/assets/images/postit_curl_corner.png'); height: 14px;
background-size: contain; background: rgba(255, 255, 255, 0.65);
background-repeat: no-repeat; border: 1px solid rgba(0, 0, 0, 0.06);
background-position: bottom right; backdrop-filter: blur(2px);
border-radius: 2px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
pointer-events: none; pointer-events: none;
z-index: 10; z-index: 10;
} }
/* 3D Rode Punaise (Pushpin) linksboven rechtstreeks uit de referentieafbeelding */ .dark .postit-note::before {
.postit-pin { background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
/* Subtiele plakrand glans bovenaan de post-it zelf */
.postit-note::after {
content: '';
position: absolute; position: absolute;
top: -16px; top: 0;
left: 22px; left: 0;
width: 38px; right: 0;
height: 33px; height: 4px;
background-image: url('/assets/images/postit_pin.png'); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), transparent);
background-size: contain; border-top-left-radius: 6px;
background-repeat: no-repeat; border-top-right-radius: 6px;
pointer-events: none; pointer-events: none;
z-index: 25;
} }
</style> </style>
@@ -237,9 +245,6 @@ $categories = [
oncontextmenu="openCardContextMenu(event, <?= $cardJson ?>); return false;" oncontextmenu="openCardContextMenu(event, <?= $cardJson ?>); return false;"
class="brainstorm-card postit-note group relative p-4 border <?= $catConfig['border'] ?> <?= $catConfig['bg'] ?> transition-all duration-150 cursor-grab active:cursor-grabbing hover:-translate-y-1 flex flex-col justify-between" class="brainstorm-card postit-note group relative p-4 border <?= $catConfig['border'] ?> <?= $catConfig['bg'] ?> transition-all duration-150 cursor-grab active:cursor-grabbing hover:-translate-y-1 flex flex-col justify-between"
> >
<!-- Echte Rode Punaise rechtstreeks uit referentieafbeelding -->
<div class="postit-pin" aria-hidden="true"></div>
<!-- Top: Checkbox voor selectie + Roadmap badge --> <!-- Top: Checkbox voor selectie + Roadmap badge -->
<div class="flex items-center justify-between gap-2 mb-2"> <div class="flex items-center justify-between gap-2 mb-2">
<label class="inline-flex items-center space-x-2 cursor-pointer select-none"> <label class="inline-flex items-center space-x-2 cursor-pointer select-none">