Skip to content

Commit

Permalink
WCM-436 Implement the first design of search v2 (#335)
Browse files Browse the repository at this point in the history
Many changes are in this large piece of work.

# Search Functionality

* Feature parity with v1 search except search exclusions which were
removed
* Search is performed using Wagtail's search capabilities
* All new views instrumented with new detailed GTM functionality for
performance analysis

# Interface

* Complete redesign of the search page
  * Searching for pages, people and teams has been unified into one page
* "All" search category gives an overview of matching pages, people and
teams
* Opt-in / opt-out functionality connected to the
`user.enable_v2_search` flag:
   * Opt-in invitation banner appears on all v1 search pages
   * Opt-out banner appears on all pages, if user is opted in
   * New view, template to support it
* Users will be redirected from v1 to v2 search and vice versa depending
on their `user.enable_v2_search` status
* For opted-in users, implemented a new site-wide header and navigation:
   * Unified search bar replacing two distinct bars
   * Moved site navigation below the red line in the header
   * Moved the new bar into the new navigation area
* Moved the profile widget into the top space where the old search bar
used to be
* Reworked the navigation design and states on desktop and mobile
according to the new designs
* Top header bar CSS completely reworked to better fit govuk grid
guidelines and the design, as well as responsive layout considerations,
if not the govuk CSS implementation
* Django template structure reworked slightly to make post-beta
rationalisation easier
* Feedback mechanisms adopted:
* used new django app taking functionality from
https://github.com/uktrade/jml
* linked from the beta banner, a new form to submit detailed feedback to
new model and send email notification
* a new "star rating" widget that submits data to GTM and triggers the
feedback form

# Other / behind the scenes changes

* Put `TODO [DWPF-454]` comments in the codebase wherever beta-specific
functionality is implemented, making it easier to cleanup the codebase
at the end of the beta
* Upgraded gov-frontend NPM package to the latest version, including
several changes to HTML nodes for compatibility (e.g. `span` => `p`
* Removed all hex value colour definitions from CSS, replacing with SCSS
vars or functions as appropriate

[DWPF-454]:
https://uktrade.atlassian.net/browse/DWPF-454?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

> NB requires extra ENV vars:

---------

Co-authored-by: Sam Dudley <[email protected]>
Co-authored-by: Cameron Lamb <[email protected]>
  • Loading branch information
3 people authored Apr 18, 2023
1 parent c9563d4 commit 349eb70
Show file tree
Hide file tree
Showing 77 changed files with 2,553 additions and 2,383 deletions.
4 changes: 3 additions & 1 deletion .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ jobs:
command: make build
- run:
name: install npm packages
command: npm ci
command: |
nvm install 18
npm ci
- run:
name: build webpack
command: npm run build
Expand Down
4 changes: 4 additions & 0 deletions .env.ci
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,9 @@ PROFILE_EDITED_EMAIL_TEMPLATE_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx
# Profile deleted
PROFILE_DELETED_EMAIL_TEMPLATE_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx

# Beta feedback notification
FEEDBACK_NOTIFICATION_EMAIL_TEMPLATE_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx

# Hawk authentication
HAWK_INCOMING_ACCESS_KEY=xxx
HAWK_INCOMING_SECRET_KEY=xxx
Expand All @@ -54,4 +57,5 @@ PERSON_UPDATE_WEBHOOK_URL=
# Home page
HIDE_NEWS=False

FEEDBACK_NOTIFICATION_EMAIL_RECIPIENTS="[email protected],"
# TESTS_KEEP_DB=1
3 changes: 3 additions & 0 deletions .env.example
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ [email protected]
PROFILE_DELETION_REQUEST_EMAIL_TEMPLATE_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx
PROFILE_EDITED_EMAIL_TEMPLATE_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx
PROFILE_DELETED_EMAIL_TEMPLATE_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx
FEEDBACK_NOTIFICATION_EMAIL_TEMPLATE_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx

# Hawk authentication
HAWK_INCOMING_ACCESS_KEY=xxx
Expand Down Expand Up @@ -99,3 +100,5 @@ IMPORT_USER_PWD=

# Home page
HIDE_NEWS=False

FEEDBACK_NOTIFICATION_EMAIL_RECIPIENTS="[email protected],"
3 changes: 3 additions & 0 deletions Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -156,3 +156,6 @@ e2e-codegen:
poetry run playwright codegen http://localhost:8000
mv .env.orig .env
docker stop wagtail-test-server

dump-db:
pg_dump digital_workspace -U postgres -h localhost -p 5432 -O -x -c -f dw.dump
10 changes: 6 additions & 4 deletions assets/js/application.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
const images = require.context('../images', true)
const imagePath = (name) => images(name, true)
import "htmx.org/dist/htmx.js";

require.context('govuk-frontend/govuk/assets');
import { initAll } from 'govuk-frontend';
const images = require.context("../images", true);
const imagePath = (name) => images(name, true);

require.context("govuk-frontend/govuk/assets");
import { initAll } from "govuk-frontend";
initAll();
5 changes: 2 additions & 3 deletions assets/js/peoplefinder.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,2 @@
import 'htmx.org/dist/htmx.js';
import 'cropperjs/dist/cropper.css';
export { default as Cropper } from 'cropperjs';
import "cropperjs/dist/cropper.css";
export { default as Cropper } from "cropperjs";
6 changes: 3 additions & 3 deletions assets/stylesheets/components/_home.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
section {
padding: 0 0 12px 0 !important;
margin: 0 0 12px 0;
border-bottom: 5px solid #cf102d;
border-bottom: 5px solid $brand-color-red;
}

p {
Expand Down Expand Up @@ -48,7 +48,7 @@

.quick-links {
background-color: govuk-colour("light-grey");
border-bottom: 5px solid #cf102d;
border-bottom: 5px solid $brand-color-red;
padding: 12px;
margin: 0;

Expand Down Expand Up @@ -147,7 +147,7 @@
// D and I
.news-item-3 {
order: 3;
border-bottom: 5px solid #0064C5;
border-bottom: 5px solid $govuk-brand-colour;
background-color: govuk-colour("light-grey");
.home-news-item-text-content {
padding: 12px;
Expand Down
29 changes: 16 additions & 13 deletions assets/stylesheets/components/_layout.scss
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
html {
box-sizing: border-box;
}
*, *:before, *:after {
*,
*:before,
*:after {
box-sizing: inherit;
}

.ws-video-embed {
iframe {
width: 100%!important;
height: calc(100vw * 0.30)
width: 100% !important;
height: calc(100vw * 0.3);
}
}

Expand All @@ -18,33 +20,34 @@ html {
}

.ws-primary-content {
border-top: 1px solid #b1b4b6;
padding-top: 20px;
border-top: 1px solid govuk-colour("mid-grey");
padding-top: 20px;
}

.ws-secondary-content {
border-top: 5px solid #cd1632;
border-top: 5px solid $brand-color-primary;
padding-top: 20px;
}

.ws-article-content {
border-top: 1px solid #b1b4b6;
border-top: 1px solid govuk-colour("mid-grey");
}

.ws-secondary-meta {
color: $govuk-secondary-text-colour;
}

.ws-related-topics {
border-top:3px solid $govuk-error-colour;
border-top: 3px solid $govuk-error-colour;
}

.ws-hide {
position: absolute !important; /* Outside the DOM flow */
height: 1px; width: 1px; /* Nearly collapsed */
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE 7+ only support clip without commas */
clip: rect(1px, 1px, 1px, 1px); /* All other browsers */
position: absolute !important; /* Outside the DOM flow */
height: 1px;
width: 1px; /* Nearly collapsed */
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE 7+ only support clip without commas */
clip: rect(1px, 1px, 1px, 1px); /* All other browsers */
}

.ws-children-2-col {
Expand Down
2 changes: 1 addition & 1 deletion assets/stylesheets/components/_news_article.scss
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@

h2 {
a {
color: #005ea5;
color: $govuk-link-colour;
}
}

Expand Down
47 changes: 31 additions & 16 deletions assets/stylesheets/components/_peoplefinder.scss
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
.separated > *:not(:last-child) {
padding-right: 10px;
margin-right: 10px;
border-right: 1px solid #b1b4b6;
border-right: 1px solid govuk-colour("mid-grey");
}

.p-0 {
Expand Down Expand Up @@ -66,7 +66,7 @@
}

.gds-border-bottom-1-grey {
border-bottom: 1px solid #b1b4b6;
border-bottom: 1px solid govuk-colour("mid-grey");
}

// Components
Expand Down Expand Up @@ -95,7 +95,7 @@

.pf-role-form {
padding: 20px;
border: 1px solid #b1b4b6;
border: 1px solid govuk-colour("mid-grey");
margin-bottom: 20px;

button {
Expand All @@ -112,15 +112,15 @@
}

.success {
border-left: 5px solid green;
border-left: 5px solid $govuk-success-colour;
}

.warning {
border-left: 5px solid orange;
border-left: 5px solid $brand-color-warning;
}

.error {
border-left: 5px solid #d4351c;
border-left: 5px solid $govuk-success-colour;
}
}

Expand Down Expand Up @@ -185,8 +185,9 @@
.pf-team-card {
height: 100%;
padding: 22.5px;
border: 1px solid #b1b4b6;
box-shadow: 7px 7px 0 #fff, 8px 8px 0 #b1b4b6;
border: 1px solid govuk-colour("mid-grey");
box-shadow: 7px 7px 0 govuk-colour("white"),
8px 8px 0 govuk-colour("mid-grey");
}

.pf-team-card__name {
Expand All @@ -201,7 +202,7 @@

.pf-team-card__metadata {
font-size: 14px;
color: #505a5f;
color: govuk-colour("dark-grey");
margin-bottom: 0;
}

Expand Down Expand Up @@ -239,7 +240,7 @@
margin-bottom: 0;
margin-left: 0.35em;
line-height: 1.6;
border-left: thin solid #000;
border-left: thin solid govuk-colour("black");

&:last-child {
border-left: none;
Expand All @@ -251,12 +252,12 @@
height: 0.6em;
margin-right: 0.1em;
vertical-align: top;
border-bottom: thin solid #000;
border-bottom: thin solid govuk-colour("black");
content: "";
}

&:last-child:before {
border-left: thin solid #000;
border-left: thin solid govuk-colour("black");
}
}

Expand Down Expand Up @@ -295,7 +296,7 @@
padding-bottom: 10px;

&:not(:last-child) {
border-bottom: 1px solid #f3f2f1;
border-bottom: 1px solid govuk-colour("light-grey");
}
}

Expand All @@ -313,7 +314,7 @@
}

.team-select__current-team {
color: #505a5f;
color: govuk-colour("dark-grey");
text-decoration: line-through;
}

Expand All @@ -334,10 +335,11 @@
display: flex;

&__picture {
margin-right: 15px;
width: 25%;
margin-right: 1rem;

img {
width: 200px;
max-width: 100%;
}

&.inactive-profile {
Expand All @@ -348,6 +350,8 @@
}

&__details {
width: 75%;

&__item {
margin-bottom: 5px;
}
Expand All @@ -361,3 +365,14 @@
width: 50%;
}
}

// @TODO [DWPF-454] remove .search-v2 class and merge all overrides into main declarations
.search-v2 {
.pf-team-card {
box-shadow: none;
}

.pf-team-card__name {
font-size: 19px;
}
}
Loading

0 comments on commit 349eb70

Please sign in to comment.