Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New "all content" finder UI tweaks #3495

Draft
wants to merge 16 commits into
base: main
Choose a base branch
from
Draft

New "all content" finder UI tweaks #3495

wants to merge 16 commits into from

Conversation

csutter
Copy link
Contributor

@csutter csutter commented Oct 7, 2024

This includes an assortment of minor design tweaks to the new UI for the "all content" finder after a design review.

Review app: https://finder-frontend-pr-3495.herokuapp.com/search/all

Before

image

After

image

@govuk-ci govuk-ci temporarily deployed to finder-frontend-pr-3495 October 7, 2024 16:30 Inactive
This causes the button's text to be added to the query parameters, which
we don't need and clutters up the analytics.
- Move overall UI (except breadcrumbs) into a `app-all-content-finder`
  container
- Add margin to container on tablet+
This needs to be made more resilient for Safari (and some older
browsers) by targeting the marker's (triangle) pseudo-element.
This turned out to be a nasty Webkit bug, which generally seems to be
poor at dealing with text-decoration-thickness.
- Inline spelling suggestion code from old UI partial
- Add wrapper div with appropriate margins
This removes the separate page heading, and uses the variant of the
`search` component that comes with a heading-wrapped label instead to
avoid duplication.
- Reduce margin between heading and "pills"
- Increase gap between "pills"
- Increase bottom padding of component
This still creates a mildly jarring change at 770px but makes things
look nicer on _some_ portrait orientation tablets (iPad is still too
wide to get tablet breakpoint).
There's a `govuk-width-container` within another one, which is
unnecessary and causes display issues at some breakpoints.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants