EL-1431: Search page - Update styling

fala/apps/adviser/forms.py

@@ -1,6 +1,8 @@
 # coding=utf-8
 from django import forms
 from django.utils.translation import gettext_lazy as _
+from django.utils.safestring import mark_safe
+from django.conf import settings
 
 import laalaa.api as laalaa
 import re
@@ -26,16 +28,30 @@ def __init__(self, attrs={}):
 class AdviserSearchForm(forms.Form):
     page = forms.IntegerField(required=False, widget=forms.HiddenInput())
 
-    postcode = forms.CharField(
-        label=_("Enter postcode"),
-        max_length=30,
-        help_text=_("For example, <span class='notranslate' translate='no'>SW1H 9AJ</span>"),
+    if settings.FEATURE_FLAG_NO_MAP:
+        postcode = forms.CharField(
+            label=_("Postcode"),
+            max_length=30,
+            help_text=_(mark_safe("For example, <span class='notranslate' translate='no'>SW1H</span>")),
+            required=False,
+            widget=FalaTextInput(),
+        )
+    else:
+        postcode = forms.CharField(
+            label=_("Enter postcode"),
+            max_length=30,
+            help_text=_("For example, <span class='notranslate' translate='no'>SW1H 9AJ</span>"),
+            required=False,
+            widget=FalaTextInput(),
+        )
+
+    name = forms.CharField(
+        label=_("Organisation name"),
+        max_length=100,
         required=False,
         widget=FalaTextInput(),
     )
 
-    name = forms.CharField(label=_("Organisation name"), max_length=100, required=False, widget=FalaTextInput())
-
     type = forms.MultipleChoiceField(
         label=_("Organisation type"),
         choices=ORGANISATION_TYPES_CHOICES,

fala/apps/adviser/views.py

@@ -7,7 +7,11 @@
 
 
 class AdviserView(TemplateView):
-    template_name = "adviser/search.html"
+    # https://docs.djangoproject.com/en/5.0/topics/class-based-views/#usage-in-your-urlconf - this is how `template_name`
+    if settings.FEATURE_FLAG_NO_MAP:
+        template_name = "adviser/search.html"
+    else:
+        template_name = "adviser/search_old.html"
 
     def get(self, request, *args, **kwargs):
         context = self.get_context_data(**kwargs)
@@ -22,6 +26,8 @@ def get(self, request, *args, **kwargs):
                 "current_url": current_url,
                 "GOOGLE_MAPS_API_KEY": settings.GOOGLE_MAPS_API_KEY,
                 "LAALAA_API_HOST": settings.LAALAA_API_HOST,
+                "FEATURE_FLAG_NO_MAP": settings.FEATURE_FLAG_NO_MAP,
+                "CHECK_LEGAL_AID_URL": settings.CHECK_LEGAL_AID_URL,
             }
         )
 

fala/assets-src/sass/main.scss

@@ -54,7 +54,6 @@ body.govuk-template__body {
   height: auto;
   height: initial;
   display: block;
-  font-family: GDS Transport, Arial, sans-serif; /*temp - remove when all classes updated*/
 }
 
 .govuk-footer__copyright-logo,
@@ -91,6 +90,14 @@ body.govuk-template__body {
 
 .fala-tickbox-columns .govuk-checkboxes__item label.govuk-checkboxes__label {
   min-width:100%;
+  inline-size: 150px;
+  overflow-wrap: break-word;
+}
+
+.govuk-checkboxes__label {
+  &::before {
+    background-color: govuk-colour("white");
+  }
 }
 
 /*below override for archaic class*/
@@ -183,7 +190,16 @@ body.fala-dev {
   max-width: 140px;
 }
 
-.laa-fala__search {
+.laa-fala {
+  &__search {
   margin-top:1em;
   clear:both;
+  }
+
+  &__grey-box {
+    background-color: govuk-colour("light-grey"); 
+    padding: 1em; 
+    margin: 0.5em; 
+  }
+
 }

fala/settings/base.py

@@ -228,6 +228,8 @@ def root(*x):
 
 GOOGLE_MAPS_API_KEY = os.environ.get("GOOGLE_MAPS_API_KEY", "")
 
+CHECK_LEGAL_AID_URL = "https://www.gov.uk/check-legal-aid"
+
 # .local.py overrides all the common settings.
 try:
     from .local import *  # noqa: F401,F403

fala/templates/adviser/search.html

@@ -7,70 +7,88 @@
 {% import "macros/element.html" as Element %}
 {% import "macros/forms.html" as Form %}
 
-{% block search_form %}
-  <form action="" class="laa-fala__search" novalidate>
-    <div
-      class="govuk-form-group
-        {% if (form.errors and form.errors['__all__']) %}
-          govuk-form-group--error
-        {% endif %}
-        "
-      id="fala_questions">
+{% block content %}
+  <div class="govuk-grid-column-two-thirds">
+      <div id="google_translate_element" class="govuk-!-margin-bottom-6"></div>
+      <h1 class="govuk-heading-xl"> Find a legal aid adviser or family mediator </h1>
+      <p class="govuk-body">You need to provide information about your finances to find out if you qualify for legal aid.</p>
+      <p class="govuk-body"><a class="govuk-link" href="{{ CHECK_LEGAL_AID_URL }}" target="_blank" rel="noopener">Check if you qualify for legal aid (opens in a new tab)</a></p>
+  </div>
 
-      {% set errorMessage = {'err': ""} %}
+  {% block search_form %}
+      <div class="govuk-grid-column-full laa-fala__grey-box">
+        <form action="" novalidate>
+          <div
+            class="govuk-form-group
+              {% if (form.errors and form.errors['__all__']) %}
+                govuk-form-group--error
+              {% endif %}
+              "
+            id="fala_questions">
 
-      {% if form.errors and form.errors['__all__'] %}
-        {% call Element.errorText() %}
-          {% for k, error in form.errors.items() %}
-            {% if errorMessage.update({'err': error | striptags}) %}{% endif %}
-          {% endfor %}
-        {% endcall %}
-      {% endif %}
+            {% set errorMessage = {'err': ""} %}
 
-      {% if (form.errors and form.errors['__all__']) %}
-        {% call Form.group(form.postcode, 'govuk-form-group', {'class':'govuk-input--error'}, hide_optional=True, global_error=errorMessage.err) %}
-        {% endcall %}
-        {% call Form.group(form.name, 'govuk-form-group', {'class':'govuk-input--error'}, hide_optional=True, max_length='100', global_error_hidden=errorMessage.err) %}
-        {% endcall %}
-      {% else %}
-        {% call Form.group(form.postcode, 'govuk-form-group', hide_optional=True) %}
-        {% endcall %}
-        {% call Form.group(form.name, 'govuk-form-group', hide_optional=True, max_length='100') %}
-        {% endcall %}
-      {% endif %}
-    </div>
-    <button type="submit" class="govuk-button" id="searchButton" name="search">Search</button>
+            {% if form.errors and form.errors['__all__'] %}
+              {% call Element.errorText() %}
+                {% for k, error in form.errors.items() %}
+                  {% if errorMessage.update({'err': error | striptags}) %}{% endif %}
+                {% endfor %}
+              {% endcall %}
+            {% endif %}
 
-    <div class="form-group filters">
-      <div class="govuk-form-group">
-        <fieldset class="govuk-fieldset">
-          <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
-            <h2 class="govuk-fieldset__heading">
-              Filter by category
-            </h2>
-          </legend>
-          <div class="govuk-checkboxes govuk-checkboxes--small fala-tickbox-columns">
-            {% for value, label_text in form.categories.field.choices %}
-              <div class="govuk-checkboxes__item">
-                <input
-                  class="govuk-checkboxes__input"
-                  id="id_categories_{{ loop.index0 }}"
-                  name="categories"
-                  type="checkbox"
-                  value="{{ value }}"
-                  {% if value in request.GET.getlist('categories','') %}
-                    checked
-                  {% endif %}
-                >
-                <label class="govuk-label govuk-checkboxes__label" for="id_categories_{{ loop.index0 }}">
-                  {{ label_text }}
-                </label>
-              </div>
-            {% endfor %}
+            {% if (form.errors and form.errors['__all__']) %}
+              {% call Form.group(form.postcode, 'govuk-form-group', {'class':'govuk-input--error'}, hide_optional=True, global_error=errorMessage.err) %}
+              {% endcall %}
+              <p class="govuk-body">Or</p>
+              {% call Form.group(form.name, 'govuk-form-group', {'class':'govuk-input--error'}, hide_optional=True, max_length='100', global_error_hidden=errorMessage.err) %}
+              {% endcall %}
+            {% else %}
+              {% call Form.group(form.postcode, 'govuk-form-group', hide_optional=True) %}
+              {% endcall %}
+              <p class="govuk-body">Or</p>
+              {% call Form.group(form.name, 'govuk-form-group', hide_optional=True, max_length='100') %}
+              {% endcall %}
+            {% endif %}
+          </div>
+
+          <div class="form-group filters">
+            <div class="govuk-form-group">
+              <fieldset class="govuk-fieldset">
+                <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
+                  <label class="govuk-label govuk-label--s">
+                    Catgories of law (optional)
+                  </label>
+                </legend>
+                <div class="govuk-checkboxes govuk-checkboxes--small fala-tickbox-columns">
+                  {% for value, label_text in form.categories.field.choices %}
+                    <div class="govuk-checkboxes__item">
+                      <input
+                        class="govuk-checkboxes__input"
+                        id="id_categories_{{ loop.index0 }}"
+                        name="categories"
+                        type="checkbox"
+                        value="{{ value }}"
+                        {% if value in request.GET.getlist('categories','') %}
+                          checked
+                        {% endif %}
+                      >
+                      <label class="govuk-label govuk-checkboxes__label" for="id_categories_{{ loop.index0 }}">
+                        {{ label_text }}
+                      </label>
+                    </div>
+                  {% endfor %}
+                </div>
+              </fieldset>
+            </div>
+            <button type="submit" class="govuk-button govuk-!-margin-bottom-2" id="searchButton" name="search">Search</button>
           </div>
-        </fieldset>
+        </form>
       </div>
-      <button type="submit" class="govuk-button govuk-button--secondary" name="filter">Apply filter</button>
+  {% endblock %}
+
+    <div class="govuk-grid-column-full">
+      <p class="govuk-body">If you are a provider and your details are incorrect, please contact your contract manager.</p>
     </div>
-  </form>
 {% endblock %}
+
+

fala/templates/adviser/search_old.html

@@ -0,0 +1,76 @@
+{% if request.headers.get('x-requested-with') == 'XMLHttpRequest' %}
+  {% extends 'ajax-base.html' %}
+{% else %}
+  {% extends 'base.html' %}
+{% endif %}
+
+{% import "macros/element.html" as Element %}
+{% import "macros/forms.html" as Form %}
+
+{% block search_form %}
+  <form action="" class="laa-fala__search" novalidate>
+    <div
+      class="govuk-form-group
+        {% if (form.errors and form.errors['__all__']) %}
+          govuk-form-group--error
+        {% endif %}
+        "
+      id="fala_questions">
+
+      {% set errorMessage = {'err': ""} %}
+
+      {% if form.errors and form.errors['__all__'] %}
+        {% call Element.errorText() %}
+          {% for k, error in form.errors.items() %}
+            {% if errorMessage.update({'err': error | striptags}) %}{% endif %}
+          {% endfor %}
+        {% endcall %}
+      {% endif %}
+
+      {% if (form.errors and form.errors['__all__']) %}
+        {% call Form.group(form.postcode, 'govuk-form-group', {'class':'govuk-input--error'}, hide_optional=True, global_error=errorMessage.err) %}
+        {% endcall %}
+        {% call Form.group(form.name, 'govuk-form-group', {'class':'govuk-input--error'}, hide_optional=True, max_length='100', global_error_hidden=errorMessage.err) %}
+        {% endcall %}
+      {% else %}
+        {% call Form.group(form.postcode, 'govuk-form-group', hide_optional=True) %}
+        {% endcall %}
+        {% call Form.group(form.name, 'govuk-form-group', hide_optional=True, max_length='100') %}
+        {% endcall %}
+      {% endif %}
+    </div>
+    <button type="submit" class="govuk-button" id="searchButton" name="search">Search</button>
+
+    <div class="form-group filters">
+      <div class="govuk-form-group">
+        <fieldset class="govuk-fieldset">
+          <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
+            <h2 class="govuk-fieldset__heading">
+              Filter by category
+            </h2>
+          </legend>
+          <div class="govuk-checkboxes govuk-checkboxes--small fala-tickbox-columns">
+            {% for value, label_text in form.categories.field.choices %}
+              <div class="govuk-checkboxes__item">
+                <input
+                  class="govuk-checkboxes__input"
+                  id="id_categories_{{ loop.index0 }}"
+                  name="categories"
+                  type="checkbox"
+                  value="{{ value }}"
+                  {% if value in request.GET.getlist('categories','') %}
+                    checked
+                  {% endif %}
+                >
+                <label class="govuk-label govuk-checkboxes__label" for="id_categories_{{ loop.index0 }}">
+                  {{ label_text }}
+                </label>
+              </div>
+            {% endfor %}
+          </div>
+        </fieldset>
+      </div>
+      <button type="submit" class="govuk-button govuk-button--secondary" name="filter">Apply filter</button>
+    </div>
+  </form>
+{% endblock %}

fala/templates/base.html

@@ -99,7 +99,7 @@ <h2 class="govuk-error-summary__title" id="error-summary-title">
         </h2>
         <div class="govuk-error-summary__body">
           <ul class="govuk-list govuk-error-summary__list">
-            {{ Form.render_field_errors_for_summary(form.postcode) }}
+            {{ Form.render_field_errors_for_summary(form.postcode_old) }}
             {{ Form.render_field_errors_for_summary(form.name) }}
           </ul>
         </div>

fala/templates/macros/forms.html

@@ -90,7 +90,7 @@
     {% endif %}
 
     <div class="form-group-label{{ (' govuk-visually-hidden' if hide_label else '') }}">
-      <label class="govuk-label" for="{{ field.id_for_label }}">{{ label_text|safe }}</label>
+      <label class="govuk-label govuk-label--s" for="{{ field.id_for_label }}">{{ label_text|safe }}</label>
     </div>
   {% endif %}
 {% endmacro %}

kubernetes_deploy/staging/deployment.yml

@@ -68,4 +68,4 @@ spec:
               name: s3
               key: bucket_name
         - name: FEATURE_FLAG_NO_MAP
-          value: "false"
+          value: "true"