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/import_preview.html

@@ -7,17 +7,18 @@
   <div><a class="label" href="{{ url_for('import_start') }}">← Ander bestand</a>
     <h1>{{ filename }}</h1>
     <div class="muted">{{ total }} rij(en) · {{ {'contacts': 'leads / contactpersonen', 'relations': 'relaties', 'products': 'producten'}[kind] }}</div></div>
-  <div class="actions"><button class="btn">{{ total }} rij(en) importeren</button></div>
+  <div class="actions"><button class="btn btn-primary">{{ total }} rij(en) importeren</button></div>
 </div>
 
-<div class="card">
+<div class="card"><div class="card-body">
   <h2>Kolommen koppelen</h2>
-  <div class="table-wrap"><table>
+  <p class="hint d-md-none" style="margin:-.4rem 0 .75rem">Schuif de tabel opzij voor de andere kolommen.</p>
+  <div class="table-responsive"><table class="table">
     <thead><tr>
       {% for col in cols %}
       <th style="min-width:170px">
         <div style="margin-bottom:.4rem">{{ col }}</div>
-        <select name="map_{{ loop.index0 }}" aria-label="Doelveld voor {{ col }}">
+        <select class="form-select form-select-sm" name="map_{{ loop.index0 }}" aria-label="Doelveld voor {{ col }}">
           {% for k, l in targets %}<option value="{{ k }}" {{ 'selected' if mapping[loop.index0] == k }}>{{ l }}</option>{% endfor %}
         </select>
       </th>
@@ -30,30 +31,30 @@
     </tbody>
   </table></div>
   {% if total > rows|length %}<p class="hint">Eerste {{ rows|length }} van {{ total }} rijen.</p>{% endif %}
-</div>
+</div></div>
 
-<div class="card">
+<div class="card"><div class="card-body">
   <h2>Opties</h2>
-  <div class="fields">
+  <div class="row g-3">
     {% if kind == 'contacts' %}
-    <div><label>Importeren als</label><select name="type">{% for k, l in TYPES %}<option value="{{ k }}">{{ l }}</option>{% endfor %}</select></div>
-    <div><label>Status (als de kolom ontbreekt)</label><select name="status">{% for k, l in STATUSES %}<option value="{{ k }}">{{ l }}</option>{% endfor %}</select></div>
-    <div><label>Toewijzen aan</label><select name="assigned_user_id"><option value="">— Niemand —</option>{% for u in USERS %}<option value="{{ u.id }}">{{ u.name }}</option>{% endfor %}</select></div>
-    <div><label>Bron (als de kolom ontbreekt)</label><input name="source" value="Import"></div>
+    <div class="col-md-6"><label class="form-label" for="o-type">Importeren als</label><select class="form-select" id="o-type" name="type">{% for k, l in TYPES %}<option value="{{ k }}">{{ l }}</option>{% endfor %}</select></div>
+    <div class="col-md-6"><label class="form-label" for="o-status">Status (als de kolom ontbreekt)</label><select class="form-select" id="o-status" name="status">{% for k, l in STATUSES %}<option value="{{ k }}">{{ l }}</option>{% endfor %}</select></div>
+    <div class="col-md-6"><label class="form-label" for="o-user">Toewijzen aan</label><select class="form-select" id="o-user" name="assigned_user_id"><option value="">— Niemand —</option>{% for u in USERS %}<option value="{{ u.id }}">{{ u.name }}</option>{% endfor %}</select></div>
+    <div class="col-md-6"><label class="form-label" for="o-source">Bron (als de kolom ontbreekt)</label><input class="form-control" id="o-source" name="source" value="Import"></div>
     {% endif %}
     {% if kind == 'relations' %}
-    <div><label>Soort</label><select name="relation_kind" id="rkind">{% for k, l in RELATION_KINDS %}<option value="{{ k }}" {{ 'selected' if request.args.get('rkind') == k }}>{{ l }}</option>{% endfor %}</select></div>
-    <div><label>Type (als de kolom ontbreekt)</label>
-      <select name="relation_type"><option value="">—</option>
+    <div class="col-md-6"><label class="form-label" for="rkind">Soort</label><select class="form-select" name="relation_kind" id="rkind">{% for k, l in RELATION_KINDS %}<option value="{{ k }}" {{ 'selected' if request.args.get('rkind') == k }}>{{ l }}</option>{% endfor %}</select></div>
+    <div class="col-md-6"><label class="form-label" for="o-rtype">Type (als de kolom ontbreekt)</label>
+      <select class="form-select" id="o-rtype" name="relation_type"><option value="">—</option>
         {% for k, l in RELATION_KINDS %}<optgroup label="{{ l }}">{% for t in relation_types[k] %}<option>{{ t }}</option>{% endfor %}</optgroup>{% endfor %}
       </select></div>
     {% endif %}
     {% if kind == 'products' %}
-    <div class="full"><label><input type="checkbox" name="deactivate_missing" value="1">Producten met een SKU die niet in dit bestand staan op inactief zetten (volledige prijslijst)</label>
+    <div class="col-12"><div class="form-check"><input class="form-check-input" type="checkbox" id="o-deact" name="deactivate_missing" value="1"><label class="form-check-label" for="o-deact">Producten met een SKU die niet in dit bestand staan op inactief zetten (volledige prijslijst)</label></div>
       <p class="hint">Alleen als er een kolom aan SKU gekoppeld is. Inactieve producten blijven bestaan, met hun mutaties en offertes.</p></div>
     {% endif %}
-    <div class="full"><label><input type="checkbox" name="update" value="1" checked>Bestaande {{ 'contacten (zelfde e-mail) aanvullen' if kind == 'contacts' else 'relaties (zelfde naam of KvK) aanvullen' if kind == 'relations' else 'producten bijwerken (zelfde SKU, of zelfde naam als er geen SKU is); alleen gekoppelde kolommen worden gewijzigd' }}; uit = overslaan</label></div>
+    <div class="col-12"><div class="form-check"><input class="form-check-input" type="checkbox" id="o-update" name="update" value="1" checked><label class="form-check-label" for="o-update">Bestaande {{ 'contacten (zelfde e-mail) aanvullen' if kind == 'contacts' else 'relaties (zelfde naam of KvK) aanvullen' if kind == 'relations' else 'producten bijwerken (zelfde SKU, of zelfde naam als er geen SKU is); alleen gekoppelde kolommen worden gewijzigd' }}; uit = overslaan</label></div></div>
   </div>
-</div>
+</div></div>
 </form>
 {% endblock %}