search

acteng / atip

Active Travel Infrastructure Platform
https://acteng.github.io/atip/
Apache License 2.0
22 stars 4 forks source link

Convert the scheme browse and area choose page to govuk style #270

Closed dabreegster closed 1 year ago

dabreegster commented 1 year ago

This is the next step to use the govuk design system, on our two simpler pages. I've tried my best to interpret https://design-system.service.gov.uk/styles/ and https://design-system.service.gov.uk/components/, but I (really hope!) we go through some kind of design review later, because there are plenty of unclear decisions made.

Compare: old homepage with new homepage, and old browse with new browse

https://github.com/acteng/atip/assets/1664407/181d3c35-6d86-4e11-93ef-0b540c08663f

In the step after this one, I'll convert our main edit page... or at least the sidebar. I haven't found much guidance yet for design patterns on maps, such as tooltips, changing cursors, hover effects, etc -- lots of the questions we've been asking anyway! I'll search/ask around to see if there's any guidance here yet.

Code style choices

Copying the sample HTML directly from govuk docs would severely pollute our codebase, and make it tough to check that we've converted all elements on every page to using the right CSS classes. So there are 3 ways we use govuk components:

1) New Svelte components that wrap something, like a group of radio buttons. The user doesn't care that govuk things are happening internally. 2) Automatically adding CSS classes to standard HTML elements, as long as they're under a <div class="govuk-prose"> 3) In "one-off" situations, directly use govuk HTML+CSS code. When the usage becomes more complex or we need the same pattern somewhere else, we can apply one of the two strategies above, but I feel it'd be premature refactoring at this point.

robinlovelace-ate commented 1 year ago

Based on the video bit :+1: to this, looks really good. Great work Dustin.

robinlovelace-ate commented 1 year ago

It gets away from the very vanilla feel, it may benefit from some post merge tweaks but to my eyes this is already a big improvement, even without the benefits of conformity from GDS perspective.

image

robinlovelace-ate commented 1 year ago

Interested to hear what @Pete-Y-CS, @Sparrow0hawk or others think also..