🚧 [#2245] Changed checkbox template and added multiple

maykinmedia · Mar 21, 2024 · a9c1a8a · a9c1a8a
1 parent b8cad81
commit a9c1a8a
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 32 deletions.
diff --git a/src/open_inwoner/accounts/templates/accounts/registration_necessary.html b/src/open_inwoner/accounts/templates/accounts/registration_necessary.html
@@ -27,7 +27,6 @@ <h1 class="h1">{% trans "Registratie voltooien" %}</h1><br>
                 {% input form.email %}
             {% endif %}
 
-            {# Probably not correct... #}
             {% if form.invite %}
                 {% input form.invite no_label=True %}
             {% endif %}
@@ -76,7 +75,7 @@ <h3 class="h3">Notificatie voorkeuren</h3>
             {# 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-multiple__paragraph">{% trans "E-mailnotificaties wanneer er actie nodig is voor een zaak (kan niet uitgeschakeld worden)" %}</p>
+                <p class="choice-list__p">{% trans "E-mailnotificaties wanneer er actie nodig is voor een zaak (kan niet uitgeschakeld worden)" %}</p>
             </div>
 
             {% form_actions primary_icon='east' primary_text="Voltooi registratie" fullwidth=True %}

diff --git a/src/open_inwoner/components/templates/components/Form/Checkbox.html b/src/open_inwoner/components/templates/components/Form/Checkbox.html
@@ -3,9 +3,10 @@
 <div class="form__control">
     <div class="checkbox">
         {{ field|addclass:"checkbox__input" }}
-        {% if not no_label %}<label class="checkbox__label" for="id_{{ field.name }}">{{ field.label }}</label>{% endif %}
-        {% if field.help_text %}
-            <p class="p{{ help_extra_cls }}">{{ field.help_text }}</p>
+        {% if not no_label %}<label class="checkbox__label" for="id_{{ field.name }}">{{ field.label }}
+            {% if field.help_text %}
+                <p class="choice-list__p">{{ field.help_text }}</p>
+            {% endif %}</label>
         {% endif %}
 
         {% if field.errors %}

diff --git a/src/open_inwoner/scss/components/Filter/Filter.scss b/src/open_inwoner/scss/components/Filter/Filter.scss
@@ -51,7 +51,6 @@
   }
 
   .divider {
-    background-color: yellow;
     border: red solid 5px !important;
     &--small {
       display: none;

diff --git a/src/open_inwoner/templates/pages/profile/notifications.html b/src/open_inwoner/templates/pages/profile/notifications.html
@@ -1,31 +1,39 @@
 {% extends 'master.html' %}
-{% load i18n l10n form_tags %}
+{% 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>
-
-<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 %}
-
-    <div class="form__control">
-        {# pseudo checkbox for notifications that cannot be disabled #}
-        <div class="checkbox">
-            <span role="checkbox" aria-disabled="true" aria-checked="true" class="checkbox__input checkbox__pseudo checkbox__input--disabled" aria-labelledby="id_cases_notifications_action_required" tabindex="0"></span>
-            <span class="checkbox__label checkbox__pseudo-label" id="id_cases_notifications_action_required">{% trans "Zaaknotificaties - actie is nodig" %}</span>
-            <p class="p">{% trans "E-mailnotificaties wanneer er actie nodig is voor een zaak (kan niet uitgeschakeld worden)" %}</p>
-        </div>
-    </div>
-
-    {% form_actions primary_text=_("Opslaan") primary_icon="arrow_forward" secondary_href='profile:detail' secondary_text=_('Terug') secondary_icon_position="before" secondary_icon='arrow_backward' %}
-</form>
+    <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 %}
+
+            <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 %}
+
+                <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>
+
+                <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 %}