Use layouts for worldwide organisation pages - #5746
Merged
Merged
Conversation
- will be needed for worldwide organisation pages - little bit untidy to start with, but planning on cleaning up and refactoring in a following commit
- for worldwide organisation pages - set new layout in controller - add extra bits into presenter, for page-title partial
- was previously in a full width column where a quarter width made sense, but now constrained to a 2/3rds column
- metadata component is almost exactly the same, except link text is bold (could probably have an option on the component for this) and order of news/part of changes - do a bit of work in the presenter to maintain some of the existing code, as it is still used elsewhere - improve the logic around showing the metadata in page-title, although still not great, will iterate shortly
- allows it to move to the correct side on a right to left language page
andysellick
force-pushed
the
worldwide-org-layout
branch
from
September 1, 2026 12:40
756052b to
382a375
Compare
- use CSS grid to achieve a better layout - uses row spanning to allow elements to occupy more than one row, cutting down on excess space when these pieces of the page are varying heights
andysellick
force-pushed
the
worldwide-org-layout
branch
from
September 1, 2026 13:00
382a375 to
9b41059
Compare
andysellick
marked this pull request as ready for review
September 1, 2026 13:36
andysellick
changed the title
Contributor
Author
|
Thanks @AshGDS. I've just pushed another commit as I spotted a problem with the new grid layout. Basically grid can't exactly replicate the GOVUK grid (see commit message) but I've found a middle ground option that seems to be pretty close. Works fine on desktop, just a few pixels out just before it drops to mobile. Take a look and let me know what you think. Some screenshots (annotated to compared the CSS grid with the GOVUK grid beneath it):
|
- slight problem with this layout - 66.6666667% (or defining the main column as two thirds) doesn't work properly because we have a column gap - ideally we'd use `2fr 1fr` here because that takes into account the column gap and should make things nice, but it doesn't quite line up properly - so this is the best solution I've found, it lines up when the screen is wider than the page, and there's only a few pixels out just before it collapses to mobile
andysellick
force-pushed
the
worldwide-org-layout
branch
from
September 1, 2026 14:46
2bf6ff5 to
2f1181d
Compare
This branch was previously deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Example worldwide organisation pages:
This change means these pages aren't using the
headerpartial inworldwide_organisationanymore, but this is relied upon by other pages. We might be able to remove it after this and #5749 are merged.There's also probably some CSS for the thing that the metadata component is being used for that can be removed after these two PRs are merged.
Why
Jira card: https://gov-uk.atlassian.net/browse/[CARD-ID]
Visual changes
Possibly the most important part of this PR is the final commit, where I've refactored the header partial to use CSS grid instead of the GOVUK grid, in an attempt to fix the problem of varying height content for different things (lead para, metadata, translation nav) and the layout of elements on desktop compared with the ordering of the same elements on mobile. I think this is a good solution, but it probably needs further testing and interation.
This PR also fixes some obvious layout and spacing problems in the existing pages, particularly where some components are vertically too close together.
Embassy page on desktop. Note the increased spacing between elements, increased H1 size, and better alignment of elements overall.
Same page on mobile. Note the increased spacing. I've also switched the news/part of section to use the metadata component, which looks very similar but has bold links. I think that's okay as it's a bit more consistent (with the other links in the sidebar on desktop).
Bonus improvement on https://www.gov.uk/government/publications/breast-screening-helping-women-decide