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

Header redesign

Browse Source
This commit is contained in:
Niek Rabelink
2026-09-14 12:15:18 +02:00
parent 3595d58763
commit e8a6667abd
2 changed files with 72 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
planner.php
+11 -8
View File
@@ -6183,28 +6183,31 @@ async function switchPlannerDate(newDate, event = null, pushState = true) {
if (headerBadgesEl) {
let badgesHtml = '';
if (data.isToday) {
badgesHtml += `<span class="px-2 py-0.5 rounded-full text-[10px] font-extrabold bg-indigo-50 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300 ring-1 ring-indigo-500/30">VANDAAG</span>`;
badgesHtml += `<span class="px-2 py-0.5 rounded-md text-[9px] font-black uppercase tracking-wider bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 border border-indigo-500/20">Vandaag</span>`;
}
if (data.isWorkday) {
badgesHtml += `<span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-emerald-50 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300 ring-1 ring-emerald-500/30 flex items-center gap-1" title="Reguliere werkdag">
<i data-lucide="briefcase" class="w-3 h-3"></i>
badgesHtml += `<span class="hidden lg:inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[9px] font-bold bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20" title="Reguliere werkdag">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
<span>Werkdag</span>
</span>`;
} else {
badgesHtml += `<span class="px-2 py-0.5 rounded-full text-[10px] font-extrabold bg-amber-50 text-amber-700 dark:bg-amber-500/15 dark:text-amber-400 ring-1 ring-amber-500/30 flex items-center gap-1" title="Weekend / Vrije dag">
<i data-lucide="coffee" class="w-3 h-3"></i>
<span>Weekend / Vrij</span>
badgesHtml += `<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[9px] font-bold bg-amber-500/10 text-amber-600 dark:text-amber-400 border border-amber-500/20" title="Weekend / Vrije dag">
<i data-lucide="coffee" class="w-2.5 h-2.5 text-amber-500"></i>
<span>Vrij</span>
</span>`;
}
if (data.isBlocked && data.selectedDayBlock) {
const blockJson = JSON.stringify(data.selectedDayBlock).replace(/"/g, '&quot;');
const blockTitle = (data.selectedDayBlock.title || '').replace(/</g, '&lt;').replace(/>/g, '&gt;');
badgesHtml += `<span class="px-2 py-0.5 rounded-full text-[10px] font-extrabold bg-amber-100 text-amber-900 dark:bg-amber-950/80 dark:text-amber-300 ring-1 ring-amber-500/30 flex items-center gap-1 cursor-pointer" onclick='openCalendarBlockModal(${blockJson})' title="${blockTitle} (klik om te bewerken)">
<i data-lucide="palmtree" class="w-3 h-3 text-amber-600 dark:text-amber-400"></i>
badgesHtml += `<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[9px] font-bold bg-amber-500/15 text-amber-700 dark:text-amber-300 border border-amber-500/30 cursor-pointer hover:bg-amber-500/25 transition" onclick='openCalendarBlockModal(${blockJson})' title="${blockTitle} (klik om te bewerken)">
<i data-lucide="palmtree" class="w-2.5 h-2.5 text-amber-600 dark:text-amber-400"></i>
<span>${blockTitle}</span>
</span>`;
}
headerBadgesEl.innerHTML = badgesHtml;
if (typeof lucide !== 'undefined') {
lucide.createIcons();
}
}
// Werk URL bij in adresbalk zonder paginaherlaad