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

Reduce applications table action links layout #3206

Merged
merged 3 commits into from
Oct 3, 2024

Conversation

yndajas
Copy link
Member

@yndajas yndajas commented Oct 1, 2024

Trello

At present, on viewports of between 940px and 1199px, the actions links/buttons are various shades of messy, owing to the fact that they share a single column, use flex alignment, and are of different widths

This updates the layout so that the actions links/buttons are nicely aligned and consistently positioned at all viewport sizes and regardless of which of the four links/buttons appear in the given tables

Screenshots

Before

940px

image

1199px

image

After

940px

image

1199px

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 reduce-applications-table-action-links-layout branch 3 times, most recently from 5fce1c2 to f859455 Compare October 1, 2024 17:20
Copy link
Contributor

@Gweaton Gweaton left a comment

Choose a reason for hiding this comment

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

Looks good, nice work

app/helpers/application_table_helper.rb Outdated Show resolved Hide resolved
Our table helper and table template are modified versions taken from
GOV.UK Publishing Components. This extends them further
At present, on viewports of between 940px and 1199px, the actions
links/buttons are various shades of messy, owing to the fact that they
share a single column, use `flex` alignment, and are of different widths

This updates the layout so that the actions links/buttons are nicely
aligned and consistently positioned at all viewport sizes and regardless
of which of the four links/buttons appear in the given tables

- The visible text is simplified, favouring a combination of a visible
  column heading of "Access" or "Permissions" combined with single-word
  actions. The text read by a screen reader in each column should remain
  the same: the part no longer visible in individual links/buttons is
  simply moved to the visually-hidden `span`
- The access column is moved before the permissions column to make the
  column order more in sync between the two tables
- The `description` column width is increased, retaining a good
  whitespace distribution across the table and potentially reducing the
  line count for apps with longer descriptions
This makes it a bit clearer what the various passed in strings are for
@yndajas yndajas force-pushed the reduce-applications-table-action-links-layout branch from 05895dd to de5061b Compare October 3, 2024 15:53
@yndajas yndajas enabled auto-merge October 3, 2024 15:54
@yndajas yndajas merged commit 3c45c7c into main Oct 3, 2024
15 checks passed
@yndajas yndajas deleted the reduce-applications-table-action-links-layout branch October 3, 2024 15:57
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