Update new questions, improve form styling

emfcamp · Jun 9, 2024 · 30051a9 · 30051a9
1 parent afc1c64
commit 30051a9
Show file tree

Hide file tree

Showing 7 changed files with 133 additions and 115 deletions.
diff --git a/apps/common/forms.py b/apps/common/forms.py
@@ -42,22 +42,27 @@ class Meta(FlaskForm.Meta):
 AGE_VALUES = ("0-15", "16-25", "26-35", "36-45", "46-55", "56-65", "66+")
 AGE_CHOICES = tuple(OPT_OUT + [(v, v) for v in AGE_VALUES])
 
-SEXUALITY_VALUES = ("straight-or-heterosexual","gay-or-lesbian","bisexual","other")
-SEXUALITY_CHOICES = tuple(OPT_OUT + [(v, v.capitalize().replace("-", " ")) for v in SEXUALITY_VALUES])
+SEXUALITY_VALUES = (
+    "straight-or-heterosexual",
+    "gay-or-lesbian",
+    "bisexual-or-pansexual",
+    "other",
+)
+SEXUALITY_CHOICES = tuple(
+    OPT_OUT + [(v, v.capitalize().replace("-", " ")) for v in SEXUALITY_VALUES]
+)
 
 
 DISABILITY_CHOICES = tuple(
     [
-        ("none", "I do not have any of these disabilities or health conditions"),
-        ("autistic", "Autistic spectrum condition or another condition affecting speech, language, communication or social skills"),
-        ("blind", "Blindness or a visual impairment not corrected by glasses"),
-        ("developmental", "Condition affecting motor, cognitive, social and emotional skills, speech or language since childhood"),
-        ("deaf", "Deafness or a serious hearing impairment"),
-        ("dyslexic", "Dyslexia, dyspraxia or attention deficit hyperactivity disorder (ADHD) or another learning disability"),
-        ("long-term-illness", "Long-term illness (for example cancer, HIV, diabetes, chronic heart disease or epilepsy)"),
-        ("mental-health-illness", "Mental health condition (for example depression, schizophrenia or anxiety disorder)"),
-        ("physical-disabled", "Physical disability or mobility issue (for example impaired use of arms or legs, use of a wheelchair or crutches)"),
-        ("other", "Another disability, health condition or impairment affecting daily life"),
+        ("physical", "Physical disability or mobility issue"),
+        ("vision", "Blindness or a visual impairment not corrected by glasses"),
+        ("hearing", "Deafness or a serious hearing impairment"),
+        ("autism-adhd", "Autistic spectrum condition, Asperger's, or ADHD"),
+        ("long-term", "Long-term illness"),
+        ("mental-health", "Mental health condition"),
+        ("other", "Another condition not mentioned here"),
+        ("none", "None of the above"),
     ]
 )
 
@@ -178,7 +183,6 @@ def validate_disability(form, field):
         elif len(field.data) > 1 and "" in field.data:
             raise ValidationError("Cannot select 'prefer not to say' and a disability")
 
-
     def validate(self, extra_validators=None):
         if not super().validate(extra_validators):
             return False

diff --git a/css/_base.scss b/css/_base.scss
@@ -226,14 +226,6 @@ div.micro img {
   color: #333;
 }
 
-.form-control {
-  background-color: $form-element;
-}
-
-.form-horizontal .form-group .help-block {
-  padding-left: 0.5em;
-}
-
 legend {
   margin-bottom: 0px;
   border-bottom: 1px solid #aaa;
@@ -384,17 +376,6 @@ a.collapse-toggle:hover .glyphicon { text-decoration: none; }
   }
 }
 
-input[type="checkbox"].big-checkbox {
-  width: 20px;
-  height: 20px;
-  margin-right: 5px;
-}
-label.big-checkbox {
-  /* Increase the target area */
-  padding: 11px 10px 10px 40px !important;
-  margin: -4px 0 -10px -40px !important;
-  vertical-align: 4px;
-}
 
 /* Modals for the schedules */
 .modal {
@@ -411,45 +392,6 @@ label.big-checkbox {
 
 .role-description { display: none; }
 
-/* Form tweakery */
-
-fieldset legend {
-  margin-bottom: 10px;
-}
-
-input[type=range] {
-  appearance: none;
-  border: none;
-  box-shadow: none;
-  background: transparent;
-  margin-bottom: 6px;
-}
-
-input[type=range]::range-track {
-  appearance: none;
-  height: 8.4px;
-  cursor: pointer;
-  background: $main-link-hover;
-  border-radius: 3px;
-}
-
-input[type=range]:focus::range-track {
-  background: lighten($main-link-hover, 5%);
-}
-
-input[type=range]::range-thumb {
-  appearance: none;
-  box-shadow: 1px 1px 1px lighten($main-background, 50%);
-  border: 1px solid $main-background;
-  height: 30px;
-  width: 16px;
-  border-radius: 3px;
-  background: $highlight-3-background;
-  cursor: pointer;
-  margin-top: -11px;
-}
-
-
 #mailing-list-form #name-field {
   display: none;
 }
diff --git a/css/_forms.scss b/css/_forms.scss
@@ -0,0 +1,64 @@
+@use "./_variables.scss" as *;
+
+.form-control {
+    background-color: $form-element;
+}
+
+.form-horizontal .form-group .help-block {
+    padding-left: 0.5em;
+}
+
+input[type="checkbox"] {
+    width: 20px;
+    height: 20px;
+    margin-left: -25px !important;
+    margin-top: 4px !important;
+}
+
+fieldset legend {
+    margin-bottom: 10px;
+}
+
+input[type=range] {
+    appearance: none;
+    border: none;
+    box-shadow: none;
+    background: transparent;
+    margin-bottom: 6px;
+}
+
+input[type=range]::range-track {
+    appearance: none;
+    height: 8.4px;
+    cursor: pointer;
+    background: $main-link-hover;
+    border-radius: 3px;
+}
+
+input[type=range]:focus::range-track {
+    background: lighten($main-link-hover, 5%);
+}
+
+input[type=range]::range-thumb {
+    appearance: none;
+    box-shadow: 1px 1px 1px lighten($main-background, 50%);
+    border: 1px solid $main-background;
+    height: 30px;
+    width: 16px;
+    border-radius: 3px;
+    background: $highlight-3-background;
+    cursor: pointer;
+    margin-top: -11px;
+}
+
+ul.form-check-input input {
+    vertical-align: top;
+}
+
+ul.form-check-input li {
+    list-style-type: none;
+}
+
+ul.form-check-input label {
+    font-weight: normal;
+}
diff --git a/css/main.scss b/css/main.scss
@@ -11,6 +11,7 @@
 @use "./_buttons.scss";
 @use "./_video.scss";
 @use "./_panel_grid.scss";
+@use "./_forms.scss";
 
 @use "./_about.scss";
 @use "./_attendee_content.scss";

diff --git a/templates/_diversityform.html b/templates/_diversityform.html
@@ -2,30 +2,30 @@
 
 {% macro render_diversity_fields(form, current_user) %}
 {# Should only be rendered inside a .panel #}
-
-<fieldset>
-  <div class="panel-heading">
-    If you're comfortable telling us a little bit about yourself, we'd appreciate it.
-    This information will only be summarised and compared with previous years, to find out how well we're doing with outreach.
-  </div>
-  <div class="panel-heading">
-    <p></p>
-    {{ render_field(form.age, True) }}
-    {{ render_field(form.gender, True) }}
-    {{ render_field(form.ethnicity, True) }}
-    {{ render_field(form.sexuality, True) }}
-    {{ render_multi_checkbox(form.disability) }}
-    {% if current_user.has_permission("cfp_reviewer") %}
-      <p>
-        Just so we know that we're reflecting our attendees' interests reasonably well:
-        please select the three topics that <em>most</em> interest you. Please review
-        everything you feel able to, this is purely so we can track if there are areas
-        we need to recruit more reviewers.
-      </p>
-      {{ render_field(form.cfp_tag_0, True) }}
-      {{ render_field(form.cfp_tag_1, True) }}
-      {{ render_field(form.cfp_tag_2, True) }}
-    {% endif %}
-  </div>
-</fieldset>
+  {% if current_user.has_permission("cfp_reviewer") %}
+  <fieldset>
+    <h4>CfP reviewer survey</h4>
+    <p>As you're a reviewer for our Call for Participation, please select the three topics that
+      <em>most</em> interest you, to help us track the interests of our review panel. Please still
+    review everything you feel able to.</p>
+    {{ render_field(form.cfp_tag_0, True) }}
+    {{ render_field(form.cfp_tag_1, True) }}
+    {{ render_field(form.cfp_tag_2, True) }}
+  </fieldset>
+  {% endif %}
+  <fieldset>
+    <h4>Diversity survey</h4>
+    <p>
+      If you're comfortable telling us a little bit about yourself, we'd appreciate it if you
+      filled in our diversity survey. This information will be summarised and used to track how we
+      can improve the diversity of the community and the accessibility of EMF.
+    </p>
+      {{ render_field(form.age, True) }}
+      {{ render_field(form.gender, True) }}
+      {{ render_field(form.ethnicity, True) }}
+      {{ render_field(form.sexuality, True) }}
+      {% call render_multi_checkbox(form.disability) %}
+        Please select any of the following that apply to you, or "None of the above":
+      {% endcall %}
+  </fieldset>
 {% endmacro %}
diff --git a/templates/_formhelpers.html b/templates/_formhelpers.html
@@ -136,28 +136,33 @@
         {% endfor %}
     {% endif %}
 </dd>
-
 {% endmacro %}
 
 {% macro render_multi_checkbox(field) %}
-{% if field.errors %}
-    {# If we have help text, add an aria-describedby attribute to the field. #}
-    {% do kwargs.update({'aria-describedby': "help-block-" + field.name}) %}
-{% endif %}
+    {% if caller %}
+        {% set help_text = caller() %}
+    {% endif %}
 
-<dt><label for="{{ field.name }}" class="control-label">
-    {{ field.label.text }}
-</label></dt>
-<dd {%- if field.errors %} class="has-error" {%- endif %}>
-    <div class="form-check">
-        {{ field(class_="form-check-input") }}
-    </div>
     {% if field.errors %}
-        {% for error in field.errors %}
-            <p class="help-block" id="help-block-{{ field.name }}">{{ error }}</p>
-        {% endfor %}
+        {# If we have help text, add an aria-describedby attribute to the field. #}
+        {% do kwargs.update({'aria-describedby': "help-block-" + field.name}) %}
     {% endif %}
-</dd>
 
+    <dt><label for="{{ field.name }}" class="control-label">
+        {{ field.label.text }}
+    </label></dt>
+    <dd {%- if field.errors %} class="has-error" {%- endif %}>
+        {% if help_text %}
+            <p>{{help_text}}</p>
+        {% endif %}
+        <div class="form-check">
+            {{ field(class_="form-check-input") }}
+        </div>
+        {% if field.errors %}
+            {% for error in field.errors %}
+                <p class="help-block" id="help-block-{{ field.name }}">{{ error }}</p>
+            {% endfor %}
+        {% endif -%}
+    </dd>
 {% endmacro %}
 
diff --git a/templates/account/details.html b/templates/account/details.html
@@ -14,10 +14,11 @@ <h3>Your Details</h3>
            in the schedule.</div>
     {% endif %}
   </div>
+  <div class="panel-body">
   <form method="post" class="form-horizontal">
     {{ form.hidden_tag() }}
     <fieldset>
-      <p></p>
+      <h4>Account details</h4>
       <div class="col-sm-12">
         <div class="form-group">
           <label class="col-sm-2 control-label">Email</label>
@@ -38,7 +39,8 @@ <h3>Your Details</h3>
     </fieldset>
     {{ render_diversity_fields(form, current_user) }}
 
-    {{ form.forward(class_="btn btn-default pull-right", style="margin-bottom: 15px;") }}
+    {{ form.forward(class_="btn btn-primary pull-right") }}
   </form>
+  </div>
 </div>
 {% endblock %}