Improve modals

MinBZK · Dec 17, 2024 · 203c26e · 203c26e
1 parent 80c0b34
commit 203c26e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/amt/site/templates/algorithms/details_measure_modal.html.j2 b/amt/site/templates/algorithms/details_measure_modal.html.j2
@@ -1,6 +1,13 @@
 {% import "macros/form_macros.html.j2" as macros with context %}
 <div class="rvo-layout-column rvo-layout-gap--xl">
-    <h1 class="utrecht-heading-1 rvo-heading--no-margins">{{ measure.name }}</h1>
+    <div class="amt-flex-container">
+        <h1 class="utrecht-heading-1 rvo-heading--no-margins">{{ measure.name }}</h1> <a
+        onclick="amt.closeModal('measure-modal')"><span
+        class="utrecht-icon rvo-icon rvo-icon-kruis rvo-icon--md rvo-icon--hemelblauw"
+        role="img"
+        aria-label="Close"></span></a>
+    </div>
+    <hr class="rvo-hr" />
     <div class="rvo-layout-column rvo-layout-gap--md">
         <div class="rvo-layout-column rvo-layout-gap--xs">
             <form hx-encoding="multipart/form-data"

diff --git a/amt/site/templates/macros/form_macros.html.j2 b/amt/site/templates/macros/form_macros.html.j2
@@ -141,22 +141,23 @@
                             <div id="delete-file-modal-{{ ulid }}" class="minbzk-modal display-none">
                                 <div class="modal-underlay"
                                      onclick="amt.closeModal('delete-file-modal-{{ ulid }}')"></div>
-                                <div class="modal-content rvo-layout-column"
+                                <div class="modal-content rvo-layout-column rvo-layout-align-content-space-between"
                                      style="overflow-x: hidden;
+                                            min-height: 240px;
                                             height: auto;
-                                            width: auto">
+                                            width: auto";>
                                     <div class="amt-flex-container">
                                         <h3 class="utrecht-heading-3 rvo-heading--no-margins">{% trans %}Delete file{% endtrans %}</h3>
                                         <a onclick="amt.closeModal('delete-file-modal-{{ ulid }}')"><span class="utrecht-icon rvo-icon rvo-icon-kruis rvo-icon--md rvo-icon--hemelblauw"
       role="img"
       aria-label="Close"></span></a>
                                     </div>
                                     <hr class="rvo-hr" />
-                                    <p style="padding-block: 0.5em 0.4em;">
-                                        <strong>{% trans %}Are you sure you want to delete{%
-                                        endtrans %} {{ file }}?</strong>
+                                    <p style="min-height: 54%; padding-block: 0.5em 0.4em;">
+                                        {% trans %}Are you sure you want to delete{% endtrans %}
+                                        <strong> {{ file }}?</strong>
                                     </p>
-                                    <p class="utrecht-button-group">
+                                    <div class="utrecht-button-group">
                                         <button hx-headers='{"X-CSRF-Token": "{{ csrftoken }}"}'
                                                 hx-delete="/algorithm/{{ algorithm_id }}/file/{{ ulid }}"
                                                 hx-target="#file-{{ ulid }}"
@@ -170,7 +171,7 @@
                                         <button class="utrecht-button utrecht-button--secondary-action utrecht-button--rvo-md"
                                                 onclick="amt.closeModal('delete-file-modal-{{ ulid }}')"
                                                 type="button">{% trans %}No{% endtrans %}</button>
-                                    </p>
+                                    </div>
                                 </div>
                             </div>
                             <li id="file-{{ ulid }}" class="rvo-item-list__item">