v0.0.2: pre-productie (Bootstrap 5.3.3, LightPdf klant-PDF, server-setup en release-script)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

templates/inbox.html

@@ -2,10 +2,9 @@
 {% block title %}Inbox{% endblock %}
 {% block content %}
 <div class="head">
-  <div><div class="kicker">E-mail</div><h1>Inbox</h1></div>
+  <div><div class="kicker">E-mail</div><h1>Inbox</h1>{% if last_sync %}<div class="muted">Laatst opgehaald: {{ last_sync|dt }}</div>{% endif %}</div>
   <div class="actions">
-    {% if last_sync %}<span class="muted">Laatst opgehaald: {{ last_sync|dt }}</span>{% endif %}
-    <form method="post" action="{{ url_for('inbox_sync') }}" class="inline"><button class="btn">Nieuwe e-mail ophalen</button></form>
+    <form method="post" action="{{ url_for('inbox_sync') }}" class="inline"><button class="btn btn-primary">Nieuwe e-mail ophalen</button></form>
   </div>
 </div>
 
@@ -19,21 +18,21 @@
   <a href="{{ url_for('inbox', f='unlinked') }}" class="{{ 'on' if f == 'unlinked' }}">Niet gekoppeld aan contact</a>
 </div>
 
-<div class="card">
+<div class="card"><div class="card-body">
   {% if rows %}
-  <div class="table-wrap"><table>
+  <div class="table-responsive"><table class="table table-hover table-stack">
     <thead><tr><th>Van</th><th>Onderwerp</th><th>Contact</th><th class="num">Datum</th></tr></thead>
     <tbody>
     {% for e in rows %}
       <tr class="link {{ 'unread' if not e.is_read }}" onclick="location='{{ url_for('inbox_view', eid=e.id) }}'">
-        <td>{% if not e.is_read %}<span class="dot" aria-label="Ongelezen"></span>{% endif %}{{ e.from_name or e.from_addr }}</td>
-        <td><a href="{{ url_for('inbox_view', eid=e.id) }}">{{ e.subject }}</a></td>
-        <td>{{ e.contact_name or '' }}</td>
-        <td class="muted num">{{ e.date|dt }}</td>
+        <td class="stack-title">{% if not e.is_read %}<span class="dot" aria-label="Ongelezen"></span>{% endif %}{{ e.from_name or e.from_addr }}<a class="d-block d-md-none" href="{{ url_for('inbox_view', eid=e.id) }}">{{ e.subject }}</a></td>
+        <td class="d-none d-md-table-cell"><a href="{{ url_for('inbox_view', eid=e.id) }}">{{ e.subject }}</a></td>
+        <td data-label="Contact">{{ e.contact_name or '' }}</td>
+        <td data-label="Datum" class="muted num">{{ e.date|dt }}</td>
       </tr>
     {% endfor %}
     </tbody>
   </table></div>
   {% else %}<p class="empty">Geen berichten.</p>{% endif %}
-</div>
+</div></div>
 {% endblock %}