Skip to content

Commit

Permalink
🚧 [#2145] Attempted to pull apart form fields
Browse files Browse the repository at this point in the history
  • Loading branch information
@jiromaykin
jiromaykin committed Mar 14, 2024
1 parent c32001a commit b9d57be
Show file tree
Hide file tree
Showing 3 changed files with 128 additions and 98 deletions.
69 changes: 42 additions & 27 deletions src/open_inwoner/accounts/templates/accounts/registration_necessary.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,41 +4,56 @@
{% block content %}
<div class="registration-grid">
{% render_grid %}
{% render_column span=9 %}
{% render_column start=5 span=5 %}
{% get_solo 'configurations.SiteConfiguration' as config %}
<h1 class="h1">{% trans "Registratie voltooien" %}</h1><br>
{% if config.registration_text %}<p class="p">{{ config.registration_text|urlize|linebreaksbr }}</p><br>{% endif %}
<form method="POST" id="necessary-form" action="{{ request.get_full_path }}" class="form" novalidate>
{% csrf_token %}

<div class="choice-list-multiple">
{# <ul id="choiceListMultiple" class="choice-list-multiple">#}
{% for field in form.fields %}
{% autorender_field form field %}
<div class="choice-list-multiple__item">
{# <li class="choice-list-multiple__item">#}
{# <label>#}
{# <div class="choice-list-multiple__content"><input type="checkbox" name="option" value="1">#}
{# <div class="choice-list-multiple__data">{% autorender_field form field %}</div>#}
{# </div>#}
{# </label>#}
{# </li>#}
</div>
{% endfor %}
{# </ul>#}
</div>
{% csrf_token %}

{% input form.first_name %}
{% input form.infix %}
{% input form.last_name %}
{% input form.email %}

{# Probably not correct... #}
{% input form.invite no_label=True %}

<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>
<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 %}

{% form_actions primary_icon='arrow_forward' primary_text="Verzenden" %}
{% 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 #}

{% form_actions primary_icon='east' primary_text="Voltooi registratie" fullwidth=True %}
</form>

{# info on notifications that cannot be disabled #}
<div class="checkbox">
<p class="">{% trans "Zaaknotificaties - actie is nodig" %}</p>
<p class="p">{% trans "E-mailnotificaties wanneer er actie nodig is voor een zaak (kan niet uitgeschakeld worden)" %}</p>
</div>

{% endrender_column %}
{% endrender_grid %}
</div>
Expand Down
36 changes: 18 additions & 18 deletions src/open_inwoner/js/components/form/ChoiceListMultiple.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
// document
// .querySelectorAll('.choice-list-multiple .choice-list-multiple__item label')
// .forEach(function (label) {
// label.addEventListener('click', function () {
// const checkbox = this.querySelector('input[type="checkbox"]')
// const content = this.querySelector('.choice-list-multiple__content')
//
// if (checkbox.checked) {
// content.style.backgroundColor = 'lightcoral'
// content.style.border = '2px solid red'
// content.classList.add('selected')
// } else {
// content.style.backgroundColor = ''
// content.style.border = ''
// content.classList.remove('selected')
// }
// })
// })
document
.querySelectorAll('.choice-list-multiple .choice-list-multiple__item label')
.forEach(function (label) {
label.addEventListener('click', function () {
const checkbox = this.querySelector('input[type="checkbox"]')
const content = this.querySelector('.choice-list-multiple__content')

if (checkbox.checked) {
content.style.backgroundColor = 'lightcoral'
content.style.border = '2px solid red'
content.classList.add('selected')
} else {
content.style.backgroundColor = ''
content.style.border = ''
content.classList.remove('selected')
}
})
})
121 changes: 68 additions & 53 deletions src/open_inwoner/scss/components/Form/ChoiceList.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,57 +85,72 @@

/// Multiple selection checkbox

//&-multiple__item {
// padding: 5px;
//}
//
//&-multiple__item label {
// cursor: pointer;
//}
//
//&-multiple__content {
// display: flex;
// padding: 32px;
//}
//
//&-multiple__data {
// position: relative;
// display: flex;
// align-items: center;
// justify-content: space-between;
// flex-direction: row-reverse;
// width: 100%;
//}
//
//&-multiple__item input[type='checkbox'] {
// opacity: 0;
//}
//
//&-multiple__item input[type='checkbox'] + &-multiple__data::before {
// content: '';
// display: inline-block;
// width: 20px;
// height: 20px;
// border: 2px solid #888;
// margin-right: 10px;
// vertical-align: middle;
//}
//
//&-multiple__content {
// background-color: lightgrey;
// border: 2px solid grey;
// border-radius: 6px;
// padding: 1em;
//}
//
//&-multiple__content.selected {
// background-color: lightcoral;
// border: 2px solid red;
//}
//
//&-multiple__content.selected
// input[type='checkbox']
// + .choice-list__data::before {
// background-color: maroon;
//}
&-multiple {
list-style: none;
}

&-multiple__item {
padding: 5px;
}

&-multiple__item label {
cursor: pointer;
}

&-multiple__content {
display: flex;
padding: 32px;

.checkbox .checkbox__label:before {
border: var(--border-width) solid var(--color-accent);
border-radius: var(--border-radius);
}

.checkbox .checkbox__input:checked ~ .checkbox__label:before {
background-color: var(--color-white);
color: var(--color-accent);
}
}

&-multiple__data {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row-reverse;
width: 100%;
}

&-multiple__item input[type='checkbox'] {
opacity: 0;
}

&-multiple__item input[type='checkbox'] + &-multiple__data::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #888;
margin-right: 10px;
vertical-align: middle;
}

&-multiple__content {
background-color: var(--color-white);
border: 1px solid var(--color-gray);
border-radius: var(--border-radius);
padding: var(--spacing-large);
}

&-multiple__content.selected {
//TESTING ONLY
background-color: lightcoral;
border: 2px solid red;
}

&-multiple__content.selected
input[type='checkbox']
+ .choice-list__data::before {
background-color: maroon;
}
}

0 comments on commit b9d57be

Please sign in to comment.