[#528] Feature/improve plan template popup

src/open_inwoner/js/components/modal/index.js

@@ -7,6 +7,12 @@ export default class Modal {
     this.close = this.node.querySelector('.modal__close')
     this.confirm = this.node.querySelector('.modal__confirm')
 
+    this.node.addEventListener('click', (event) => {
+      if (!event.target.closest('.modal__container')) {
+        this.hide()
+      }
+    })
+
     this.close.addEventListener('click', () => {
       this.hide()
     })
@@ -42,9 +48,11 @@ export default class Modal {
 
   show() {
     this.node.classList.add('modal--open')
+    document.body.style.overflow = 'hidden'
   }
 
   hide() {
     this.node.classList.remove('modal--open')
+    document.body.style.overflow = 'visible'
   }
 }

src/open_inwoner/plans/templates/plans/preview.html

@@ -1,4 +1,4 @@
-{% load i18n %}
+{% load i18n link_tags %}
 
 <div class='preview'>
     {% if plan_template.goal %}
@@ -8,16 +8,15 @@
 
     {% if plan_template.file %}
         <div class='preview__title'>{% trans 'File:' %}</div>
-        <div>{{ plan_template.file }}</div>
+        <div>{% link href=plan_template.file.url text=plan_template.file %}</div>
     {% endif %}
 
     {% if plan_template.actiontemplates.exists %}
         <div class='preview__title'>{% trans 'Actions:' %}</div>
-        <div></div>
 
         {% for action_template in plan_template.actiontemplates.all %}
             <div class='preview__span'>
-                <div>{{ forloop.counter }}</div>
+                <div class='preview__title'>{{ forloop.counter }}</div>
                 <div class='preview__title'>{% trans 'Name:' %}</div>
                 <div>{{ action_template.name }}</div>
                 <div></div>
@@ -30,8 +29,8 @@
                 <div class='preview__title'>{% trans 'Type:' %}</div>
                 <div>{{ action_template.get_type_display }}</div>
                 <div></div>
-                <div class='preview__title'>{% trans 'Ends in x days:' %}</div>
-                <div>{{ action_template.end_in_days }}</div>
+                <div class='preview__title'>{% trans 'Eindigt' %}</div>
+                <div>{% trans "Over" %}{{ over }} {{ action_template.end_in_days }} {% trans "dagen" %} {{ days }}</div>
             </div>
         {% endfor %}
     {% endif %}

src/open_inwoner/scss/components/Preview/Preview.scss

@@ -5,14 +5,29 @@
 .preview {
   display: grid;
   grid-template-columns: 134px 1fr;
-  gap: var(--spacing-small);
+  gap: var(--spacing-large);
   text-align: left;
 
+  @media (min-width: 768px) {
+    grid-template-columns: 90px 1fr;
+  }
+
   .preview__span {
     grid-column: 1 / 3;
     display: grid;
     grid-template-columns: 20px 110px 1fr;
-    gap: var(--spacing-small);
+    gap: var(--spacing-medium);
+    padding-bottom: var(--spacing-medium);
+    border-top: none;
+
+    @media (min-width: 768px) {
+      grid-column: 2 / 3;
+    }
+  }
+
+  .preview__span ~ .preview__span {
+    padding: var(--spacing-large) 0;
+    border-top: var(--border-width) solid var(--color-mute);
   }
 
   .preview__title {

src/open_inwoner/scss/components/modal/_modal.scss

@@ -15,10 +15,17 @@
   }
 
   &__container {
-    max-width: 700px;
+    max-width: 90%;
+    max-height: 90vh;
     background-color: #fff;
     border-radius: var(--border-radius);
     padding: var(--spacing-giant);
+    overflow-y: auto;
+    box-sizing: border-box;
+
+    @media (min-width: 768px) {
+      max-width: 720px;
+    }
   }
 
   &__title {
@@ -47,6 +54,10 @@
     display: flex;
     justify-content: center;
     gap: var(--spacing-medium);
+
+    &--align-right {
+      justify-content: right;
+    }
   }
 
   &__button:empty {

src/open_inwoner/templates/pages/plans/create.html

@@ -48,7 +48,7 @@ <h1 class="h1">{% trans "Samenwerken" %}</h1>
                             <div class="modal__container">
                                 <h2 class="modal__title" id="modal__title">{{ plan_template.name }}</h2>
                                 <div class="modal__text" id="modal__text">{{ plan_template.string_preview }}</div>
-                                <div class="modal__actions" id="modal__actions">
+                                <div class="modal__actions modal__actions--align-right" id="modal__actions">
                                     {% spaceless %}
                                         {% button text=_("Sluiten") extra_classes="modal__button modal__close" primary=True %}
                                     {% endspaceless %}