[#2245] Processed PR feedback for Registration notifications

maykinmedia · Mar 25, 2024 · 5b1adad · 5b1adad
1 parent f92a748
commit 5b1adad
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 35 deletions.
diff --git a/src/open_inwoner/js/components/form/ChoiceListMultiple.js b/src/open_inwoner/js/components/form/ChoiceListMultiple.js
@@ -9,11 +9,11 @@ export class ChoiceListMultiple {
     this.label = listitem.querySelector(
       '.choice-list-multiple .choice-list-multiple__item .checkbox__label'
     )
-    // Add 'selected' parentclass if checkbox is already checked onLoad
+
     if (this.checkbox.checked) {
       this.listitem.classList.add('selected')
     }
-    // If selector exists
+
     this.listitem.addEventListener(
       'click',
       this.toggleChoiceItemBorder.bind(this)
@@ -29,7 +29,6 @@ export class ChoiceListMultiple {
   }
 }
 
-// Apply toggleChoiceItemBorder to each element matching the selector
 document
   .querySelectorAll(ChoiceListMultiple.selector)
   .forEach((listitem) => new ChoiceListMultiple(listitem))
diff --git a/src/open_inwoner/scss/components/Form/ChoiceList.scss b/src/open_inwoner/scss/components/Form/ChoiceList.scss
@@ -26,7 +26,7 @@
     margin: 0;
     padding: 0;
     background-color: var(--card-color-background);
-    border: var(--border-width) solid var(--color-gray);
+    border: var(--border-width-thin) solid var(--color-gray);
     border-radius: var(--border-radius);
     box-sizing: border-box;
     display: flex;
@@ -38,7 +38,7 @@
   }
 
   &__content {
-    max-width: 95%;
+    max-width: calc(100% - var(--spacing-giant));
   }
 
   &__label {
@@ -116,14 +116,11 @@
         vertical-align: text-top;
       }
     }
-
-    .form__control {
-      width: 100%;
-    }
   }
 
   &-multiple__item {
     border: var(--border-width-thin) solid var(--color-white);
+    max-width: var(--form-width);
   }
 
   &-multiple__item label {
@@ -135,7 +132,10 @@
     display: flex;
     padding: 0;
     width: 100%;
-    max-width: var(--form-width);
+
+    .form__control {
+      width: 100%;
+    }
 
     & .checkbox {
       // reversing the order

diff --git a/src/open_inwoner/scss/components/Form/Input.scss b/src/open_inwoner/scss/components/Form/Input.scss
@@ -5,7 +5,7 @@
   -webkit-appearance: none;
 
   /// Border.
-  border: 1px solid var(--color-gray);
+  border: 1px solid var(--color-mute);
   border-radius: var(--border-radius);
 
   /// Dimensions.

diff --git a/src/open_inwoner/templates/pages/profile/notifications.html b/src/open_inwoner/templates/pages/profile/notifications.html
@@ -2,37 +2,80 @@
 {% load i18n l10n grid_tags form_tags icon_tags button_tags %}
 
 {% block content %}
-    <h1 class="h1" id="title">
-        {% trans "Ontvang berichten over" %}
-    </h1>
-    <p class="p">
-        {% trans "Kies voor welk onderwerp je meldingen wilt ontvangen" %}
-    </p>
-
     {% render_grid %}
-        {% render_column start=0 span=6 %}
+        {% render_column start=5 span=5 %}
+        <h1 class="h1" id="title">
+            {% trans "Ontvang berichten over" %}
+        </h1>
+        <p class="p">
+            {% trans "Kies voor welk onderwerp je meldingen wilt ontvangen" %}
+        </p>
 
-            <form method="POST" id="change-notifications" action="{% url 'profile:notifications' %}" class="form" novalidate>
-                {% csrf_token %}
+        <form method="POST" id="change-notifications" action="{% url 'profile:notifications' %}" class="form" novalidate>
+            {% csrf_token %}
 
-                {% for field in form.fields %}
-                    {% autorender_field form field %}
-                {% endfor %}
+            {% if form.first_name %}
+                {% input form.first_name %}
+            {% endif %}
 
-                <div class="choice-list choice-list-multiple">
-                    {# Info on notifications that cannot be disabled #}
-                    <div class="choice-list__information">
-                        <p class="choice-list-multiple__heading-4">{% icon icon="check" outlined=True %} {% trans "Zaaknotificaties - actie is nodig" %}</p>
-                        <p class="choice-list__p">{% trans "E-mailnotificaties wanneer er actie nodig is voor een zaak (kan niet uitgeschakeld worden)" %}</p>
-                    </div>
-                </div>
+            {% if form.infix %}
+                {% input form.infix %}
+            {% endif %}
+
+            {% if form.last_name %}
+                {% input form.last_name %}
+            {% endif %}
+
+            {% if form.email %}
+                {% input form.email %}
+            {% endif %}
+
+            {% if form.invite %}
+                {% input form.invite no_label=True %}
+            {% endif %}
+
+            <h3 class="h3">Notificatie voorkeuren</h3>
+
+            {# Start of multiple checkbox fields #}
+            <ul class="choice-list choice-list-multiple">
+
+                {% if form.cases_notifications %}
+                    <li class="choice-list-multiple__item">
+                        <div class="choice-list-multiple__content">
+                            {% checkbox form.cases_notifications %}
+                        </div>
+                    </li>
+                {% endif %}
+
+                {% if form.messages_notifications %}
+                    <li class="choice-list-multiple__item">
+                        <div class="choice-list-multiple__content">
+                            {% checkbox form.messages_notifications %}</div>
+                    </li>
+                {% endif %}
+
+                {% if form.plans_notifications %}
+                    <li class="choice-list-multiple__item">
+                        <div class="choice-list-multiple__content">
+                            {% checkbox form.plans_notifications %}</div>
+                    </li>
+                {% endif %}
+            </ul>
+            {# End of multiple checkbox fields #}
 
-                <div class="form__actions form__actions--fullwidth">
-                    {% button text="Sla wijzigingen op" primary=True type="submit" form_id="profile-edit" %}
-                    {% button href="profile:detail" icon="west" text=_("Terug naar Mijn profiel") icon_outlined=True transparent=True %}
+            <div class="choice-list choice-list-multiple">
+                {# Info on notifications that cannot be disabled #}
+                <div class="choice-list__information">
+                    <p class="choice-list-multiple__heading-4">{% icon icon="check" outlined=True %} {% trans "Zaaknotificaties - actie is nodig" %}</p>
+                    <p class="choice-list__p">{% trans "E-mailnotificaties wanneer er actie nodig is voor een zaak (kan niet uitgeschakeld worden)" %}</p>
                 </div>
-            </form>
+            </div>
 
+            <div class="form__actions form__actions--fullwidth">
+                {% button text="Sla wijzigingen op" primary=True type="submit" form_id="profile-edit" %}
+                {% button href="profile:detail" icon="west" text=_("Terug naar Mijn profiel") icon_outlined=True transparent=True %}
+            </div>
+        </form>
         {% endrender_column %}
     {% endrender_grid %}
 {% endblock content %}