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;
}
/* --- Realistische Echte Post-it Sticky Note Styling (Conform referentie linksboven) --- */
/* --- Strakke, Moderne & Professionele Post-it Sticky Note Styling --- */
.postit-note {
position: relative;
border-radius: 2px 2px 0 2px;
border-radius: 6px;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.05),
0 6px 14px -2px rgba(0, 0, 0, 0.10),
0 16px 26px -6px rgba(0, 0, 0, 0.12),
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;
}
.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);
0 1px 2px rgba(0, 0, 0, 0.04),
0 4px 10px -2px rgba(0, 0, 0, 0.08),
0 12px 20px -4px rgba(0, 0, 0, 0.06);
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
/* De echte opkrullende flap rechtsonder rechtstreeks uit de referentieafbeelding */
.postit-note::after {
.postit-note:hover {
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: '';
position: absolute;
bottom: -18px;
right: -16px;
width: 60px;
height: 52px;
background-image: url('/assets/images/postit_curl_corner.png');
background-size: contain;
background-repeat: no-repeat;
background-position: bottom right;
top: -6px;
left: 50%;
transform: translateX(-50%);
width: 54px;
height: 13px;
background: rgba(255, 255, 255, 0.65);
border: 1px solid rgba(0, 0, 0, 0.06);
backdrop-filter: blur(2px);
border-radius: 2px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
pointer-events: none;
z-index: 10;
}
/* 3D Rode Punaise (Pushpin) linksboven rechtstreeks uit de referentieafbeelding */
.postit-pin {
.dark .postit-note::before {
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;
top: -15px;
left: 18px;
width: 36px;
height: 31px;
background-image: url('/assets/images/postit_pin.png');
background-size: contain;
background-repeat: no-repeat;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), transparent);
border-top-left-radius: 6px;
border-top-right-radius: 6px;
pointer-events: none;
z-index: 25;
}
</style>
@@ -842,9 +849,6 @@ function renderCards() {
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"
>
<!-- 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">
<h4 class="text-xs font-bold leading-snug line-clamp-2 break-words">
${escapeHtml(card.title)}
brainstorm_canvas.php
+43 -38
View File
@@ -87,54 +87,62 @@ $categories = [
?>
<style>
/* --- Realistische Echte Post-it Sticky Note Styling (Conform referentie linksboven) --- */
/* --- Strakke, Moderne & Professionele Post-it Sticky Note Styling --- */
.postit-note {
position: relative;
border-radius: 2px 2px 0 2px;
border-radius: 6px;
/* Natuurlijke, strakke papieren diepteschaduw */
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.05),
0 6px 14px -2px rgba(0, 0, 0, 0.10),
0 16px 26px -6px rgba(0, 0, 0, 0.12),
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;
}
.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);
0 1px 2px rgba(0, 0, 0, 0.04),
0 4px 10px -2px rgba(0, 0, 0, 0.08),
0 12px 20px -4px rgba(0, 0, 0, 0.06);
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
/* De echte opkrullende flap rechtsonder rechtstreeks uit de referentieafbeelding */
.postit-note::after {
.postit-note:hover {
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: '';
position: absolute;
bottom: -18px;
right: -16px;
width: 64px;
height: 56px;
background-image: url('/assets/images/postit_curl_corner.png');
background-size: contain;
background-repeat: no-repeat;
background-position: bottom right;
top: -6px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 14px;
background: rgba(255, 255, 255, 0.65);
border: 1px solid rgba(0, 0, 0, 0.06);
backdrop-filter: blur(2px);
border-radius: 2px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
pointer-events: none;
z-index: 10;
}
/* 3D Rode Punaise (Pushpin) linksboven rechtstreeks uit de referentieafbeelding */
.postit-pin {
.dark .postit-note::before {
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;
top: -16px;
left: 22px;
width: 38px;
height: 33px;
background-image: url('/assets/images/postit_pin.png');
background-size: contain;
background-repeat: no-repeat;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), transparent);
border-top-left-radius: 6px;
border-top-right-radius: 6px;
pointer-events: none;
z-index: 25;
}
</style>
@@ -237,9 +245,6 @@ $categories = [
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"
>
<!-- Echte Rode Punaise rechtstreeks uit referentieafbeelding -->
<div class="postit-pin" aria-hidden="true"></div>
<!-- Top: Checkbox voor selectie + Roadmap badge -->
<div class="flex items-center justify-between gap-2 mb-2">
<label class="inline-flex items-center space-x-2 cursor-pointer select-none">