design: refonte UI — journal de bord (Playfair + JetBrains Mono, palette encre/crème/ambre)

This commit is contained in:
2026-03-11 18:46:04 +01:00
parent 23dbc3f870
commit c3a7bdfef7
6 changed files with 453 additions and 164 deletions

View File

@@ -2,32 +2,57 @@
{% block title %}Historique{% endblock %}
{% block content %}
<h1 class="text-xl font-bold mb-4">Historique</h1>
<div class="flex items-baseline justify-between mb-5">
<p class="font-display text-2xl font-semibold" style="color:var(--ink);">Historique</p>
<a href="/entries/new" class="text-xs font-semibold" style="color:var(--amber); letter-spacing:0.05em;">+ Saisir</a>
</div>
{% if not entries %}
<p class="text-gray-500 text-center py-8">Aucune entrée pour le moment.</p>
<div class="card card-mist text-center py-8">
<p style="color:#9A9288; font-size:0.875rem;">Aucune entrée pour le moment.</p>
</div>
{% endif %}
<div class="space-y-2">
{% for entry in entries %}
<div class="bg-white rounded-xl shadow p-3 flex items-center justify-between">
<div>
<p class="font-medium text-sm">{{ entry.date | date_fr }}</p>
<p class="text-xs text-gray-500">
{{ entry.day_type }}
{% if entry.time_slots %} — {{ entry.total_hours_str() }}{% endif %}
{% if entry.journey_profile_id %} — {{ entry.journey_profile_id }}{% endif %}
</p>
{% if entry.comment %}
<p class="text-xs text-gray-400 mt-0.5 italic">{{ entry.comment }}</p>
{% endif %}
</div>
<div class="flex gap-2">
<a href="/entries/{{ entry.id }}/edit" class="text-blue-500 text-sm hover:underline">Éditer</a>
<form method="POST" action="/entries/{{ entry.id }}/delete"
onsubmit="return confirm('Supprimer cette entrée ?')">
<button class="text-red-400 text-sm hover:underline">Suppr.</button>
</form>
{% set dot_color =
'#4A7A54' if entry.day_type == 'WORK' else
'#3A6AAA' if entry.day_type == 'TT' else
'#C8842A' if entry.day_type in ('GARDE', 'ASTREINTE') else
'#7A4AAA' if entry.day_type in ('RTT', 'FORMATION') else
'#B85035' if entry.day_type == 'MALADE' else
'#8A8278'
%}
<div class="card" style="border-left-color: {{ dot_color }}; padding: 0.75rem 1rem;">
<div class="flex items-start justify-between gap-2">
<div class="flex-1 min-w-0">
<p class="font-semibold text-sm" style="color:var(--ink);">{{ entry.date | date_fr }}</p>
<div class="flex items-center gap-2 mt-0.5">
<span class="text-xs font-semibold" style="color:{{ dot_color }}; letter-spacing:0.06em;">{{ entry.day_type }}</span>
{% if entry.time_slots %}
<span class="font-data text-xs" style="color:#8A8278;">{{ entry.total_hours_str() }}</span>
{% endif %}
{% if entry.motor_vehicle_id %}
<span class="text-xs" style="color:#9A9288;">· {{ entry.motor_vehicle_id }}</span>
{% elif entry.journey_profile_id %}
<span class="text-xs" style="color:#9A9288;">· {{ entry.journey_profile_id }}</span>
{% endif %}
</div>
{% if entry.comment %}
<p class="text-xs italic mt-1 truncate" style="color:#9A9288;">{{ entry.comment }}</p>
{% endif %}
</div>
<div class="flex items-center gap-3 flex-shrink-0">
<a href="/entries/{{ entry.id }}/edit"
class="text-xs font-semibold" style="color:var(--amber);">Éditer</a>
<form method="POST" action="/entries/{{ entry.id }}/delete"
onsubmit="return confirm('Supprimer cette entrée ?')">
<button class="text-xs" style="color:var(--mist);"
onmouseover="this.style.color='var(--rust)'" onmouseout="this.style.color='var(--mist)'"></button>
</form>
</div>
</div>
</div>
{% endfor %}