darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-19 14:03:52 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
203393de235631db0ce3c38dec85da170a634fba
notifications-admin/app/assets/stylesheets/components/pill.scss

101 lines
1.5 KiB
SCSS
Raw Normal View History

Allow filter links to be used in combination Means you can see, for example emails that have failed. Means adding: - logic to generate links which can have a type parameter, a status parameter, or both - a ‘pill’ UI component for seeing which filters you currently have applied - some logic to change the page title based on which filters you have applied
2016-04-13 12:50:28 +01:00
.pill {
display: flex;
Mark up ‘pill’ component as being tabs Currently it’s not possible for a screen reader user to know which financial year they’re looking at. From the accessibility report: > The financial year links are contained in a navigation region - > tabbing or arrowing through only reads out the links, not the main > information of "2016 to 2017 financial year" - that information is > vital for understanding the page content. This problem also applies to other pages which use the `pill` component, which is effectively tabbed navigation (that reloads the page rather than showing or hiding content on the page). There are specific ARIA attributes that can be used to mark up a navigation as being tabbed. This commit: - adds those attributes - makes the selected ‘tab’ visible to screenreaders and keyboard focusable - adds a visual focus indicator to the selected tab - adds `id`s to the parts of the page that are controlled by the tabs so that they are labelled as such This also means changing the pill component from being a `<nav>` to a `<ul>` because `tablist` is not a valid `role` for a `nav`. Mostly follows the example here: http://accessibility.athena-ict.com/aria/examples/tabpanel2.shtml
2017-02-14 14:21:36 +00:00
li {
width: 25%;
flex-grow: 1;
text-align: left;
Add comment to explain combining of flex and float Just so no-one thinks it’s redundant and removes it.
2018-11-13 14:22:48 +00:00
/*
For browsers that don’t support flexbox, use float instead.
Float does not create floating of flex item, and do not take it
out-of-flow. So this is ignored by browsers that support flexbox.
See: https://www.w3.org/TR/css-flexbox-1/#flex-containers
*/
Fix folder navigation in IE 10 IE10 doesn’t support flexbox. We can work around this using floats. I think the flexbox will override it, so will be ignored by newer browsers.
2018-11-13 14:01:19 +00:00
float: left;
Mark up ‘pill’ component as being tabs Currently it’s not possible for a screen reader user to know which financial year they’re looking at. From the accessibility report: > The financial year links are contained in a navigation region - > tabbing or arrowing through only reads out the links, not the main > information of "2016 to 2017 financial year" - that information is > vital for understanding the page content. This problem also applies to other pages which use the `pill` component, which is effectively tabbed navigation (that reloads the page rather than showing or hiding content on the page). There are specific ARIA attributes that can be used to mark up a navigation as being tabbed. This commit: - adds those attributes - makes the selected ‘tab’ visible to screenreaders and keyboard focusable - adds a visual focus indicator to the selected tab - adds `id`s to the parts of the page that are controlled by the tabs so that they are labelled as such This also means changing the pill component from being a `<nav>` to a `<ul>` because `tablist` is not a valid `role` for a `nav`. Mostly follows the example here: http://accessibility.athena-ict.com/aria/examples/tabpanel2.shtml
2017-02-14 14:21:36 +00:00
}
Make the flow of using templates better For users who: - want to send messages from a template - want to edit templates For developers: - who need to get the ID of a template This commit mainly cleans up the choose template page so there are less options, and the options that are there are less wordy. This means: - moving ‘send yourself a test’ onto the send messages page, and making it button - stripping a lot of stuff out of the ‘send from API’ page, so it’s more obvious what the template ID is
2016-04-18 11:10:47 +01:00
a,
Fix invalid nesting of HTML elements In HTML you generally can’t nest an inline level element inside a block level one, if you want your HTML to validate. There were a couple of places where we were using a `<span>` as a containing element: - inside every table cell (think we inherited this from Digital Marketplace) - in the ‘pill’ navigation component for the selected tab This meant that when we put components like big number inside these, the resulting HTML was invalid, because big number is built with a bunch of `<div>`s, which are block level. This commit removes the use of a `<span>` tag in these places, and replaces it with a `<div>`. Nesting block level elements in fine in HTML.
2017-02-14 15:09:54 +00:00
&-selected-item {
Allow filter links to be used in combination Means you can see, for example emails that have failed. Means adding: - logic to generate links which can have a type parameter, a status parameter, or both - a ‘pill’ UI component for seeing which filters you currently have applied - some logic to change the page title based on which filters you have applied
2016-04-13 12:50:28 +01:00
display: block;
Fix status counter in old IE versions We use flexbox to lay out the counts of sending/delivered/failed on the activity and job pages. flexbox makes the best use of the space when the numbers can be significantly different widths (eg 0 sending, 5000 delivered). Flexbox was only supported from IE 11 onwards [1]. And since we were setting the `display` property of the individual numbers to `block` they were rendering one-per-line on browsers that don’t support flexbox. This commit changes these items to be floated and a predefined width. In browsers that support it, flexbox seems to override these hard-coded widths. It’s not quite as good as the flexbox solution because: - it doesn’t adjust the widths in the nice way that flexbox does - it’s hard-coded to expect 4 items (we don’t have this component with any other number of items at the moment, so it won’t actually break anything) But it’s pretty much OK because: - it’s a lot better than the before - IE 8 and 9 combined only make up 5% of our users, and this will be a declining number - polyfilling flexbox would mean using Javascript, and we don’t serve working Javacript to IE 8 users anyway 1. http://caniuse.com/#feat=flexbox
2017-01-23 10:34:08 +00:00
float: left;
Mark up ‘pill’ component as being tabs Currently it’s not possible for a screen reader user to know which financial year they’re looking at. From the accessibility report: > The financial year links are contained in a navigation region - > tabbing or arrowing through only reads out the links, not the main > information of "2016 to 2017 financial year" - that information is > vital for understanding the page content. This problem also applies to other pages which use the `pill` component, which is effectively tabbed navigation (that reloads the page rather than showing or hiding content on the page). There are specific ARIA attributes that can be used to mark up a navigation as being tabbed. This commit: - adds those attributes - makes the selected ‘tab’ visible to screenreaders and keyboard focusable - adds a visual focus indicator to the selected tab - adds `id`s to the parts of the page that are controlled by the tabs so that they are labelled as such This also means changing the pill component from being a `<nav>` to a `<ul>` because `tablist` is not a valid `role` for a `nav`. Mostly follows the example here: http://accessibility.athena-ict.com/aria/examples/tabpanel2.shtml
2017-02-14 14:21:36 +00:00
box-sizing: border-box;
width: 100%;
Put counts into the notification filters We can filter notifications on the activity page by state. This commit adds counts to those filters. This is mainly so that we can consistently do the same thing on the job page later on.
2016-06-08 15:15:59 +01:00
padding: 10px;
Allow filter links to be used in combination Means you can see, for example emails that have failed. Means adding: - logic to generate links which can have a type parameter, a status parameter, or both - a ‘pill’ UI component for seeing which filters you currently have applied - some logic to change the page title based on which filters you have applied
2016-04-13 12:50:28 +01:00
}
a {
Give headline numbers a blue, not black background These numbers don’t look very clickable white-on-black. Blue is the colour of links, so lets see if they are more clickable in blue. The same clicking-a-big-number thing is also happening on the activity page, so this commit also changes the activity page to look the same.
2016-06-08 15:41:02 +01:00
$background: $link-colour;
background: $background;
color: $white;
border: 2px solid $background;
Allow filter links to be used in combination Means you can see, for example emails that have failed. Means adding: - logic to generate links which can have a type parameter, a status parameter, or both - a ‘pill’ UI component for seeing which filters you currently have applied - some logic to change the page title based on which filters you have applied
2016-04-13 12:50:28 +01:00
position: relative;
Put counts into the notification filters We can filter notifications on the activity page by state. This commit adds counts to those filters. This is mainly so that we can consistently do the same thing on the job page later on.
2016-06-08 15:15:59 +01:00
text-decoration: none;
cursor: pointer;
.pill-label {
text-decoration: underline;
}
Allow filter links to be used in combination Means you can see, for example emails that have failed. Means adding: - logic to generate links which can have a type parameter, a status parameter, or both - a ‘pill’ UI component for seeing which filters you currently have applied - some logic to change the page title based on which filters you have applied
2016-04-13 12:50:28 +01:00
Give headline numbers a blue, not black background These numbers don’t look very clickable white-on-black. Blue is the colour of links, so lets see if they are more clickable in blue. The same clicking-a-big-number thing is also happening on the activity page, so this commit also changes the activity page to look the same.
2016-06-08 15:41:02 +01:00
&:link,
&:visited {
color: $white;
}
Allow filter links to be used in combination Means you can see, for example emails that have failed. Means adding: - logic to generate links which can have a type parameter, a status parameter, or both - a ‘pill’ UI component for seeing which filters you currently have applied - some logic to change the page title based on which filters you have applied
2016-04-13 12:50:28 +01:00
&:hover {
Give headline numbers a blue, not black background These numbers don’t look very clickable white-on-black. Blue is the colour of links, so lets see if they are more clickable in blue. The same clicking-a-big-number thing is also happening on the activity page, so this commit also changes the activity page to look the same.
2016-06-08 15:41:02 +01:00
color: $light-blue-25;
Allow filter links to be used in combination Means you can see, for example emails that have failed. Means adding: - logic to generate links which can have a type parameter, a status parameter, or both - a ‘pill’ UI component for seeing which filters you currently have applied - some logic to change the page title based on which filters you have applied
2016-04-13 12:50:28 +01:00
}
&:active,
&:focus {
z-index: 10;
}
}
Fix invalid nesting of HTML elements In HTML you generally can’t nest an inline level element inside a block level one, if you want your HTML to validate. There were a couple of places where we were using a `<span>` as a containing element: - inside every table cell (think we inherited this from Digital Marketplace) - in the ‘pill’ navigation component for the selected tab This meant that when we put components like big number inside these, the resulting HTML was invalid, because big number is built with a bunch of `<div>`s, which are block level. This commit removes the use of a `<span>` tag in these places, and replaces it with a `<div>`. Nesting block level elements in fine in HTML.
2017-02-14 15:09:54 +00:00
&-selected-item {
Give headline numbers a blue, not black background These numbers don’t look very clickable white-on-black. Blue is the colour of links, so lets see if they are more clickable in blue. The same clicking-a-big-number thing is also happening on the activity page, so this commit also changes the activity page to look the same.
2016-06-08 15:41:02 +01:00
border: 2px solid $black;
outline: 1px solid rgba($white, 0.1);
position: relative;
Add grey lines to visually show level of nesting Uses some CSS to draw some grey lines to show which radios descend from which. I don’t feel like the intentation is enough, and it looks a bit messy because the circles of the radio buttons don’t have straight edges easily suggest visual alignment. Copies the design from conditionally revealing content in the design system: https://design-system.service.gov.uk/components/radios/#conditionally-revealing-content Implementation is done with pseudo elements, because borders can’t be positionned exactly enough.
2019-01-04 13:44:52 +00:00
z-index: 10;
Allow filter links to be used in combination Means you can see, for example emails that have failed. Means adding: - logic to generate links which can have a type parameter, a status parameter, or both - a ‘pill’ UI component for seeing which filters you currently have applied - some logic to change the page title based on which filters you have applied
2016-04-13 12:50:28 +01:00
color: $text-colour;
Mark up ‘pill’ component as being tabs Currently it’s not possible for a screen reader user to know which financial year they’re looking at. From the accessibility report: > The financial year links are contained in a navigation region - > tabbing or arrowing through only reads out the links, not the main > information of "2016 to 2017 financial year" - that information is > vital for understanding the page content. This problem also applies to other pages which use the `pill` component, which is effectively tabbed navigation (that reloads the page rather than showing or hiding content on the page). There are specific ARIA attributes that can be used to mark up a navigation as being tabbed. This commit: - adds those attributes - makes the selected ‘tab’ visible to screenreaders and keyboard focusable - adds a visual focus indicator to the selected tab - adds `id`s to the parts of the page that are controlled by the tabs so that they are labelled as such This also means changing the pill component from being a `<nav>` to a `<ul>` because `tablist` is not a valid `role` for a `nav`. Mostly follows the example here: http://accessibility.athena-ict.com/aria/examples/tabpanel2.shtml
2017-02-14 14:21:36 +00:00
&:focus {
Add grey lines to visually show level of nesting Uses some CSS to draw some grey lines to show which radios descend from which. I don’t feel like the intentation is enough, and it looks a bit messy because the circles of the radio buttons don’t have straight edges easily suggest visual alignment. Copies the design from conditionally revealing content in the design system: https://design-system.service.gov.uk/components/radios/#conditionally-revealing-content Implementation is done with pseudo elements, because borders can’t be positionned exactly enough.
2019-01-04 13:44:52 +00:00
z-index: 1000;
Mark up ‘pill’ component as being tabs Currently it’s not possible for a screen reader user to know which financial year they’re looking at. From the accessibility report: > The financial year links are contained in a navigation region - > tabbing or arrowing through only reads out the links, not the main > information of "2016 to 2017 financial year" - that information is > vital for understanding the page content. This problem also applies to other pages which use the `pill` component, which is effectively tabbed navigation (that reloads the page rather than showing or hiding content on the page). There are specific ARIA attributes that can be used to mark up a navigation as being tabbed. This commit: - adds those attributes - makes the selected ‘tab’ visible to screenreaders and keyboard focusable - adds a visual focus indicator to the selected tab - adds `id`s to the parts of the page that are controlled by the tabs so that they are labelled as such This also means changing the pill component from being a `<nav>` to a `<ul>` because `tablist` is not a valid `role` for a `nav`. Mostly follows the example here: http://accessibility.athena-ict.com/aria/examples/tabpanel2.shtml
2017-02-14 14:21:36 +00:00
outline: 3px solid $yellow;
}
Allow filter links to be used in combination Means you can see, for example emails that have failed. Means adding: - logic to generate links which can have a type parameter, a status parameter, or both - a ‘pill’ UI component for seeing which filters you currently have applied - some logic to change the page title based on which filters you have applied
2016-04-13 12:50:28 +01:00
}
Center-align pill text when there’s no big number When the text is left aligned it looks messy because the spacing is so uneven and there are no big numbers to give it some rhythm.
2017-06-23 10:53:24 +01:00
&-centered-item {
text-align: center;
}
Make the flow of using templates better For users who: - want to send messages from a template - want to edit templates For developers: - who need to get the ID of a template This commit mainly cleans up the choose template page so there are less options, and the options that are there are less wordy. This means: - moving ‘send yourself a test’ onto the send messages page, and making it button - stripping a lot of stuff out of the ‘send from API’ page, so it’s more obvious what the template ID is
2016-04-18 11:10:47 +01:00
}
Add a new pattern for sub-navigation This is like the ‘pill’ pattern that we use for filtering lists of notifications. However it is meant for navigating between discrete things, not a filtered view of the same list. This is why is has a gutter between each item, and no selected state. Turns out we already had a pattern about this on the dashboard, so this commit also changes the dashboard to use the same code.
2016-09-20 11:46:56 +01:00
.pill-separate {
&-item {
display: block;
text-align: left;
padding: 10px $gutter-half;
Centre text in pill navigation Now the text is smaller (fewer words) it looks a bit wrong bunched up on the left. the only other page this affects is ‘API integration’.
2018-07-19 10:36:15 +01:00
text-align: center;
Add a new pattern for sub-navigation This is like the ‘pill’ pattern that we use for filtering lists of notifications. However it is meant for navigating between discrete things, not a filtered view of the same list. This is why is has a gutter between each item, and no selected state. Turns out we already had a pattern about this on the dashboard, so this commit also changes the dashboard to use the same code.
2016-09-20 11:46:56 +01:00
&:link,
&:visited {
background: $link-colour;
color: $white;
text-decoration: underline;
}
Fix invisible focused item text GOV.UK Template hanged the colour of text in focused links in https://github.com/alphagov/govuk_template/commit/79466a489c38b0b82f4cb95daa2baba41b375a81 It was done with greater specificity than before. This means that the way we were previously overriding the focus colour (for links with a dark background) no longer works. This commit makes our override more specific, so that it works again.
2017-10-17 16:34:47 +01:00
&:hover,
&:focus,
&:link:focus {
Add a new pattern for sub-navigation This is like the ‘pill’ pattern that we use for filtering lists of notifications. However it is meant for navigating between discrete things, not a filtered view of the same list. This is why is has a gutter between each item, and no selected state. Turns out we already had a pattern about this on the dashboard, so this commit also changes the dashboard to use the same code.
2016-09-20 11:46:56 +01:00
color: $light-blue-25;
}
}
}
Reference in New Issue Copy Permalink