diff --git a/src/open_inwoner/js/components/form/ChoiceListMultiple.js b/src/open_inwoner/js/components/form/ChoiceListMultiple.js index 2f52d50a5d..f06578b109 100644 --- 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 index be9b9106b1..520815e097 100644 --- 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 index 4871c1bcaa..bb681744c7 100644 --- 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 index 0eaf3c2973..5491b1ac7c 100644 --- 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 %} -
- {% trans "Kies voor welk onderwerp je meldingen wilt ontvangen" %} -
- {% render_grid %} - {% render_column start=0 span=6 %} + {% render_column start=5 span=5 %} ++ {% trans "Kies voor welk onderwerp je meldingen wilt ontvangen" %} +
-