From a5c7a1c572ed3917c561ff8c5965195c1d580b60 Mon Sep 17 00:00:00 2001 From: Greg Barnes Date: Tue, 8 Oct 2024 14:13:08 +0100 Subject: [PATCH 1/2] Moves search page to root, hardcodes markup and adds some styling to page --- front_end/images/icon-cross.svg | 1 + front_end/images/icon-search-black.svg | 1 + front_end/stylesheets/application.scss | 1 + front_end/stylesheets/filters.scss | 55 ++++ front_end/stylesheets/search.scss | 4 +- orp/config/settings/base.py | 2 +- orp/config/urls.py | 9 +- orp/core/forms.py | 6 +- orp/orp_search/templates/orp.html | 418 ++++++++++++------------- 9 files changed, 273 insertions(+), 224 deletions(-) create mode 100644 front_end/images/icon-cross.svg create mode 100644 front_end/images/icon-search-black.svg create mode 100644 front_end/stylesheets/filters.scss diff --git a/front_end/images/icon-cross.svg b/front_end/images/icon-cross.svg new file mode 100644 index 0000000..1f79b2a --- /dev/null +++ b/front_end/images/icon-cross.svg @@ -0,0 +1 @@ + diff --git a/front_end/images/icon-search-black.svg b/front_end/images/icon-search-black.svg new file mode 100644 index 0000000..a6fb95a --- /dev/null +++ b/front_end/images/icon-search-black.svg @@ -0,0 +1 @@ + diff --git a/front_end/stylesheets/application.scss b/front_end/stylesheets/application.scss index ea43262..f3b16e5 100644 --- a/front_end/stylesheets/application.scss +++ b/front_end/stylesheets/application.scss @@ -14,3 +14,4 @@ $govuk-image-url-function: frontend-image-url; // Custom style sheets @import "./search.scss"; @import "./inset_text.scss"; +@import "./filters.scss"; diff --git a/front_end/stylesheets/filters.scss b/front_end/stylesheets/filters.scss new file mode 100644 index 0000000..3f10656 --- /dev/null +++ b/front_end/stylesheets/filters.scss @@ -0,0 +1,55 @@ +.orp-max-height-250 { + max-height: 250px; + overflow: scroll; +} + +.orp-space-between { + display: flex; + justify-content: space-between; +} + +.orp-applied-filters-container { + background-color: govuk-colour("light-grey"); + @include govuk-responsive-padding(2); + + .orp-applied-filter-tag { + display: inline-flex; + line-height: 1; + + a { + background-image: url("../images/icon-cross.svg"); + background-repeat: no-repeat; + background-position: center left 7px; + background-size: 10px 10px; + border: 1px solid govuk-colour("dark-grey"); + border-radius: 5px; + margin: govuk-spacing(1) govuk-spacing(1) govuk-spacing(1) 0; + // display: flex; + padding: govuk-spacing(1); + padding-left: govuk-spacing(5); + text-decoration: none; + + } + } +} + +.orp-publisher-search { + .orp-publisher-search__input { + position: relative; + background-image: url("../images/icon-search-black.svg"); + background-repeat: no-repeat; + background-position: center right -2px; + padding-right: 35px; + // background-size: $icon-size $icon-size; + + &::placeholder { + color: govuk-colour("dark-grey"); + } + + // If the user is in a dark forced colours mode, switch the search icon out + // for a light variant. + // @media (forced-colors: active) and (prefers-color-scheme: dark) { + // background-image: _search-icon($colour: govuk-colour("white")); + // } + } +} diff --git a/front_end/stylesheets/search.scss b/front_end/stylesheets/search.scss index 9d7442c..0c31c25 100644 --- a/front_end/stylesheets/search.scss +++ b/front_end/stylesheets/search.scss @@ -27,7 +27,7 @@ height: 44px; background-image: url("../images/icon-search.svg"); background-repeat: no-repeat; - background-position: 11px 50%; + background-position: 50% 50%; background-size: 22px 22px; overflow: hidden; transition: background-color 0.3s ease; @@ -55,4 +55,4 @@ // background-size: 30px 22px; } } -} \ No newline at end of file +} diff --git a/orp/config/settings/base.py b/orp/config/settings/base.py index d448fa4..a86b3f8 100644 --- a/orp/config/settings/base.py +++ b/orp/config/settings/base.py @@ -231,7 +231,7 @@ # Service SERVICE_NAME: str = "Open Regulation Platform" -SERVICE_NAME_SEARCH: str = "Search for regulatory provisions" +SERVICE_NAME_SEARCH: str = "Open Regulation Platform" CONTACT_EMAIL: str = "paymentpracticesreporting@businessandtrade.gov.uk" # Cookies diff --git a/orp/config/urls.py b/orp/config/urls.py index ffa054a..0183b39 100644 --- a/orp/config/urls.py +++ b/orp/config/urls.py @@ -9,12 +9,9 @@ import core.views as core_views urlpatterns = [ + path("", orp_views.search, name="search"), + # If we choose to have a start page with green button, this is it: # path("", core_views.home, name="home"), - # Uncomment the above line and comment out - # the two lines below to switch to the app - # home page. - path("", core_views.hello_world, name="hello_world"), - path("home/", core_views.home, name="home"), path("healthcheck/", core_views.health_check, name="healthcheck"), path( "accessibility-statement/", @@ -33,7 +30,7 @@ core_views.hide_cookie_banner, name="hide-cookie-banner", ), - path("search/", orp_views.search, name="search"), + # path("search/", orp_views.search, name="search"), ] if settings.DJANGO_ADMIN: diff --git a/orp/core/forms.py b/orp/core/forms.py index e8a01bd..87fd630 100644 --- a/orp/core/forms.py +++ b/orp/core/forms.py @@ -27,15 +27,15 @@ class RegulationSearchForm(forms.Form): query = forms.CharField( required=False, - label="Enter the sector, business activity or topic you want to find regulations for.", # noqa: E501 - help_text="For example, Construction, Health and Safety, or Food", + label="Search", + help_text="", widget=forms.TextInput( attrs={ "class": "govuk-input", "id": "query", "name": "query", "type": "search", - "placeholder": "Search for regulations", + "placeholder": "", } ), ) diff --git a/orp/orp_search/templates/orp.html b/orp/orp_search/templates/orp.html index f95f9be..e3bb61a 100644 --- a/orp/orp_search/templates/orp.html +++ b/orp/orp_search/templates/orp.html @@ -10,18 +10,20 @@ {% else %}
-

Search for regulatory provisions

-
-
- -
- {{ form.query }} - -
-
-
+

Find laws and regulations for business

+

From: Department for Business + and Trade

+ +

+

Find information to help UK businesses follow regulations.

+

This finder includes UK legislation, guidance from regulators and government and industry + standards from the British Standards Institute.

+

Search using keywords or use the filters to search by the publishing organisation, document + types or regulatory area.

+

You can also use this dataset and its metadata as an application + programming interface + (API).

{% if truncated %}
@@ -33,238 +35,230 @@

Search for regulatory provisions

{% endif %}
-
-
- Clear all filters -
-
-

7,870 results

-
-
- Download search results as CSV - file -
-
-
-
-
-
- -

- Document type -

- -
- 1 selected -
-
-
- - -
-
- - -
-
- - -
-
-
+
+ +
+ {{ form.query }} +
-
-

- Updated -

-
- - Updated after +
+
+ +

+ Document type +

-
- For example, 27 3 2007 -
-
-
-
- - -
+ +
+
+ +
-
-
- - -
+
+ +
-
-
- - -
+
+ +
-
-
- - Updated before +
+
+
+ +

+ Published by +

-
- For example, 27 3 2007 + +
+ +
+ +
-
-
-
- - -
+
+
+ +
-
-
- - -
+
+ +
-
-
- - -
+
+ +
-
-
-
-
-
-
-
- -

- Status -

- -
- 1 selected +
+ +
-
-
- - -
-
- - -
-
- - -
+
+ +
-
-
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
-
- - - Regulators - - -
- Regulators filter here -
-
+
-
- - - Topics - - -
- Topics filter here -
-
- +

+ Download search results as CSV + file +

-
+
-
- {% if results %} -
-

- {{ results|length }} matches found. +

+

4,123 documents

+

+ Clear all filters

- {% for result in results %} -
-

- - {{result.title}} - - ({{result.number_of_reports}} reports) -

+
+ + +
+
+
+ + +
+
+
+
+
+ {% if results %} +
+

+ {{ results|length }} matches found. +

+ {% for result in results %} +
+

+ + {{result.title}} + + {{result.published_date}} +

+

+ Regulation: {{ result.document_type }}
{{ result.last_updated }} +

+
+ {% endfor %} +
+ {% else %} + {% if form.is_bound %} +

+ We didn't find any regulations for that search. +

- Company Number: {{ result.company_number }}
{{ result.address_snippet }} + Please try searching again using different search terms.

+ {% endif %} + {% endif %}
- {% endfor %}
- {% else %} - {% if form.is_bound %} -

- We didn't find any regulations for that search. -

-

- Please try searching again using different search terms. -

- {% endif %} - {% endif %}
- {% endif %}
-{% endblock %} \ No newline at end of file +{% endif %} +
+{% endblock %} From e03afa0b18418ae994fbac2e468af5236c7de7f4 Mon Sep 17 00:00:00 2001 From: Greg Barnes Date: Tue, 8 Oct 2024 14:29:02 +0100 Subject: [PATCH 2/2] Adds helpers CSS, inlines sorting select --- front_end/stylesheets/application.scss | 1 + front_end/stylesheets/filters.scss | 10 ---------- front_end/stylesheets/helpers.scss | 17 +++++++++++++++++ orp/orp_search/templates/orp.html | 18 ++++++++++-------- 4 files changed, 28 insertions(+), 18 deletions(-) create mode 100644 front_end/stylesheets/helpers.scss diff --git a/front_end/stylesheets/application.scss b/front_end/stylesheets/application.scss index f3b16e5..9dd6be1 100644 --- a/front_end/stylesheets/application.scss +++ b/front_end/stylesheets/application.scss @@ -15,3 +15,4 @@ $govuk-image-url-function: frontend-image-url; @import "./search.scss"; @import "./inset_text.scss"; @import "./filters.scss"; +@import "./helpers.scss"; diff --git a/front_end/stylesheets/filters.scss b/front_end/stylesheets/filters.scss index 3f10656..5531fad 100644 --- a/front_end/stylesheets/filters.scss +++ b/front_end/stylesheets/filters.scss @@ -1,13 +1,3 @@ -.orp-max-height-250 { - max-height: 250px; - overflow: scroll; -} - -.orp-space-between { - display: flex; - justify-content: space-between; -} - .orp-applied-filters-container { background-color: govuk-colour("light-grey"); @include govuk-responsive-padding(2); diff --git a/front_end/stylesheets/helpers.scss b/front_end/stylesheets/helpers.scss new file mode 100644 index 0000000..a0c3189 --- /dev/null +++ b/front_end/stylesheets/helpers.scss @@ -0,0 +1,17 @@ +.orp-\!-no-text-wrap { + white-space: nowrap; +} + +.orp-max-height-250 { + max-height: 250px; + overflow: scroll; +} + +.orp-flex { + display: flex; + align-items: center; +} + +.orp-flex--space-between { + justify-content: space-between; +} diff --git a/orp/orp_search/templates/orp.html b/orp/orp_search/templates/orp.html index e3bb61a..b465f98 100644 --- a/orp/orp_search/templates/orp.html +++ b/orp/orp_search/templates/orp.html @@ -188,7 +188,7 @@

-
+

4,123 documents

- - +
+ + +