EL-1431: Search page - Update styling

fala/apps/adviser/forms.py

@@ -27,14 +27,19 @@ class AdviserSearchForm(forms.Form):
     page = forms.IntegerField(required=False, widget=forms.HiddenInput())
 
     postcode = forms.CharField(
-        label=_("Enter postcode"),
+        label=_("<label class='govuk-label govuk-label--s'>Postcode</label>"),
         max_length=30,
-        help_text=_("For example, <span class='notranslate' translate='no'>SW1H 9AJ</span>"),
+        help_text=_("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=_("<label class='govuk-label govuk-label--s'>Organisation name</label>"),
+        max_length=100,
+        required=False,
+        widget=FalaTextInput(),
+    )
 
     type = forms.MultipleChoiceField(
         label=_("Organisation type"),

fala/apps/adviser/forms_old.py

@@ -0,0 +1,100 @@
+# coding=utf-8
+from django import forms
+from django.utils.translation import gettext_lazy as _
+
+import laalaa.api as laalaa
+import re
+
+SEARCH_TYPE_CHOICES = [("location", _("Location")), ("organisation", _("Organisation"))]
+
+ORGANISATION_TYPES_CHOICES = [
+    ("Charity or Voluntary Org", "Charity or Voluntary Organisations"),
+    ("Mediation", "Mediation Service"),
+    ("Private Company", "Private Company"),
+    ("Solicitor", "Solicitor"),
+]
+
+
+class FalaTextInput(forms.TextInput):
+    def __init__(self, attrs={}):
+        class_attr = " ".join([c for c in ["govuk-input govuk-!-width-one-third", attrs.get("class")] if c])
+        attrs.update({"class": class_attr})
+
+        super(FalaTextInput, self).__init__(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>"),
+        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,
+        widget=forms.CheckboxSelectMultiple(),
+        required=False,
+    )
+
+    categories = forms.MultipleChoiceField(
+        label=_("Category"),
+        choices=laalaa.PROVIDER_CATEGORY_CHOICES,
+        widget=forms.CheckboxSelectMultiple(),
+        required=False,
+    )
+
+    def __init__(self, *args, **kwargs):
+        kwargs.setdefault("label_suffix", "")
+        super(AdviserSearchForm, self).__init__(*args, **kwargs)
+
+    def clean(self):
+        data = self.cleaned_data
+        if not data.get("postcode") and not data.get("name"):
+            raise forms.ValidationError(_("Enter a postcode or an organisation name"))
+        else:
+            postcodeNoSpace = data.get("postcode").replace(" ", "")
+            msg1 = "This service does not cover "
+            msg2 = "Try a postcode, town or city in England or Wales."
+            region = "England or Wales. "
+            if re.search(r"^BT[0-9]", postcodeNoSpace, flags=re.IGNORECASE):
+                region = "Northern Ireland. "
+            elif re.search(r"^IM[0-9]", postcodeNoSpace, flags=re.IGNORECASE):
+                region = "the Isle of Man. "
+            elif re.search(r"^JE[0-9]", postcodeNoSpace, flags=re.IGNORECASE):
+                region = "Jersey. "
+            elif re.search(r"^GY[1][0]", postcodeNoSpace, flags=re.IGNORECASE):
+                region = "Sark or Guernsey. "
+            elif re.search(r"^GY[9]", postcodeNoSpace, flags=re.IGNORECASE):
+                region = "Alderney or Guernsey. "
+            elif re.search(r"^GY[0-8]", postcodeNoSpace, flags=re.IGNORECASE):
+                region = "Guernsey. "
+            if region != "England or Wales. ":
+                self.add_error("postcode", "%s %s" % (_(" ".join((msg1, region))), _(msg2)))
+        return data
+
+    def search(self):
+        if self.is_valid():
+            try:
+                data = laalaa.find(
+                    postcode=self.cleaned_data.get("postcode"),
+                    categories=self.cleaned_data.get("categories"),
+                    page=self.cleaned_data.get("page", 1),
+                    organisation_types=self.cleaned_data.get("type"),
+                    organisation_name=self.cleaned_data.get("name"),
+                )
+                if "error" in data:
+                    self.add_error("postcode", (data["error"]))
+                    return {}
+                return data
+            except laalaa.LaaLaaError:
+                self.add_error(
+                    "postcode", "%s %s" % (_("Error looking up legal advisers."), _("Please try again later."))
+                )
+        return {}

fala/apps/adviser/views.py

@@ -3,11 +3,18 @@
 from django.urls import resolve, reverse
 from django.views.generic import TemplateView
 
-from .forms import AdviserSearchForm
+if settings.FEATURE_FLAG_NO_MAP:
+    from .forms import AdviserSearchForm
+else:
+    from .forms_old import AdviserSearchForm
 
 
 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 +29,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,
+                "FEATURE_FLAG_NO_MAP": settings.FEATURE_FLAG_NO_MAP,
             }
         )
 

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,

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="https://www.gov.uk/check-legal-aid" 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" style="background-color: #f3f2f1; padding: 1em; margin: 0.5em;">
+        <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_old.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 %}