Change org type button to usa-radio style

This commit is contained in:
igorkorenfeld 2022-11-09 16:52:39 -05:00
parent fb4968cc17
commit ba2de84ff9
No known key found for this signature in database
GPG key ID: 826947A4B867F659
3 changed files with 32 additions and 20 deletions

View file

@ -57,7 +57,7 @@ class OrganizationForm(forms.Form):
("Yes", "Yes"), ("Yes", "Yes"),
("No", "No"), ("No", "No"),
], ],
widget=forms.RadioSelect, widget=forms.RadioSelect(attrs={"class":"usa-radio__input"}),
) )

View file

@ -12,37 +12,49 @@
{% radio_buttons_by_value wizard.form.organization_type as choices %} {% radio_buttons_by_value wizard.form.organization_type as choices %}
<fieldset id="organization_type__fieldset" class="usa-fieldset"> <fieldset id="organization_type__fieldset" class="usa-fieldset">
<legend> <legend class="usa-legend">
<h2> What kind of government organization do you represent?</h2> <h2> What kind of government organization do you represent?</h2>
</legend> </legend>
{{ wizard.form.organization_type.errors }} {{ wizard.form.organization_type.errors }}
{% include "includes/radio_button.html" with choice=choices.Federal %} {% include "includes/radio_button.html" with choice=choices.Federal tile="true" %}
{% include "includes/radio_button.html" with choice=choices.Interstate %} {% include "includes/radio_button.html" with choice=choices.Interstate tile="true" %}
{% include "includes/radio_button.html" with choice=choices.State_or_Territory %} {% include "includes/radio_button.html" with choice=choices.State_or_Territory tile="true" %}
{% include "includes/radio_button.html" with choice=choices.Tribal %} {% include "includes/radio_button.html" with choice=choices.Tribal tile="true" %}
{% include "includes/radio_button.html" with choice=choices.County %} {% include "includes/radio_button.html" with choice=choices.County tile="true" %}
{% include "includes/radio_button.html" with choice=choices.City %} {% include "includes/radio_button.html" with choice=choices.City tile="true" %}
{% include "includes/radio_button.html" with choice=choices.Special_District %} {% include "includes/radio_button.html" with choice=choices.Special_District tile="true" %}
</fieldset> </fieldset>
<fieldset id="federal_type__fieldset" {% trigger wizard.form.federal_type choices.Federal %} class="usa-fieldset"> <fieldset id="federal_type__fieldset" {% trigger wizard.form.federal_type choices.Federal %} class="usa-fieldset">
<legend> <legend class="usa-legend">
<h2> Which federal branch does your organization belong to?</h2> <h2> Which federal branch does your organization belong to?</h2>
</legend> </legend>
<noscript> <noscript>
Only required if you selected "Federal". Only required if you selected "Federal".
</noscript> </noscript>
{{ wizard.form.federal_type|add_class:"usa-radio" }} {% radio_buttons_by_value wizard.form.federal_type as federal_choices %}
{% include "includes/radio_button.html" with choice=federal_choices.Executive%}
{% include "includes/radio_button.html" with choice=federal_choices.Judicial%}
{% include "includes/radio_button.html" with choice=federal_choices.Legislative%}
</fieldset> </fieldset>
<fieldset id="is_election_board__fieldset" {% trigger wizard.form.is_election_board choices.Tribal choices.County choices.City choices.Special_District%} class="usa-fieldset"> <fieldset id="is_election_board__fieldset" {% trigger wizard.form.is_election_board choices.Tribal choices.County choices.City choices.Special_District%} class="usa-fieldset">
<legend> <legend class="usa-legend">
<h2> Is your organization an election office?</h2> <h2> Is your organization an election office?</h2>
</legend> </legend>
<noscript> <noscript>
Only required if you selected "Tribal", "County", "City" or "Special District". Only required if you selected "Tribal", "County", "City" or "Special District".
</noscript> </noscript>
{{ wizard.form.is_election_board|add_class:"usa-radio" }} {% for radio in wizard.form.is_election_board %}
<div class="usa-radio">
{{radio.tag}}
<label for="{{radio.id_for_label}}" class="usa-radio__label">
{{ radio.choice_label }}
</label>
</div>
{% endfor %}
<!-- {{ wizard.form.is_election_board|add_label_class:"usa-label" }} -->
<!-- {{ wizard.form.is_election_board|add_class:"usa-radio" }} -->
</fieldset> </fieldset>
{{ block.super }} {{ block.super }}

View file

@ -1,14 +1,14 @@
<div> <div class="usa-radio">
<label for="{{ choice.id_for_label }}" <input
><input
type="{{ choice.data.type }}" type="{{ choice.data.type }}"
name="{{ choice.data.name }}" name="{{ choice.data.name }}"
value="{{ choice.data.value }}" value="{{ choice.data.value }}"
class="usa-radio" class="usa-radio__input {% if tile %}usa-radio__input--tile {%endif%}"
id="{{ choice.id_for_label }}" id="{{ choice.id_for_label }}"
{% if choice.data.attrs.required %}required{% endif %} {% if choice.data.attrs.required %}required{% endif %}
{% if choice.data.selected %}checked{% endif %} {% if choice.data.selected %}checked{% endif %}
/> />
{{ choice.data.label }}</label <label class="usa-radio__label" for="{{ choice.id_for_label }}" >
> {{ choice.data.label }}
</div> </label >
</div>