Kavelblok: meters naast elkaar, link naar het Omgevingsloket alleen nog op de volledige kaartpagina

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Machiel
2026-10-16 20:08:40 +02:00
co-authored by Claude Opus 5.5
parent e9f83278c9
commit 0368b7c1da
2 changed files with 11 additions and 10 deletions
+5
View File
@@ -250,6 +250,11 @@ dl.props dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.viewer-frame iframe { display: block; width: 100%; height: 100%; border: 0; } .viewer-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.kaart-frame { height: 520px; max-height: 75vh; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--blue); } .kaart-frame { height: 520px; max-height: 75vh; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--blue); }
.kaart-frame iframe { display: block; width: 100%; height: 100%; border: 0; } .kaart-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.kavel-meters { display: flex; flex-wrap: wrap; gap: 0.25rem 2rem; margin: 0 0 1rem; }
.kavel-meters[hidden] { display: none; }
.kavel-meters > div { display: flex; gap: 0.5rem; }
.kavel-meters dt { color: var(--ink-muted); font-weight: 400; }
.kavel-meters dd { margin: 0; }
/* documenten met versies (contact, relatie, portaal) */ /* documenten met versies (contact, relatie, portaal) */
.docs { margin-bottom: 1rem; } .docs { margin-bottom: 1rem; }
.doc { border-top: 1px solid var(--line); } .doc { border-top: 1px solid var(--line); }
+5 -9
View File
@@ -1,4 +1,4 @@
{# Kavel bij een contact of relatie: de meters en de link naar het Omgevingsloket, daaronder alleen de kaart {# Kavel bij een contact of relatie: de meters, daaronder alleen de kaart
(kaart-app, &weergave=kaart). Alle details staan op de volledige kaartpagina (knop). De kaart stuurt de gegevens (kaart-app, &weergave=kaart). Alle details staan op de volledige kaartpagina (knop). De kaart stuurt de gegevens
met postMessage ({type: 'kaveltoets', resultaat | fout}). #} met postMessage ({type: 'kaveltoets', resultaat | fout}). #}
{% macro kaart_block(kaart) %} {% macro kaart_block(kaart) %}
@@ -6,14 +6,11 @@
<div class="card-top"><h2>Kavel</h2> <div class="card-top"><h2>Kavel</h2>
<div class="actions"><a class="btn btn-outline-primary btn-sm" href="{{ kaart }}" target="_blank" data-kavel-open>Volledig openen</a></div></div> <div class="actions"><a class="btn btn-outline-primary btn-sm" href="{{ kaart }}" target="_blank" data-kavel-open>Volledig openen</a></div></div>
<p class="muted" data-kavel-status style="margin:0 0 1rem">Kavel wordt opgezocht…</p> <p class="muted" data-kavel-status style="margin:0 0 1rem">Kavel wordt opgezocht…</p>
<div data-kavel-gegevens hidden> <dl class="kavel-meters" data-kavel-gegevens hidden>
<dl class="props mb-2"> <div><dt>Kavel</dt><dd data-k="kavel_m2"></dd></div>
<dt>Kavel</dt><dd data-k="kavel_m2"></dd> <div><dt>Bebouwd</dt><dd data-k="bebouwd_m2"></dd></div>
<dt>Bebouwd</dt><dd data-k="bebouwd_m2"></dd> <div><dt>Vrij</dt><dd data-k="vrije_m2"></dd></div>
<dt>Vrij</dt><dd data-k="vrije_m2"></dd>
</dl> </dl>
<p style="margin:0 0 1rem"><a data-k="loket" href="#" target="_blank" rel="noopener noreferrer">Regels in het Omgevingsloket</a></p>
</div>
<div class="kaart-frame"><iframe src="{{ kaart }}&amp;weergave=kaart" title="Kaart van de kavel" loading="lazy" data-kavel-frame></iframe></div> <div class="kaart-frame"><iframe src="{{ kaart }}&amp;weergave=kaart" title="Kaart van de kavel" loading="lazy" data-kavel-frame></iframe></div>
</div></div> </div></div>
<script> <script>
@@ -29,7 +26,6 @@
const r = e.data.resultaat; const r = e.data.resultaat;
status.hidden = true; box.hidden = false; status.hidden = true; box.hidden = false;
['kavel_m2', 'bebouwd_m2', 'vrije_m2'].forEach(n => { k(n).textContent = m2(r[n]); }); ['kavel_m2', 'bebouwd_m2', 'vrije_m2'].forEach(n => { k(n).textContent = m2(r[n]); });
k('loket').href = r.loket;
if (r.link) open.href = r.link; if (r.link) open.href = r.link;
}); });
})(); })();