EL-1431: Search page - Update styling (#229)

* update view based on flag * make feature flag live in staging * update * update to stylings and layout * updates from review comments * updates from review comments * last bits of from review commets * remove duplicates * removing more duplicaation and addng in extra CSS * typo * update views.py * update to stylings * Update to test and template * remove results template * update tests * test update * revert changes * add `LAALAA_API_HOST` variable in CircleCi config * refactor test's * refactor of tests - chaneg the scope. * typo in test method * use `LiveServerTestCase` class * reformatted views, test, and base.py * revert change to `urls.py` as `adviser` already installed in `base.py` * update to the way we populate a form filed via a feature flag - based on review comment. * switch around what is shown on conditional * update on comment, on where to find documentation * update CSS * update CSS
ministryofjustice · Apr 19, 2024 · a78e0f1 · a78e0f1
1 parent a71cc62
commit a78e0f1
Show file tree

Hide file tree

Showing 11 changed files with 252 additions and 68 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -92,6 +92,8 @@ jobs:
           command: |
             source env/bin/activate
             python manage.py test
+          environment:
+            LAALAA_API_HOST: "https://laa-legal-adviser-api-staging.apps.live-1.cloud-platform.service.justice.gov.uk"
 
   build:
     executor: aws-ecr/default # use the aws-ecr/default executor to start the docker daemon

diff --git a/fala/apps/adviser/forms.py b/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
@@ -27,14 +29,19 @@ class AdviserSearchForm(forms.Form):
     page = forms.IntegerField(required=False, widget=forms.HiddenInput())
 
     postcode = forms.CharField(
-        label=_("Enter postcode"),
+        label=_("Postcode"),
         max_length=30,
-        help_text=_("For example, <span class='notranslate' translate='no'>SW1H 9AJ</span>"),
+        help_text=_(mark_safe("For example, <span class='notranslate' translate='no'>SW1H</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"),
@@ -53,6 +60,11 @@ class AdviserSearchForm(forms.Form):
     def __init__(self, *args, **kwargs):
         kwargs.setdefault("label_suffix", "")
         super(AdviserSearchForm, self).__init__(*args, **kwargs)
+        if not settings.FEATURE_FLAG_NO_MAP:
+            self.fields["postcode"].label = _("Enter postcode")
+            self.fields["postcode"].help_text = _(
+                "For example, <span class='notranslate' translate='no'>SW1H 9AJ</span>"
+            )
 
     def clean(self):
         data = self.cleaned_data

diff --git a/fala/apps/adviser/tests/test_search_view_function.py b/fala/apps/adviser/tests/test_search_view_function.py
@@ -0,0 +1,33 @@
+from django.test import SimpleTestCase, Client, override_settings
+from django.urls import reverse
+
+
+@override_settings(FEATURE_FLAG_NO_MAP=True)
+class SearchViewFunctionTest(SimpleTestCase):
+    client = Client()
+
+    url = reverse("adviser")
+
+    def test_postcode_search(self):
+        response = self.client.get(self.url, {"postcode": "PE31"})
+        self.assertEqual(200, response.status_code)
+
+    def test_invalid_postcode_generates_error(self):
+        response = self.client.get(self.url, {"postcode": "ZZZ"})
+        self.assertEqual({"postcode": ["Postcode not found"]}, response.context_data["form"].errors)
+
+
+@override_settings(FEATURE_FLAG_NO_MAP=True)
+class NewSearchViewTemplate(SimpleTestCase):
+    client = Client()
+
+    def test_template_link_and_css(self):
+        response = self.client.get(reverse("adviser"))
+
+        self.assertEqual(response.status_code, 200)
+
+        # Ensure URL link is in response content
+        self.assertContains(response, "https://www.gov.uk/check-legal-aid")
+
+        # Ensure CSS class is in response content
+        self.assertContains(response, "laa-fala__grey-box")
diff --git a/fala/apps/adviser/views.py b/fala/apps/adviser/views.py
@@ -6,8 +6,14 @@
 from .forms import AdviserSearchForm
 
 
+# https://docs.djangoproject.com/en/5.0/topics/class-based-views - documentation on Class-based views
 class AdviserView(TemplateView):
-    template_name = "adviser/search.html"
+    def get_template_names(self) -> list[str]:
+        if settings.FEATURE_FLAG_NO_MAP:
+            template_name = "adviser/search.html"
+        else:
+            template_name = "adviser/search_old.html"
+        return [template_name]
 
     def get(self, request, *args, **kwargs):
         context = self.get_context_data(**kwargs)
@@ -22,6 +28,7 @@ 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,
+                "CHECK_LEGAL_AID_URL": settings.CHECK_LEGAL_AID_URL,
             }
         )
 

diff --git a/fala/assets-src/sass/main.scss b/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,
@@ -71,6 +70,25 @@ body.govuk-template__body {
   text-transform: uppercase;
 }
 
+.fala-tickbox-columns_new .govuk-checkboxes__item {
+  clear:none;
+  min-width:44.63%;
+}
+
+.fala-tickbox-columns_new .govuk-checkboxes__item label.govuk-checkboxes__label {
+  min-width:100%;
+  overflow-wrap: break-word;
+}
+
+@media only screen and (min-width: 730px) {
+  .fala-tickbox-columns_new .govuk-checkboxes__item label.govuk-checkboxes__label {
+    min-width:100%;
+    inline-size: 150px;
+  }
+}
+
+
+// Remove below CSS once `FEATURE_FLAG_NO_MAP` is removed
 .fala-tickbox-columns .govuk-checkboxes__item {
   clear:none;
   min-width:44.63%;
@@ -92,6 +110,13 @@ body.govuk-template__body {
 .fala-tickbox-columns .govuk-checkboxes__item label.govuk-checkboxes__label {
   min-width:100%;
 }
+// Remove above CSS once `FEATURE_FLAG_NO_MAP` is removed
+
+.govuk-checkboxes__label {
+  &::before {
+    background-color: govuk-colour("white");
+  }
+}
 
 /*below override for archaic class*/
 p.govuk-body:last-child,
@@ -183,7 +208,14 @@ 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;
+  }
 }
diff --git a/fala/settings/base.py b/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

diff --git a/fala/templates/adviser/search.html b/fala/templates/adviser/search.html
@@ -7,70 +7,90 @@
 {% 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">
+        <div class="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>
+              {% 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_new">
+                    {% 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>
-            {% endfor %}
-          </div>
-        </fieldset>
+              <button type="submit" class="govuk-button govuk-!-margin-bottom-2" id="searchButton" name="search">Search</button>
+            </div>
+          </form>
+        </div>
       </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 govuk-!-margin-top-5">If you are a provider and your details are incorrect, please contact your contract manager.</p>
     </div>
-  </form>
 {% endblock %}
+
+