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

Header redesign #80

Merged
NiekRabelink merged 1 commits from dev into main 2026-09-14 10:15:33 +00:00
Conversation 0 Commits 1 Files Changed 2
+72 -62
2 changed files with 72 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
includes/header.php
+61 -54
View File
@@ -150,8 +150,8 @@ require_once __DIR__ . '/env_badge.php';
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16"> <div class="flex items-center justify-between h-16">
<!-- Brand Logo (met linker padding zodat het dev/live badge vrij staat) --> <!-- Brand Logo (met linker padding zodat het dev/live badge vrij staat) -->
<div class="flex items-center space-x-6 pl-28 sm:pl-36"> <div class="flex items-center space-x-4 lg:space-x-6 pl-16 sm:pl-20 lg:pl-24 shrink-0">
<a href="/planner.php" class="flex items-center space-x-2.5 group"> <a href="/planner.php" class="flex items-center space-x-2.5 group shrink-0">
<div class="w-8 h-8 rounded-xl bg-gradient-to-tr from-indigo-600 to-sky-500 flex items-center justify-center text-white font-black text-sm shadow-sm shadow-indigo-500/20 group-hover:scale-105 transition"> <div class="w-8 h-8 rounded-xl bg-gradient-to-tr from-indigo-600 to-sky-500 flex items-center justify-center text-white font-black text-sm shadow-sm shadow-indigo-500/20 group-hover:scale-105 transition">
F F
</div> </div>
@@ -251,67 +251,74 @@ require_once __DIR__ . '/env_badge.php';
</div> </div>
<!-- Right side: Clean User Profile & Logout --> <!-- Right side: Clean User Profile & Logout -->
<div class="flex items-center space-x-2 sm:space-x-3"> <div class="flex items-center space-x-2 sm:space-x-3 shrink-0">
<?php if ($currentPage === 'planner.php' && !empty($formattedSelectedDate)): ?> <?php if ($currentPage === 'planner.php' && !empty($formattedSelectedDate)): ?>
<!-- Header Planner Datum & Status --> <!-- Unified Dashboard Toolbar Pill (Datum, Badges & Instellingen) -->
<div class="flex items-center gap-1.5 sm:gap-2 mr-1 sm:mr-2"> <div class="flex items-center bg-slate-100/80 dark:bg-slate-800/60 rounded-xl p-1 border border-slate-200/80 dark:border-slate-700/60 shadow-2xs whitespace-nowrap shrink-0">
<div class="flex items-center space-x-1.5 text-xs font-bold text-slate-700 dark:text-slate-200 bg-slate-100 dark:bg-slate-800/80 px-2.5 py-1.5 rounded-xl border border-slate-200/80 dark:border-slate-700/60 shadow-2xs"> <!-- Date & Status -->
<i data-lucide="calendar" class="w-3.5 h-3.5 text-indigo-500"></i> <div class="flex items-center space-x-2 px-2.5 py-1 text-xs text-slate-700 dark:text-slate-200 select-none">
<span id="headerCurrentDateDisplay"><?= htmlspecialchars($formattedSelectedDate) ?></span> <div class="w-6 h-6 rounded-lg bg-indigo-50 dark:bg-indigo-500/15 text-indigo-600 dark:text-indigo-400 flex items-center justify-center shrink-0">
<i data-lucide="calendar" class="w-3.5 h-3.5"></i>
</div>
<span id="headerCurrentDateDisplay" class="font-semibold tracking-tight whitespace-nowrap"><?= htmlspecialchars($formattedSelectedDate) ?></span>
<!-- Badges -->
<span id="headerDateBadgesContainer" class="flex items-center gap-1.5 ml-1">
<?php if (!empty($isTodaySelected)): ?>
<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>
<?php endif; ?>
<?php if (!empty($isSelectedDateWorkday)): ?>
<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>
<?php else: ?>
<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>
<?php endif; ?>
<?php if (!empty($isSelectedDateBlocked)): ?>
<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(<?= htmlspecialchars(json_encode($selectedDayBlock), ENT_QUOTES) ?>)" title="<?= htmlspecialchars($selectedDayBlock['title'] ?? '') ?> (klik om te bewerken)">
<i data-lucide="palmtree" class="w-2.5 h-2.5 text-amber-600 dark:text-amber-400"></i>
<span><?= htmlspecialchars($selectedDayBlock['title'] ?? '') ?></span>
</span>
<?php endif; ?>
</span>
</div> </div>
<div id="headerDateBadgesContainer" class="hidden sm:flex items-center gap-1.5"> <!-- Divider -->
<?php if (!empty($isTodaySelected)): ?> <div class="h-4 w-px bg-slate-200 dark:bg-slate-700 mx-0.5 shrink-0"></div>
<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>
<?php endif; ?>
<?php if (!empty($isSelectedDateWorkday)): ?> <!-- Instellingen Tandwiel Dropdown -->
<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"> <div class="relative">
<i data-lucide="briefcase" class="w-3 h-3"></i> <button id="plannerSettingsDropdownBtn" onclick="togglePlannerSettingsMenu(event)" class="w-7 h-7 rounded-lg flex items-center justify-center text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-white dark:hover:bg-slate-700/60 transition cursor-pointer" title="Dashboard Opties & Instellingen">
<span>Werkdag</span> <i data-lucide="settings" class="w-4 h-4"></i>
</span>
<?php else: ?>
<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>
</span>
<?php endif; ?>
<?php if (!empty($isSelectedDateBlocked)): ?>
<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(<?= htmlspecialchars(json_encode($selectedDayBlock), ENT_QUOTES) ?>)" title="<?= htmlspecialchars($selectedDayBlock['title'] ?? '') ?> (klik om te bewerken)">
<i data-lucide="palmtree" class="w-3 h-3 text-amber-600 dark:text-amber-400"></i>
<span><?= htmlspecialchars($selectedDayBlock['title'] ?? '') ?></span>
</span>
<?php endif; ?>
</div>
</div>
<!-- Instellingen Dropdown (Widgets, Indeling & Dagen Blokkeren) - alleen op planner.php -->
<div class="relative mr-1 sm:mr-2">
<button id="plannerSettingsDropdownBtn" onclick="togglePlannerSettingsMenu(event)" class="p-1.5 sm:p-2 rounded-xl text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800/80 transition cursor-pointer border border-transparent hover:border-slate-200 dark:hover:border-slate-700" title="Dashboard Opties & Instellingen">
<i data-lucide="settings" class="w-4 sm:w-5 h-4 sm:h-5"></i>
</button>
<div id="plannerSettingsDropdownMenu" class="hidden absolute right-0 mt-2 w-56 rounded-2xl bg-white dark:bg-[#111624] border border-slate-200 dark:border-slate-800 shadow-xl py-1.5 z-50 text-xs text-slate-700 dark:text-slate-300">
<button onclick="closePlannerSettingsMenu(); openWidgetManagerModal();" class="w-full text-left px-3.5 py-2 hover:bg-slate-50 dark:hover:bg-slate-800/70 flex items-center space-x-2.5 transition cursor-pointer">
<i data-lucide="layout-grid" class="w-4 h-4 text-indigo-500"></i>
<span class="font-medium">Widgets & Indeling</span>
</button> </button>
<button onclick="closePlannerSettingsMenu(); openCalendarBlockModal();" class="w-full text-left px-3.5 py-2 hover:bg-slate-50 dark:hover:bg-slate-800/70 flex items-center space-x-2.5 transition cursor-pointer"> <div id="plannerSettingsDropdownMenu" class="hidden absolute right-0 mt-2 w-56 rounded-2xl bg-white dark:bg-[#111624] border border-slate-200 dark:border-slate-800 shadow-xl py-1.5 z-50 text-xs text-slate-700 dark:text-slate-300">
<i data-lucide="palmtree" class="w-4 h-4 text-amber-500"></i> <button onclick="closePlannerSettingsMenu(); openWidgetManagerModal();" class="w-full text-left px-3.5 py-2 hover:bg-slate-50 dark:hover:bg-slate-800/70 flex items-center space-x-2.5 transition cursor-pointer">
<span class="font-medium">Vakantie / Dagen Blokkeren</span> <i data-lucide="layout-grid" class="w-4 h-4 text-indigo-500"></i>
</button> <span class="font-medium">Widgets & Indeling</span>
<?php if (!empty($isOutlookConnected)): ?> </button>
<button onclick="closePlannerSettingsMenu(); triggerManualSync();" class="w-full text-left px-3.5 py-2 hover:bg-slate-50 dark:hover:bg-slate-800/70 flex items-center space-x-2.5 transition cursor-pointer border-t border-slate-100 dark:border-slate-800/80"> <button onclick="closePlannerSettingsMenu(); openCalendarBlockModal();" class="w-full text-left px-3.5 py-2 hover:bg-slate-50 dark:hover:bg-slate-800/70 flex items-center space-x-2.5 transition cursor-pointer">
<i data-lucide="refresh-cw" class="w-4 h-4 text-sky-500"></i> <i data-lucide="palmtree" class="w-4 h-4 text-amber-500"></i>
<span class="font-medium">Outlook Synchroniseren</span> <span class="font-medium">Vakantie / Dagen Blokkeren</span>
</button> </button>
<?php endif; ?> <?php if (!empty($isOutlookConnected)): ?>
<button onclick="closePlannerSettingsMenu(); triggerManualSync();" class="w-full text-left px-3.5 py-2 hover:bg-slate-50 dark:hover:bg-slate-800/70 flex items-center space-x-2.5 transition cursor-pointer border-t border-slate-100 dark:border-slate-800/80">
<i data-lucide="refresh-cw" class="w-4 h-4 text-sky-500"></i>
<span class="font-medium">Outlook Synchroniseren</span>
</button>
<?php endif; ?>
</div>
</div> </div>
</div> </div>
<?php endif; ?> <?php endif; ?>
<!-- Profiel link rechtsboven --> <!-- Profiel link rechtsboven -->
<a href="/profile.php" class="flex items-center space-x-2.5 group hover:opacity-90 transition px-2 py-1.5 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800/60" title="Mijn Profiel & Instellingen"> <a href="/profile.php" class="flex items-center space-x-2.5 group hover:opacity-90 transition px-2 py-1.5 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800/60 shrink-0" title="Mijn Profiel & Instellingen">
<div class="w-7 h-7 rounded-lg bg-gradient-to-tr from-indigo-600 to-sky-500 p-0.5 flex-shrink-0 shadow-xs overflow-hidden"> <div class="w-7 h-7 rounded-lg bg-gradient-to-tr from-indigo-600 to-sky-500 p-0.5 flex-shrink-0 shadow-xs overflow-hidden">
<?php if (!empty($currentUser['avatar_url'])): ?> <?php if (!empty($currentUser['avatar_url'])): ?>
<img src="<?= htmlspecialchars($currentUser['avatar_url']) ?>" alt="Avatar" class="w-full h-full rounded-[6px] object-cover bg-white dark:bg-slate-950" onerror="this.classList.add('hidden'); if(this.nextElementSibling) this.nextElementSibling.classList.remove('hidden');"> <img src="<?= htmlspecialchars($currentUser['avatar_url']) ?>" alt="Avatar" class="w-full h-full rounded-[6px] object-cover bg-white dark:bg-slate-950" onerror="this.classList.add('hidden'); if(this.nextElementSibling) this.nextElementSibling.classList.remove('hidden');">
@@ -336,7 +343,7 @@ require_once __DIR__ . '/env_badge.php';
</a> </a>
<!-- Uitloggen --> <!-- Uitloggen -->
<a href="/auth/logout.php" title="Veilig uitloggen" class="p-2 rounded-xl text-slate-400 hover:text-red-600 hover:bg-red-50 dark:text-slate-400 dark:hover:text-red-400 dark:hover:bg-red-500/10 transition"> <a href="/auth/logout.php" title="Veilig uitloggen" class="p-2 rounded-xl text-slate-400 hover:text-red-600 hover:bg-red-50 dark:text-slate-400 dark:hover:text-red-400 dark:hover:bg-red-500/10 transition shrink-0">
<i data-lucide="log-out" class="w-4 h-4"></i> <i data-lucide="log-out" class="w-4 h-4"></i>
</a> </a>
</div> </div>
planner.php
+11 -8
View File
@@ -6183,28 +6183,31 @@ async function switchPlannerDate(newDate, event = null, pushState = true) {
if (headerBadgesEl) { if (headerBadgesEl) {
let badgesHtml = ''; let badgesHtml = '';
if (data.isToday) { 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) { 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"> 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">
<i data-lucide="briefcase" class="w-3 h-3"></i> <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
<span>Werkdag</span> <span>Werkdag</span>
</span>`; </span>`;
} else { } 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"> 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-3 h-3"></i> <i data-lucide="coffee" class="w-2.5 h-2.5 text-amber-500"></i>
<span>Weekend / Vrij</span> <span>Vrij</span>
</span>`; </span>`;
} }
if (data.isBlocked && data.selectedDayBlock) { if (data.isBlocked && data.selectedDayBlock) {
const blockJson = JSON.stringify(data.selectedDayBlock).replace(/"/g, '&quot;'); const blockJson = JSON.stringify(data.selectedDayBlock).replace(/"/g, '&quot;');
const blockTitle = (data.selectedDayBlock.title || '').replace(/</g, '&lt;').replace(/>/g, '&gt;'); 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)"> 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-3 h-3 text-amber-600 dark:text-amber-400"></i> <i data-lucide="palmtree" class="w-2.5 h-2.5 text-amber-600 dark:text-amber-400"></i>
<span>${blockTitle}</span> <span>${blockTitle}</span>
</span>`; </span>`;
} }
headerBadgesEl.innerHTML = badgesHtml; headerBadgesEl.innerHTML = badgesHtml;
if (typeof lucide !== 'undefined') {
lucide.createIcons();
}
} }
// Werk URL bij in adresbalk zonder paginaherlaad // Werk URL bij in adresbalk zonder paginaherlaad