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

Rebuild landing page menu #4402

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

Rebuild landing page menu #4402

wants to merge 4 commits into from

Conversation

AshGDS
Copy link
Contributor

@AshGDS AshGDS commented Nov 15, 2024

⚠️ This repo is Continuously Deployed: make sure you follow the guidance ⚠️

What / Why

  • Adds a new main menu block, to replace the main navigation block
  • I created a new block as the backend will work differently now that the nesting is gone and there's headings. And I thought the git diff might look a bit too confusing.
  • I haven't removed the main_navigation block from the code as there's some backend related stuff and backend docs I wasn't sure what to do with.
  • NB: The backend devs will need to do some work to populate the links properly again.
  • Trello card

Screenshots?

image image

Button left-alignment quirk

  • In the designs the button is always perfectly left aligned to the govuk-width-container.
  • However, as the expanded button styles are different to the collapsed styles, the button has different padding depending on whether it's expanded or collapsed.
  • Currently I have given the collapsed button the same padding as the expanded one. However this makes it not look perfectly left aligned when it's collapsed.
  • I can make it more aligned when collapsed, but each option has tradeoffs. The first option would cause layout shift,
  • See videos below for the two options:

1. Current styles (no layout shift, but worse left alignment when collapsed)

Shift.1.mov

2. Different Padding (which causes layout shift, but better left alignment when collapsed)

Button.Shift.2.mov

3. -15px margin left (no layout shift, better left alignment, but the tab border when expanded won't be left aligned)

Option.3.mov

@govuk-ci govuk-ci temporarily deployed to govuk-frontend-app-pr-4402 November 15, 2024 16:59 Inactive
@govuk-ci govuk-ci temporarily deployed to govuk-frontend-app-pr-4402 November 15, 2024 17:03 Inactive
This will replace the main navigation block. Have created a new block to make the diff/changes easier to process.
@govuk-ci govuk-ci temporarily deployed to govuk-frontend-app-pr-4402 November 15, 2024 17:05 Inactive
Work with a close deadline needs to be carried out, and this is erroring on travel-advice.js making it a bit of a blocker for our project deadline. Therefore, lower the coverage for now.
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