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

Merge pull request 'Postit' (#74) from dev into main

Browse Source 
Reviewed-on: #74
This commit was merged in pull request #74.
This commit is contained in:
NiekRabelink
2026-09-12 18:13:19 +00:00
parent 29874f184b 35fcde49c3
commit fd59cd69c1
7 changed files with 56 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/images/postit_curl_corner.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

assets/images/postit_pin.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

assets/images/postit_real.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

assets/postit_raw.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

assets/postit_real.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

board.php
+28 -64
View File
@@ -25,59 +25,51 @@ $isAdmin = ($userRole === 'ADMIN');
/* --- Realistische Echte Post-it Sticky Note Styling (Conform referentie linksboven) --- */ /* --- Realistische Echte Post-it Sticky Note Styling (Conform referentie linksboven) --- */
.postit-note { .postit-note {
position: relative; position: relative;
border-radius: 2px; border-radius: 2px 2px 0 2px;
/* Uitgesproken, zachte schaduw zoals in referentie */
box-shadow: box-shadow:
0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.05),
0 8px 16px -2px rgba(0, 0, 0, 0.12), 0 6px 14px -2px rgba(0, 0, 0, 0.10),
0 18px 28px -6px rgba(0, 0, 0, 0.14), 0 16px 26px -6px rgba(0, 0, 0, 0.12),
8px 16px 20px -4px rgba(0, 0, 0, 0.18); 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; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
} }
.postit-note:hover { .postit-note:hover {
transform: translateY(-3px) rotate(-0.5deg); transform: translateY(-3px) rotate(-0.5deg);
box-shadow: box-shadow:
0 4px 8px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.08),
0 12px 22px -3px rgba(0, 0, 0, 0.16), 0 10px 20px -3px rgba(0, 0, 0, 0.14),
0 24px 34px -6px rgba(0, 0, 0, 0.18), 0 22px 32px -6px rgba(0, 0, 0, 0.16),
10px 20px 24px -4px rgba(0, 0, 0, 0.22); 8px 18px 22px -4px rgba(0, 0, 0, 0.20);
} }
/* De opkrullende flap rechtsonder met realistische 3D vouw en diepe slagschaduw */ /* De echte opkrullende flap rechtsonder rechtstreeks uit de referentieafbeelding */
.postit-note::after { .postit-note::after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: -1px; bottom: -18px;
right: -1px; right: -16px;
width: 34px; width: 60px;
height: 34px; height: 52px;
background: background-image: url('/assets/images/postit_curl_corner.png');
linear-gradient(135deg, transparent 48%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.28) 60%, transparent 68%), background-size: contain;
linear-gradient(225deg, #fef08a 0%, #facc15 48%, transparent 52%); background-repeat: no-repeat;
border-bottom-right-radius: 2px; background-position: bottom right;
pointer-events: none; pointer-events: none;
z-index: 10; z-index: 10;
box-shadow: 5px 5px 10px -2px rgba(0, 0, 0, 0.3);
clip-path: polygon(100% 0, 0 100%, 100% 100%);
} }
.dark .postit-note::after { /* 3D Rode Punaise (Pushpin) linksboven rechtstreeks uit de referentieafbeelding */
background:
linear-gradient(135deg, transparent 48%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.45) 60%, transparent 68%),
linear-gradient(225deg, #eab308 0%, #ca8a04 48%, transparent 52%);
box-shadow: 5px 5px 12px -2px rgba(0, 0, 0, 0.6);
}
/* 3D Rode Punaise (Pushpin) linksboven met naald en schaduw conform de afbeelding */
.postit-pin { .postit-pin {
position: absolute; position: absolute;
top: -10px; top: -15px;
left: 20px; left: 18px;
width: 22px; width: 36px;
height: 22px; height: 31px;
background-image: url('/assets/images/postit_pin.png');
background-size: contain;
background-repeat: no-repeat;
pointer-events: none; pointer-events: none;
z-index: 25; z-index: 25;
filter: drop-shadow(3px 5px 3px rgba(0, 0, 0, 0.35));
} }
</style> </style>
@@ -850,36 +842,8 @@ 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 3D Rode Punaise conform referentie linksboven --> <!-- Realistische Rode Punaise rechtstreeks uit referentieafbeelding -->
<div class="postit-pin" aria-hidden="true"> <div class="postit-pin" aria-hidden="true"></div>
<svg viewBox="0 0 28 32" class="w-full h-full overflow-visible">
<defs>
<radialGradient id="boardPinHeadGrad" cx="35%" cy="30%" r="65%">
<stop offset="0%" stop-color="#ff8585"/>
<stop offset="35%" stop-color="#dc2626"/>
<stop offset="85%" stop-color="#991b1b"/>
<stop offset="100%" stop-color="#5a0b0b"/>
</radialGradient>
<linearGradient id="boardPinBodyGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#b91c1c"/>
<stop offset="40%" stop-color="#ef4444"/>
<stop offset="80%" stop-color="#991b1b"/>
<stop offset="100%" stop-color="#7f1d1d"/>
</linearGradient>
<linearGradient id="boardPinHighlight" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
</linearGradient>
</defs>
<path d="M14 20 L21 30" stroke="#71717a" stroke-width="2.5" stroke-linecap="round"/>
<path d="M14 20 L20.5 29.5" stroke="#e4e4e7" stroke-width="1.2" stroke-linecap="round"/>
<ellipse cx="14" cy="19" rx="7" ry="2.8" fill="#7f1d1d"/>
<ellipse cx="14" cy="18" rx="6.5" ry="2.5" fill="url(#boardPinBodyGrad)"/>
<path d="M9 14 C9 17, 10 18.5, 14 18.5 C18 18.5, 19 17, 19 14 Z" fill="url(#boardPinBodyGrad)"/>
<circle cx="14" cy="11" r="7.5" fill="url(#boardPinHeadGrad)"/>
<ellipse cx="11.5" cy="8.5" rx="3" ry="1.8" fill="url(#boardPinHighlight)" transform="rotate(-30 11.5 8.5)"/>
</svg>
</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">
brainstorm_canvas.php
+28 -81
View File
@@ -90,61 +90,51 @@ $categories = [
/* --- Realistische Echte Post-it Sticky Note Styling (Conform referentie linksboven) --- */ /* --- Realistische Echte Post-it Sticky Note Styling (Conform referentie linksboven) --- */
.postit-note { .postit-note {
position: relative; position: relative;
border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 0 2px;
/* Uitgesproken, zachte schaduw zoals in referentie */
box-shadow: box-shadow:
0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.05),
0 8px 16px -2px rgba(0, 0, 0, 0.12), 0 6px 14px -2px rgba(0, 0, 0, 0.10),
0 18px 28px -6px rgba(0, 0, 0, 0.14), 0 16px 26px -6px rgba(0, 0, 0, 0.12),
8px 16px 20px -4px rgba(0, 0, 0, 0.18); 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; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
} }
.postit-note:hover { .postit-note:hover {
transform: translateY(-3px) rotate(-0.5deg); transform: translateY(-3px) rotate(-0.5deg);
box-shadow: box-shadow:
0 4px 8px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.08),
0 12px 22px -3px rgba(0, 0, 0, 0.16), 0 10px 20px -3px rgba(0, 0, 0, 0.14),
0 24px 34px -6px rgba(0, 0, 0, 0.18), 0 22px 32px -6px rgba(0, 0, 0, 0.16),
10px 20px 24px -4px rgba(0, 0, 0, 0.22); 8px 18px 22px -4px rgba(0, 0, 0, 0.20);
} }
/* De opkrullende flap rechtsonder met realistische 3D vouw en diepe slagschaduw */ /* De echte opkrullende flap rechtsonder rechtstreeks uit de referentieafbeelding */
.postit-note::after { .postit-note::after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: -1px; bottom: -18px;
right: -1px; right: -16px;
width: 38px; width: 64px;
height: 38px; height: 56px;
/* Subtiel opkrullend effect met highlight en slagschaduw */ background-image: url('/assets/images/postit_curl_corner.png');
background: background-size: contain;
linear-gradient(135deg, transparent 48%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.28) 60%, transparent 68%), background-repeat: no-repeat;
linear-gradient(225deg, #fef08a 0%, #facc15 48%, transparent 52%); background-position: bottom right;
border-bottom-right-radius: 2px;
pointer-events: none; pointer-events: none;
z-index: 10; z-index: 10;
box-shadow: 6px 6px 12px -2px rgba(0, 0, 0, 0.3);
clip-path: polygon(100% 0, 0 100%, 100% 100%);
} }
/* Donkere modus aanpassing voor de opkrulflap */ /* 3D Rode Punaise (Pushpin) linksboven rechtstreeks uit de referentieafbeelding */
.dark .postit-note::after {
background:
linear-gradient(135deg, transparent 48%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.45) 60%, transparent 68%),
linear-gradient(225deg, #eab308 0%, #ca8a04 48%, transparent 52%);
box-shadow: 6px 6px 14px -2px rgba(0, 0, 0, 0.6);
}
/* 3D Rode Punaise (Pushpin) linksboven met naald en schaduw conform de afbeelding */
.postit-pin { .postit-pin {
position: absolute; position: absolute;
top: -12px; top: -16px;
left: 28px; left: 22px;
width: 24px; width: 38px;
height: 24px; height: 33px;
background-image: url('/assets/images/postit_pin.png');
background-size: contain;
background-repeat: no-repeat;
pointer-events: none; pointer-events: none;
z-index: 25; z-index: 25;
filter: drop-shadow(4px 6px 4px rgba(0, 0, 0, 0.35));
} }
</style> </style>
@@ -247,51 +237,8 @@ $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"
> >
<!-- Realistische 3D Rode Punaise (Pushpin) met metalen pin & schaduw conform referentie linksboven --> <!-- Echte Rode Punaise rechtstreeks uit referentieafbeelding -->
<div class="postit-pin" aria-hidden="true"> <div class="postit-pin" aria-hidden="true"></div>
<svg viewBox="0 0 28 32" class="w-full h-full overflow-visible">
<defs>
<!-- Schaduw van de naald op het papier -->
<filter id="pinNeedleShadow" x="-20%" y="-20%" width="160%" height="160%">
<feDropShadow dx="3" dy="4" stdDeviation="1.5" flood-opacity="0.35"/>
</filter>
<!-- Radiaal verloop voor de bolle kop van de punaise -->
<radialGradient id="pinHeadGrad" cx="35%" cy="30%" r="65%">
<stop offset="0%" stop-color="#ff8585"/>
<stop offset="35%" stop-color="#dc2626"/>
<stop offset="85%" stop-color="#991b1b"/>
<stop offset="100%" stop-color="#5a0b0b"/>
</radialGradient>
<!-- Verloop voor de hals en basis ring van de punaise -->
<linearGradient id="pinBodyGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#b91c1c"/>
<stop offset="40%" stop-color="#ef4444"/>
<stop offset="80%" stop-color="#991b1b"/>
<stop offset="100%" stop-color="#7f1d1d"/>
</linearGradient>
<!-- Glans highlight op de kop -->
<linearGradient id="pinHighlight" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
</linearGradient>
</defs>
<!-- Metalen naald die schuin in het papier prikt -->
<path d="M14 20 L21 30" stroke="#71717a" stroke-width="2.5" stroke-linecap="round" filter="url(#pinNeedleShadow)"/>
<path d="M14 20 L20.5 29.5" stroke="#e4e4e7" stroke-width="1.2" stroke-linecap="round"/>
<!-- Onderste rand / ring van de punaisekop -->
<ellipse cx="14" cy="19" rx="7" ry="2.8" fill="#7f1d1d"/>
<ellipse cx="14" cy="18" rx="6.5" ry="2.5" fill="url(#pinBodyGrad)"/>
<!-- Getailleerde taille / hals van de punaise -->
<path d="M9 14 C9 17, 10 18.5, 14 18.5 C18 18.5, 19 17, 19 14 Z" fill="url(#pinBodyGrad)"/>
<!-- Bolle kop van de punaise (rood met 3D glans) -->
<circle cx="14" cy="11" r="7.5" fill="url(#pinHeadGrad)"/>
<!-- Reflectie highlight linksboven op de ronde kop -->
<ellipse cx="11.5" cy="8.5" rx="3" ry="1.8" fill="url(#pinHighlight)" transform="rotate(-30 11.5 8.5)"/>
</svg>
</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">