💄 [#2289] Adjusted newsletter section checkbox styles

maykinmedia · Apr 15, 2024 · eebf1f0 · eebf1f0
1 parent 0dd3ba2
commit eebf1f0
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/src/open_inwoner/scss/components/Form/ChoiceList.scss b/src/open_inwoner/scss/components/Form/ChoiceList.scss
@@ -77,6 +77,11 @@
 
   &__item.selected {
     border: var(--border-width-thin) solid var(--color-secondary-lighter);
+    border-left-width: 3px;
+
+    .choice-list__label {
+      margin-left: -2px;
+    }
   }
 
   &__item.selected &__label:before {
@@ -134,7 +139,6 @@
     border-radius: var(--border-radius);
     display: flex;
     padding: 0;
-    width: 100%;
 
     .form__control {
       width: 100%;
@@ -198,6 +202,11 @@
 
     &.selected {
       border: var(--border-width-thin) solid var(--color-secondary);
+      border-left-width: 3px;
+
+      .choice-list-multiple__content {
+        margin-left: -2px;
+      }
     }
   }
 }
diff --git a/src/open_inwoner/templates/pages/profile/me.html b/src/open_inwoner/templates/pages/profile/me.html
@@ -112,14 +112,21 @@ <h2 class="h2 title" id="newsletters">{% trans "Nieuwsbrieven" %}</h2>
 
                 {% for list_id, choice_tuple in form.fields.newsletters.choices %}
                     <div class="checkbox">
-                        <input type="checkbox" name="newsletter-name" class="checkbox__input" id="id_{{ list_id }}" checked="">
-                        <label class="checkbox__label" for="id_{{ list_id }}">{{ choice_tuple.0 }}</label>
+                        <input type="checkbox"
+                               name="newsletters"
+                               value="{{ list_id }}"
+                               class="checkbox__input"
+                               id="id_newsletters_{{ list_id }}"
+                               {% if choice_tuple.0 in data or choice_tuple.0|add:0 in data %}checked="checked"{% endif %}>
+                        <label class="checkbox__label" for="id_newsletters_{{ list_id }}">
+                            {{ choice_tuple.0 }}
+                        </label>
                         <p class="checkbox__p newsletter-remarks">{{ choice_tuple.1 }}</p>
                     </div>
                 {% endfor %}
 
                 {% button_row %}
-                    {% button text=_("Opslaan") type="submit" extra_classes="button--primary" name="newsletter-submit" %}
+                    {% button text=_("Abonneren") type="submit" icon="save" icon_position="before" icon_outlined=True extra_classes="button--primary" name="newsletter-submit" %}
                 {% endbutton_row %}
             </form>
     </section>