There were 3 pages where we had a search button inline with a text box.
This replaces the search button with a button from govuk-frontend and
updates the way we style this button to use BEM, which is the style we
now want to use.
Turns each pill item (already full height) into a
flex container with its content as a column. Uses
this to align the content (the pill label) to the
middle of the column.
Paired with @aliuk2012 on the implementation and
with a view to making the component generic enough
to be used on digital marketplace apps as well.
These changes came from that session.
They include:
- removal of an unused `data-accept-cookies`
attribute
- removal of `govuk-!-padding-top-4` class and
moving of associated styles into component CSS
- swapping out the `aria-label` on the parent
element for an `aria-describedby` linked to the
h2 to have one thing labelling the banner region
- removal of unused CSS and any already provided
by the govuk-button class
- inclusion of @import's for styles attached to
govuk-body and govuk-button classes
Copies HTML and Sass from GOV.UK Pubishing
components cookie-banner with changes to content
and functionality to better suit Notify.
Changes are:
- adds a 'reject' button which the GOV.UK
code doesn't have
- adds Sass from the GOV.UK Frontend button
component which the GOV.UK version used so
is included here
- removed click tracking from cookie banner
Paired with @aliuk2012 on the implementation and
with a view to making the component generic enough
to be used on digital marketplace apps as well.
These changes came from that session.
They include:
- removal of an unused `data-accept-cookies`
attribute
- removal of `govuk-!-padding-top-4` class and
moving of associated styles into component CSS
- swapping out the `aria-label` on the parent
element for an `aria-describedby` linked to the
h2 to have one thing labelling the banner region
- removal of unused CSS and any already provided
by the govuk-button class
- inclusion of @import's for styles attached to
govuk-body and govuk-button classes
Copies HTML and Sass from GOV.UK Pubishing
components cookie-banner with changes to content
and functionality to better suit Notify.
Changes are:
- adds a 'reject' button which the GOV.UK
code doesn't have
- adds Sass from the GOV.UK Frontend button
component which the GOV.UK version used so
is included here
- removed click tracking from cookie banner
Our table rows take up 65px vertical space.
We also have things that look like rows that say:
- there are no rows
- there are more rows than can be shown on screen
This commit makes them appear the same height.
Their priority should always add up to 100%. Currently we have to ensure
this by hand. Adding this form means there’s no way to not set their
combined priorities to 100%. And it’s a bit more of an intuitive UI than
two textboxes on separate pages.
The cookie_message block was part of GOV.UK
template but is not included in the GOV.UK
Frontend template.
This adds it back in along with JS to set the
cookies from GOV.UK template and styles, taken
from the Design System's website (which I assume
has the right colour contrast).
The cookie_message block was part of GOV.UK
template but is not included in the GOV.UK
Frontend template.
This adds it back in along with JS to set the
cookies from GOV.UK template and styles, taken
from the Design System's website (which I assume
has the right colour contrast).
The cookie_message block was part of GOV.UK
template but is not included in the GOV.UK
Frontend template.
This adds it back in along with JS to set the
cookies from GOV.UK template and styles, taken
from the Design System's website (which I assume
has the right colour contrast).
Adds ability to have inline radio buttons using the fieldset.inline
functionality from gov.uk elements.
Then implements this for the radio buttons for choosing postage
class.
Also overrides the gov uk elements styling for the inline radio
buttons to place them slightly closer together as this looks
better.
The mixture of three column/two column layouts on this page has always
looked a bit disjointed. And since the left column will only even
contain the names of months, which are short, it doesn’t need a full
half of the page width.
It makes them get out of alignment with other things in sticky footers.
The problem of buttons getting too close to the bottom of the window can
be fixed with some min-height on the container instead.
Otherwise you have a visible copy of the text underlapping the text in the textbox. Which, when they don’t quite align makes the text look bold. Seems to be more noticeable on some browsers/operating systems than others, but a bug all the same.
When testing with the JAWS screenreader, we found
a bug around getting it to announce the name of a
fieldset when we ask the user to select from it.
Bug on pivotal:
https://www.pivotaltracker.com/story/show/165565088
The flows for adding a new template and moving a
template/folder both need the user to select an
option from a radio group. When we add the radio
group to the UI, we need to move focus to it so
the user is in the right place to choose an
option.
The expectation of the original code was that
focusing the field set's legend would work like
focusing the heading of a section of content and
announce the label of it. This didn't happen with
JAWS. This tries to achieve the same by focusing
the whole fieldset instead.
When doing this we also hide the focus style, to
follow the convention for this across www.gov.uk.
Most GP practice services are named after the practice, which is the
organisation.
So rather than make people re-type the name of their organisation (and
potentially make a typo) let’s just let them say ‘yes, that’s the name
of my organisation’.
Our usage for these browsers in the last month is down to 0.2% of all
users, or 14 individual users, according to Google Analytics.
These users also visit about half the number of pages per sessions,
suggesting that they’re not signed in.
Clicking the 'Done' button resets the module to
its default state. 'Done' implies you've
completed your selection so this doesn't make
sense.
This changes it so any selection made will be
confirmed when 'Done' is clicked.
If you can see a folder but not its parents we concatenate the
breadcrumb into one link.
This styles folder separators inside these links a bit differently to
make them do a bit less visual separation than the ones outside the
links.
It looks weird to have two different visual treatments for showing a
navigable hierarchy.
I reckon losing the slash won’t make things less folder like – Windows
for example uses chevrons as foler separators.
It was a bit inconsistent depending on whether there was/wasn’t a search
box or channel tabs on the page.
I found this just too complicated to do in pure CSS, so added a new
spacing class which gets toggled on and off.
Now that there’s a bit more stuff in the service name area at the top
of the page it looks a bit cramped. Moving the heading down gives it a
bit more space to breath, and associates the heading a bit more closely
with the content after it.
This commit aligns and spaces elements on the page to show which are
related to others.
This needs some adjustment now because we potentially have more things
on the page now – we need to make space for them.
