fix(ui): clean header banner and fix timeline event text overflow
This commit is contained in:
+59
-49
@@ -131,6 +131,10 @@ $dutchDays = ['Zondag', 'Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag'
|
||||
$dutchMonths = ['', 'januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december'];
|
||||
$formattedDate = $dutchDays[date('w')] . ' ' . date('j') . ' ' . $dutchMonths[(int)date('n')] . ' ' . date('Y');
|
||||
?>
|
||||
<style>
|
||||
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
|
||||
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
||||
</style>
|
||||
|
||||
<div class="space-y-6 max-w-7xl mx-auto">
|
||||
<!-- Top Banner: Datum, Hoofddoel & Integraties Status -->
|
||||
@@ -207,7 +211,7 @@ $formattedDate = $dutchDays[date('w')] . ' ' . date('j') . ' ' . $dutchMonths[(i
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||||
|
||||
<!-- Linker kolom: Focus Timer & Taken -->
|
||||
<div class="lg:col-span-7 space-y-6">
|
||||
<div class="lg:col-span-7 space-y-6 min-w-0">
|
||||
|
||||
<!-- Focus Modus Timer -->
|
||||
<div class="bg-white dark:bg-slate-900/80 border border-slate-200 dark:border-slate-800 rounded-3xl p-6 shadow-sm dark:shadow-xl relative overflow-hidden backdrop-blur-sm transition">
|
||||
@@ -467,8 +471,8 @@ $formattedDate = $dutchDays[date('w')] . ' ' . date('j') . ' ' . $dutchMonths[(i
|
||||
</div>
|
||||
|
||||
<!-- Rechter kolom: Timeblocking & Outlook Tijdlijn -->
|
||||
<div class="lg:col-span-5 space-y-6">
|
||||
<div class="bg-white dark:bg-slate-900/80 border border-slate-200 dark:border-slate-800 rounded-3xl p-6 shadow-sm dark:shadow-xl backdrop-blur-sm transition">
|
||||
<div class="lg:col-span-5 space-y-6 min-w-0">
|
||||
<div class="bg-white dark:bg-slate-900/80 border border-slate-200 dark:border-slate-800 rounded-3xl p-5 sm:p-6 shadow-sm dark:shadow-xl backdrop-blur-sm transition overflow-hidden">
|
||||
<div class="flex items-center justify-between mb-4 pb-3 border-b border-slate-100 dark:border-slate-800">
|
||||
<div class="flex items-center space-x-2">
|
||||
<i data-lucide="clock" class="w-5 h-5 text-emerald-600 dark:text-emerald-400"></i>
|
||||
@@ -482,7 +486,7 @@ $formattedDate = $dutchDays[date('w')] . ' ' . date('j') . ' ' . $dutchMonths[(i
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<div class="space-y-2.5">
|
||||
<?php foreach ($hours as $hour):
|
||||
$hourInt = (int)explode(':', $hour)[0];
|
||||
|
||||
@@ -497,63 +501,69 @@ $formattedDate = $dutchDays[date('w')] . ' ' . date('j') . ' ' . $dutchMonths[(i
|
||||
return !empty($t['time_block_start']) && (int)explode(':', $t['time_block_start'])[0] === $hourInt;
|
||||
});
|
||||
?>
|
||||
<div class="flex items-start group min-h-[50px] border-b border-slate-100 dark:border-slate-800/40 pb-2 last:border-0">
|
||||
<div class="w-14 text-xs font-mono font-medium text-slate-500 dark:text-slate-400 pt-1 flex-shrink-0">
|
||||
<div class="flex items-start group min-h-[50px] border-b border-slate-100 dark:border-slate-800/40 pb-2.5 last:border-0 min-w-0">
|
||||
<div class="w-12 sm:w-14 text-xs font-mono font-medium text-slate-500 dark:text-slate-400 pt-1 flex-shrink-0">
|
||||
<?= $hour ?>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 space-y-1.5">
|
||||
<div class="flex-1 space-y-1.5 min-w-0">
|
||||
<!-- Outlook meetings -->
|
||||
<?php foreach ($slotEvents as $evt): ?>
|
||||
<div class="flex items-center justify-between p-2 rounded-xl bg-blue-50 dark:bg-blue-950/50 border border-blue-200 dark:border-blue-800/60 text-blue-900 dark:text-blue-100 text-xs shadow-sm">
|
||||
<div class="flex items-center space-x-2 truncate mr-2">
|
||||
<span class="px-1.5 py-0.5 rounded bg-blue-500/15 text-blue-700 dark:text-blue-400 font-mono text-[10px] font-bold">
|
||||
<?= htmlspecialchars($evt['start']) ?> - <?= htmlspecialchars($evt['end']) ?>
|
||||
</span>
|
||||
<span class="font-semibold truncate" title="<?= htmlspecialchars($evt['subject']) ?>">
|
||||
<?= htmlspecialchars($evt['subject']) ?>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-1.5 flex-shrink-0">
|
||||
<?php if (!empty($evt['meeting_url'])): ?>
|
||||
<a href="<?= htmlspecialchars($evt['meeting_url']) ?>" target="_blank" class="flex items-center space-x-1 text-[10px] text-white bg-blue-600 hover:bg-blue-700 px-2 py-0.5 rounded-lg flex-shrink-0 transition">
|
||||
<i data-lucide="video" class="w-3 h-3"></i>
|
||||
<span>Deelnemen</span>
|
||||
</a>
|
||||
<?php elseif (!empty($evt['web_link'])): ?>
|
||||
<a href="<?= htmlspecialchars($evt['web_link']) ?>" target="_blank" class="flex items-center space-x-1 text-[10px] text-blue-600 dark:text-blue-300 hover:underline px-1.5 py-0.5 transition">
|
||||
<i data-lucide="external-link" class="w-3 h-3"></i>
|
||||
<span>Outlook</span>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
<div class="p-2.5 rounded-2xl bg-blue-50/80 dark:bg-blue-950/50 border border-blue-200/80 dark:border-blue-800/60 text-blue-900 dark:text-blue-100 text-xs shadow-sm min-w-0 overflow-hidden">
|
||||
<div class="flex items-start justify-between gap-2 min-w-0">
|
||||
<div class="flex items-start space-x-2 min-w-0 flex-1">
|
||||
<span class="px-1.5 py-0.5 rounded-lg bg-blue-500/15 text-blue-700 dark:text-blue-300 font-mono text-[10px] font-bold flex-shrink-0 whitespace-nowrap mt-0.5">
|
||||
<?= htmlspecialchars($evt['start']) ?> - <?= htmlspecialchars($evt['end']) ?>
|
||||
</span>
|
||||
<span class="font-semibold text-xs leading-snug break-words line-clamp-2 min-w-0 flex-1" title="<?= htmlspecialchars($evt['subject']) ?>">
|
||||
<?= htmlspecialchars($evt['subject']) ?>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-1 flex-shrink-0">
|
||||
<?php if (!empty($evt['meeting_url'])): ?>
|
||||
<a href="<?= htmlspecialchars($evt['meeting_url']) ?>" target="_blank" class="flex items-center space-x-1 text-[10px] text-white bg-blue-600 hover:bg-blue-700 px-2 py-0.5 rounded-lg flex-shrink-0 transition font-medium">
|
||||
<i data-lucide="video" class="w-3 h-3"></i>
|
||||
<span class="hidden sm:inline">Deelnemen</span>
|
||||
</a>
|
||||
<?php elseif (!empty($evt['web_link'])): ?>
|
||||
<a href="<?= htmlspecialchars($evt['web_link']) ?>" target="_blank" class="flex items-center space-x-1 text-[10px] text-blue-600 dark:text-blue-300 hover:underline px-1 py-0.5 transition font-medium">
|
||||
<i data-lucide="external-link" class="w-3 h-3"></i>
|
||||
<span class="hidden sm:inline">Outlook</span>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
|
||||
<!-- Geplande taken -->
|
||||
<?php foreach ($slotTasks as $t): ?>
|
||||
<div class="flex items-center justify-between p-2 rounded-xl border text-xs <?= $t['is_completed'] ? 'bg-slate-100 dark:bg-slate-900/40 border-slate-200 dark:border-slate-800 text-slate-400 dark:text-slate-500 line-through' : 'bg-emerald-50 dark:bg-emerald-950/30 border-emerald-200 dark:border-emerald-800/40 text-emerald-900 dark:text-emerald-100' ?>">
|
||||
<div class="flex items-center space-x-2 truncate mr-2">
|
||||
<span class="px-1.5 py-0.5 rounded bg-emerald-500/15 text-emerald-700 dark:text-emerald-400 font-mono text-[10px] font-bold">
|
||||
<?= htmlspecialchars($t['time_block_start']) ?><?= !empty($t['time_block_end']) ? ' - ' . htmlspecialchars($t['time_block_end']) : '' ?>
|
||||
</span>
|
||||
<span class="font-semibold truncate"><?= htmlspecialchars($t['title']) ?></span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-1.5 flex-shrink-0">
|
||||
<?php if (!empty($t['external_id']) && $t['source'] === 'OUTLOOK'): ?>
|
||||
<span class="text-[9px] font-bold px-1.5 py-0.5 rounded bg-blue-500/15 text-blue-700 dark:text-blue-400 border border-blue-500/20 flex items-center space-x-1" title="In Outlook agenda">
|
||||
<i data-lucide="calendar" class="w-2.5 h-2.5"></i>
|
||||
<span class="hidden sm:inline">In Outlook</span>
|
||||
<div class="p-2.5 rounded-2xl border text-xs min-w-0 overflow-hidden <?= $t['is_completed'] ? 'bg-slate-100/70 dark:bg-slate-900/40 border-slate-200 dark:border-slate-800 text-slate-400 dark:text-slate-500 line-through' : 'bg-emerald-50/80 dark:bg-emerald-950/30 border-emerald-200/80 dark:border-emerald-800/40 text-emerald-900 dark:text-emerald-100 shadow-sm' ?>">
|
||||
<div class="flex items-start justify-between gap-2 min-w-0">
|
||||
<div class="flex items-start space-x-2 min-w-0 flex-1">
|
||||
<span class="px-1.5 py-0.5 rounded-lg bg-emerald-500/15 text-emerald-700 dark:text-emerald-300 font-mono text-[10px] font-bold flex-shrink-0 whitespace-nowrap mt-0.5">
|
||||
<?= htmlspecialchars($t['time_block_start']) ?><?= !empty($t['time_block_end']) ? ' - ' . htmlspecialchars($t['time_block_end']) : '' ?>
|
||||
</span>
|
||||
<?php elseif ($isOutlookConnected && !$t['is_completed']): ?>
|
||||
<button onclick="syncTaskToOutlook(<?= $t['id'] ?>, this)" title="Synchroniseer naar Outlook Agenda" class="text-[9px] font-bold px-1.5 py-0.5 rounded bg-blue-500/10 hover:bg-blue-500/20 text-blue-700 dark:text-blue-300 border border-blue-500/20 flex items-center space-x-1 transition cursor-pointer">
|
||||
<i data-lucide="calendar-plus" class="w-2.5 h-2.5"></i>
|
||||
<span class="hidden sm:inline">Naar Outlook</span>
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
<span class="text-[10px] font-bold px-1.5 py-0.5 rounded bg-emerald-500/20 text-emerald-700 dark:text-emerald-400">
|
||||
<?= $t['priority'] ?>
|
||||
</span>
|
||||
<span class="font-semibold text-xs leading-snug break-words line-clamp-2 min-w-0 flex-1" title="<?= htmlspecialchars($t['title']) ?>">
|
||||
<?= htmlspecialchars($t['title']) ?>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-1.5 flex-shrink-0">
|
||||
<?php if (!empty($t['external_id']) && $t['source'] === 'OUTLOOK'): ?>
|
||||
<span class="text-[9px] font-bold px-1.5 py-0.5 rounded bg-blue-500/15 text-blue-700 dark:text-blue-300 border border-blue-500/25 flex items-center space-x-1 whitespace-nowrap" title="In Outlook agenda">
|
||||
<i data-lucide="calendar" class="w-2.5 h-2.5"></i>
|
||||
<span class="hidden sm:inline">In Outlook</span>
|
||||
</span>
|
||||
<?php elseif ($isOutlookConnected && !$t['is_completed']): ?>
|
||||
<button onclick="syncTaskToOutlook(<?= $t['id'] ?>, this)" title="Synchroniseer naar Outlook Agenda" class="text-[9px] font-bold px-1.5 py-0.5 rounded bg-blue-500/10 hover:bg-blue-500/20 text-blue-700 dark:text-blue-300 border border-blue-500/20 flex items-center space-x-1 transition cursor-pointer whitespace-nowrap">
|
||||
<i data-lucide="calendar-plus" class="w-2.5 h-2.5"></i>
|
||||
<span class="hidden sm:inline">Naar Outlook</span>
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
<span class="text-[10px] font-bold px-1.5 py-0.5 rounded bg-emerald-500/20 text-emerald-700 dark:text-emerald-400 flex-shrink-0">
|
||||
<?= $t['priority'] ?>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
|
||||
Reference in New Issue
Block a user