diff --git a/opentech/apply/funds/templates/funds/application_base.html b/opentech/apply/funds/templates/funds/application_base.html index d578df8970767b5f0561824b048788f0fd4b37f3..b81b5a17706a21707798175b9632bc44dd8f6461 100644 --- a/opentech/apply/funds/templates/funds/application_base.html +++ b/opentech/apply/funds/templates/funds/application_base.html @@ -36,7 +36,7 @@ {% include "forms/includes/field.html" with is_application=True %} {% else %} {% if field.group_number > 1 %} - <div class="field-group-{{ field.group_number }}" {% if not show_all_group_fields %}style="display:none;"{% endif %}> + <div class="field-group-{{ field.group_number }}{% if not show_all_group_fields %} js-hidden{% endif %}"> {{ field }} </div> {% else %} diff --git a/opentech/apply/templates/forms/includes/field.html b/opentech/apply/templates/forms/includes/field.html index 3304061107830d2a1ebc2bb08cfdb659498531cb..c387e161a296d18af2ea200d20c3e5ce0af3ef76 100644 --- a/opentech/apply/templates/forms/includes/field.html +++ b/opentech/apply/templates/forms/includes/field.html @@ -2,7 +2,7 @@ {% with widget_type=field|widget_type field_type=field|field_type %} -<div class="form__group {% if widget_type == 'checkbox_input' %}form__group--checkbox{% endif %} {% if widget_type == 'clearable_file_input' or widget_type == 'multi_file_input' %}form__group--file{% endif %} {% if field.help_text %}form__group--wrap{% endif %}{% if field.errors %}form__error{% endif %} {% if is_application and field.field.group_number > 1 %}field-group-{{ field.field.group_number }}{% endif %} {% if is_application and field.field.grouper_for %}form-fields-grouper{% endif %}" {% if is_application and field.field.grouper_for %}data-grouper-for="{{ field.field.grouper_for }}" data-toggle-on="{{ field.field.choices.0.0 }}" data-toggle-off="{{ field.field.choices.1.0 }}"{% endif %} {% if is_application and field.field.group_number > 1 and not show_all_group_fields %}style="display:none;"{% endif %}> +<div class="form__group{% if widget_type == 'checkbox_input' %} form__group--checkbox{% endif %}{% if widget_type == 'clearable_file_input' or widget_type == 'multi_file_input' %} form__group--file{% endif %}{% if field.help_text %} form__group--wrap{% endif %}{% if field.errors %} form__error{% endif %}{% if is_application and field.field.group_number > 1 %} field-group field-group-{{ field.field.group_number }}{% endif %}{% if is_application and field.field.grouper_for %} form-fields-grouper{% endif %}" {% if is_application and field.field.grouper_for %}data-grouper-for="{{ field.field.grouper_for }}" data-toggle-on="{{ field.field.choices.0.0 }}" data-toggle-off="{{ field.field.choices.1.0 }}"{% endif %}{% if is_application and field.field.group_number > 1 %} data-hidden="{% if not show_all_group_fields %}true{% else %}false{% endif %}"{% endif %}> {% if widget_type == 'clearable_file_input' or widget_type == 'multi_file_input' %} <span class="form__question">{{ field.label }}</span> <label for="{{ field.id_for_label }}" class="form__question form__question--{{ field_type }} {{ widget_type }}" {% if field.field.required %}required{% endif %}> diff --git a/opentech/static_src/src/javascript/apply/form-group-toggle.js b/opentech/static_src/src/javascript/apply/form-group-toggle.js index fe2e8be8dcbcfb495a9cc9bd5fb4c92ed51384cb..afd7c0eb1b46e43ba61b4f005777871e102a235c 100644 --- a/opentech/static_src/src/javascript/apply/form-group-toggle.js +++ b/opentech/static_src/src/javascript/apply/form-group-toggle.js @@ -2,18 +2,33 @@ 'use strict'; - $('.form-fields-grouper input[type="radio"]').change(function () { + var i; + for (i = 2; i < 20; i++) { + var $field_group = $('.field-group-' + i); + if ($field_group.length) { + var classes = 'field-group-wrapper field-group-wrapper-' + i; + if ($field_group.data('hidden')) { + classes += ' js-hidden'; + } + $field_group.wrapAll('<div class="' + classes + '" />'); + } + else { + break; + } + } + + $('.form-fields-grouper input[type="radio"]').on('change', function () { var radio_input_value = $(this).val(); - var fields_grouper_div = this.closest('.form-fields-grouper '); - var fields_grouper_for = $(fields_grouper_div).attr('data-grouper-for'); - var group_toggle_on_value = $(fields_grouper_div).attr('data-toggle-on'); - var group_toggle_off_value = $(fields_grouper_div).attr('data-toggle-off'); + var fields_grouper_div = this.closest('.form-fields-grouper'); + var fields_grouper_for = $(fields_grouper_div).data('grouper-for'); + var group_toggle_on_value = $(fields_grouper_div).data('toggle-on'); + var group_toggle_off_value = $(fields_grouper_div).data('toggle-off'); if (radio_input_value === group_toggle_on_value) { - $('.field-group-' + fields_grouper_for).show(); + $('.field-group-wrapper-' + fields_grouper_for).removeClass('js-hidden').addClass('highlighted'); } else if (radio_input_value === group_toggle_off_value) { - $('.field-group-' + fields_grouper_for).hide(); + $('.field-group-wrapper-' + fields_grouper_for).removeClass('highlighted').addClass('js-hidden'); } }); diff --git a/opentech/static_src/src/sass/public/components/_form.scss b/opentech/static_src/src/sass/public/components/_form.scss index dafc893e43219162d8695238313bb0f8b317cc57..5885f06ddfc2c95d3f239b7da9eb13240fb5bb3d 100644 --- a/opentech/static_src/src/sass/public/components/_form.scss +++ b/opentech/static_src/src/sass/public/components/_form.scss @@ -66,6 +66,27 @@ } } + .field-group-wrapper { + padding: .5rem; + margin-bottom: 1rem; + border: 1px solid $color--mid-grey; + + &.highlighted { + animation: background-fade-highlight 2.5s ease-out; + } + } + + @keyframes background-fade-highlight { + 0% { + background-color: $color--sky-blue; + } + + 100% { + background-color: transparent; + } + } + + &__question { display: block; margin-bottom: .5em;