Merge pull request #1295 from OpenTechFund/feature/highlight-field-group-opening

Highlight the opening of a field group with a fading background.

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

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

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');
         }
     });
 

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;