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

Make applications table vertical on small screens #2989

Merged
merged 2 commits into from
Jul 3, 2024

Conversation

yndajas
Copy link
Member

@yndajas yndajas commented Jun 27, 2024

Trello

Since #2341, we've had support for making tables use a vertical layout on smaller viewports, similar to how the summary list reflows on smaller viewports (the end result is something of a hybrid of table and summary list layouts)

We already use this on the users screen. This feels like something that would be useful on the applications screen too

Screenshots

Medium screen

Before

image

After

image

Small screen

Before

image

After

image

This application is owned by the publishing platform team. Please let us know in #govuk-publishing-platform when you raise any PRs.

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

Follow these steps if you are doing a Rails upgrade.

@yndajas yndajas force-pushed the use-vertical-layout-on-applications-table branch from 0625309 to a27dea6 Compare June 27, 2024 17:01
@yndajas yndajas force-pushed the fix-applications-table-actions-column branch from cdb506e to fa48f49 Compare June 28, 2024 11:33
@yndajas yndajas force-pushed the use-vertical-layout-on-applications-table branch from a27dea6 to 9ade5af Compare June 28, 2024 11:33
Copy link
Contributor

@callumknights callumknights left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Absolutely get the need to change this, as the comment is wrong. But it's also not super relevant to the PR. At the same time it is such a minor fix it doesn't seem worth it's own, I'm uncertain...

@yndajas yndajas force-pushed the use-vertical-layout-on-applications-table branch from 9ade5af to 8524a17 Compare June 28, 2024 13:06
@yndajas yndajas changed the base branch from fix-applications-table-actions-column to fix-test-comment June 28, 2024 13:07
Base automatically changed from fix-test-comment to main June 28, 2024 15:20
@yndajas yndajas force-pushed the use-vertical-layout-on-applications-table branch from 8524a17 to 1bc95f4 Compare June 28, 2024 15:34
yndajas added 2 commits June 28, 2024 16:35
Since #2341, we've had support for making tables use a vertical layout
on smaller viewports, similar to how the summary list reflows on smaller
viewports (the end result is something of a hybrid of table and summary
list layouts)

We already use this on the users screen. This feels like something that
would be useful on the applications screen too

I've added an optional `visually_hidden` flag on table head cells here,
which when set to `true` will result in a class that removes padding
from the header cell. The current actions column on the applications
page has a visually hidden header, so this allows us to remove the
padding from visually hidden header cells while retaining the content

Per f0a8f53, we switch to regex-based matching for some tests. The
vertical layout implementation adds some hidden text in table cells that
would otherwise break these `assert_select`s
These are useful for testing out applications page layouts with more
realistic length data
@yndajas yndajas force-pushed the use-vertical-layout-on-applications-table branch from 1bc95f4 to 0404d75 Compare June 28, 2024 15:36
@yndajas yndajas requested a review from callumknights June 28, 2024 15:49
@yndajas yndajas merged commit 238e77c into main Jul 3, 2024
15 checks passed
@yndajas yndajas deleted the use-vertical-layout-on-applications-table branch July 3, 2024 08:56
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