darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-05 22:21:34 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
4d0da6594de60fcf37dc7796279462e32072d7a1
notifications-admin/app/assets/stylesheets/components/radios.scss

171 lines
2.6 KiB
SCSS
Raw Normal View History

Add a component for picking the time to send a job Users need to pick a time in the next 24hrs, or send a file immediately. Rationale for this is a bit lost in time-before-holiday, but generally: ‘Now’ and ‘later’ as the inital choices makes it really clear what this feature is about conceptually. The choice of times is absolute, eg ‘1pm’ not ‘in 3 hours’
2016-08-07 09:17:49 +01:00
.radio-select {
Improve redraw performance It’s noticeable when clicking from row to row in the spreadsheet that the page jumps around a fair bit on load because there are a couple of Javascript-powered components. This commit makes sure: - the radio select component doesn’t change height when rendering for the first time - the scrollable table doesn’t show parts of the table that should be hidden by overflow for a fraction of second before all the JS has run - the right-hand shadow on horizontally scrollable tables doesn’t fade in on initial page load but shows at 100% opacity immediately
2018-01-15 11:35:45 +00:00
min-height: 39px;
Update radio-select to use govuk-frontend buttons
2020-02-06 14:49:07 +00:00
&__column {
Add a component for picking the time to send a job Users need to pick a time in the next 24hrs, or send a file immediately. Rationale for this is a bit lost in time-before-holiday, but generally: ‘Now’ and ‘later’ as the inital choices makes it really clear what this feature is about conceptually. The choice of times is absolute, eg ‘1pm’ not ‘in 3 hours’
2016-08-07 09:17:49 +01:00
display: inline-block;
vertical-align: top;
Make radio select work w/ new checkboxes/radios The visual appearance of radio and checkbox form inputs changed in GOV.UK Elements here: https://github.com/alphagov/govuk_elements/pull/296 This was subsequently reimplemented with different markup and no Javascript here: https://github.com/alphagov/govuk_elements/pull/406 This has meant making the following changes to our app: - changing the markup in our radio/checkbox macros to match the example markup given by GOV.UK Elements - removing the previous Javascript file because it’s no longer needed to make the radios appear visual selected - making the buttons on the scheduled job picker look like links, because the grey button style looked weird with the new radio buttons
2016-12-19 10:36:17 +00:00
.multiple-choice {
padding-right: 10px;
Group choices for scheduling a job by day The options for scheduling a job by time should be grouped by day, because a long list of 96 options is not very usable. On the server side, this commit generates label for the next 4 days in a friendly format (ie today/tomorrow/Sunday/Monday) The Javascript component for choosing a time was built in a kind of old-school jQuery way, where it manipulated the elements on the page. The complexity of introducing groups of options was just too much for this pattern, because it involves storing a lot of state in the DOM. This commit completely rewrites the JS to: - read the initial options and groups from the HTML and store them in the object - use Hogan to completely re-render the UI from a series of Mustache templates, each of which represents a state of the UI and takes the inital options and groups - filter the choices to show when the today/tomorrow/… buttons are clicked
2016-10-11 14:17:29 +01:00
padding-left: 54px - 10px;
Add a component for picking the time to send a job Users need to pick a time in the next 24hrs, or send a file immediately. Rationale for this is a bit lost in time-before-holiday, but generally: ‘Now’ and ‘later’ as the inital choices makes it really clear what this feature is about conceptually. The choice of times is absolute, eg ‘1pm’ not ‘in 3 hours’
2016-08-07 09:17:49 +01:00
}
}
Update radio-select to use govuk-frontend buttons
2020-02-06 14:49:07 +00:00
&__button--category {
Add hover state for new radio select styles Because they look like links, they should have all the clicking affordance of links.
2017-04-11 17:22:44 +01:00
Update radio-select to use govuk-frontend buttons
2020-02-06 14:49:07 +00:00
margin-right: govuk-spacing(3);
width: auto;
Add hover state for new radio select styles Because they look like links, they should have all the clicking affordance of links.
2017-04-11 17:22:44 +01:00
Add a component for picking the time to send a job Users need to pick a time in the next 24hrs, or send a file immediately. Rationale for this is a bit lost in time-before-holiday, but generally: ‘Now’ and ‘later’ as the inital choices makes it really clear what this feature is about conceptually. The choice of times is absolute, eg ‘1pm’ not ‘in 3 hours’
2016-08-07 09:17:49 +01:00
}
Update radio-select to use govuk-frontend buttons
2020-02-06 14:49:07 +00:00
&__button--done {
Style radio select controls as buttons For the upcoming user permissions enhancements we want to differentiate between actions that take the user to a new page (eg changing a user’s phone number or email address) and actions that reveal extra controls in the current page (which will be changing the folders a team member can see). This change will be inconsistent with the interaction for scheduling a job, which uses links to reveal other controls in the page. This commit changes the scheduling interaction to use grey ‘secondary’ buttons for revealing extra controls in the page, for consistency with the upcoming folder permissions work.
2019-04-30 10:49:33 +01:00
Add a back button to the scheduler We’ve seen in research a user getting stuck playing with the scheduler. They picked a day, but then didn’t want to choose one of the options for that day. There’s no way to do this except pick a day and then un-pick it. What they ended up doing was clicking the grey back button, which took them back to the previous page, making them upload their file again. This commit adds a ‘back’ link for the scheduler. ‘Back’ seems like sensible naming because that’s the thing that the user tried to click, and the UI of a link matches the thing they clicked to get into this situation.
2017-04-26 11:28:22 +01:00
display: block;
Style radio select controls as buttons For the upcoming user permissions enhancements we want to differentiate between actions that take the user to a new page (eg changing a user’s phone number or email address) and actions that reveal extra controls in the current page (which will be changing the folders a team member can see). This change will be inconsistent with the interaction for scheduling a job, which uses links to reveal other controls in the page. This commit changes the scheduling interaction to use grey ‘secondary’ buttons for revealing extra controls in the page, for consistency with the upcoming folder permissions work.
2019-04-30 10:49:33 +01:00
clear: both;
Update radio-select to use govuk-frontend buttons
2020-02-06 14:49:07 +00:00
margin: 0 0 govuk-spacing(6) 0;
Style radio select controls as buttons For the upcoming user permissions enhancements we want to differentiate between actions that take the user to a new page (eg changing a user’s phone number or email address) and actions that reveal extra controls in the current page (which will be changing the folders a team member can see). This change will be inconsistent with the interaction for scheduling a job, which uses links to reveal other controls in the page. This commit changes the scheduling interaction to use grey ‘secondary’ buttons for revealing extra controls in the page, for consistency with the upcoming folder permissions work.
2019-04-30 10:49:33 +01:00
position: relative;
Update radio-select to use govuk-frontend buttons
2020-02-06 14:49:07 +00:00
top: govuk-spacing(3);
Style radio select controls as buttons For the upcoming user permissions enhancements we want to differentiate between actions that take the user to a new page (eg changing a user’s phone number or email address) and actions that reveal extra controls in the current page (which will be changing the folders a team member can see). This change will be inconsistent with the interaction for scheduling a job, which uses links to reveal other controls in the page. This commit changes the scheduling interaction to use grey ‘secondary’ buttons for revealing extra controls in the page, for consistency with the upcoming folder permissions work.
2019-04-30 10:49:33 +01:00
&:active {
Update radio-select to use govuk-frontend buttons
2020-02-06 14:49:07 +00:00
top: govuk-spacing(3) + 2px;
Style radio select controls as buttons For the upcoming user permissions enhancements we want to differentiate between actions that take the user to a new page (eg changing a user’s phone number or email address) and actions that reveal extra controls in the current page (which will be changing the folders a team member can see). This change will be inconsistent with the interaction for scheduling a job, which uses links to reveal other controls in the page. This commit changes the scheduling interaction to use grey ‘secondary’ buttons for revealing extra controls in the page, for consistency with the upcoming folder permissions work.
2019-04-30 10:49:33 +01:00
}
Add a back button to the scheduler We’ve seen in research a user getting stuck playing with the scheduler. They picked a day, but then didn’t want to choose one of the options for that day. There’s no way to do this except pick a day and then un-pick it. What they ended up doing was clicking the grey back button, which took them back to the previous page, making them upload their file again. This commit adds a ‘back’ link for the scheduler. ‘Back’ seems like sensible naming because that’s the thing that the user tried to click, and the UI of a link matches the thing they clicked to get into this situation.
2017-04-26 11:28:22 +01:00
}
Add a component for picking the time to send a job Users need to pick a time in the next 24hrs, or send a file immediately. Rationale for this is a bit lost in time-before-holiday, but generally: ‘Now’ and ‘later’ as the inital choices makes it really clear what this feature is about conceptually. The choice of times is absolute, eg ‘1pm’ not ‘in 3 hours’
2016-08-07 09:17:49 +01:00
.js-enabled & {
Make the UI more performant by not reflowing Fixes the height of the component until it’s loaded so that it doesn’t causes the page to reflow while it’s rendering the buttons. Stops the options being shown and then immediately hiding on initial page load.
2016-10-11 18:11:20 +01:00
overflow: visible;
Make radio select work w/ new checkboxes/radios The visual appearance of radio and checkbox form inputs changed in GOV.UK Elements here: https://github.com/alphagov/govuk_elements/pull/296 This was subsequently reimplemented with different markup and no Javascript here: https://github.com/alphagov/govuk_elements/pull/406 This has meant making the following changes to our app: - changing the markup in our radio/checkbox macros to match the example markup given by GOV.UK Elements - removing the previous Javascript file because it’s no longer needed to make the radios appear visual selected - making the buttons on the scheduled job picker look like links, because the grey button style looked weird with the new radio buttons
2016-12-19 10:36:17 +00:00
.multiple-choice {
Make the UI more performant by not reflowing Fixes the height of the component until it’s loaded so that it doesn’t causes the page to reflow while it’s rendering the buttons. Stops the options being shown and then immediately hiding on initial page load.
2016-10-11 18:11:20 +01:00
display: none;
}
Make radio select work w/ new checkboxes/radios The visual appearance of radio and checkbox form inputs changed in GOV.UK Elements here: https://github.com/alphagov/govuk_elements/pull/296 This was subsequently reimplemented with different markup and no Javascript here: https://github.com/alphagov/govuk_elements/pull/406 This has meant making the following changes to our app: - changing the markup in our radio/checkbox macros to match the example markup given by GOV.UK Elements - removing the previous Javascript file because it’s no longer needed to make the radios appear visual selected - making the buttons on the scheduled job picker look like links, because the grey button style looked weird with the new radio buttons
2016-12-19 10:36:17 +00:00
.js-multiple-choice {
display: block;
Make the UI more performant by not reflowing Fixes the height of the component until it’s loaded so that it doesn’t causes the page to reflow while it’s rendering the buttons. Stops the options being shown and then immediately hiding on initial page load.
2016-10-11 18:11:20 +01:00
}
Add a component for picking the time to send a job Users need to pick a time in the next 24hrs, or send a file immediately. Rationale for this is a bit lost in time-before-holiday, but generally: ‘Now’ and ‘later’ as the inital choices makes it really clear what this feature is about conceptually. The choice of times is absolute, eg ‘1pm’ not ‘in 3 hours’
2016-08-07 09:17:49 +01:00
}
}
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
.radios-nested {
margin-bottom: 10px;
.multiple-choice {
$circle-diameter: 39px;
$border-thickness: 4px;
$border-indent: ($circle-diameter / 2) - ($border-thickness / 2);
Add left padding to nested radios This makes them align horizontally with the label of their parent, so that the layout is a bit calmer.
2019-01-04 15:30:39 +00:00
$border-colour: $border-colour;
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
float: none;
position: relative;
&:before {
content: "";
position: absolute;
bottom: 0;
left: $border-indent;
width: $border-thickness;
height: 100%;
background: $border-colour;
}
label {
float: none;
}
[type=radio]+label::before {
// To overlap the grey inset line
background: $white;
}
ul {
// To equalise the spacing between the line and the top/bottom of
// the radio
margin-top: 5px;
margin-bottom: -5px;
Add left padding to nested radios This makes them align horizontally with the label of their parent, so that the layout is a bit calmer.
2019-01-04 15:30:39 +00:00
padding-left: 12px;
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
}
.block-label-hint {
&:after {
// Adds an little extra segment of line alongside the ‘current folder’
// hint so that it extends all the way down to the next radio
content: "";
position: absolute;
Add left padding to nested radios This makes them align horizontally with the label of their parent, so that the layout is a bit calmer.
2019-01-04 15:30:39 +00:00
top: $circle-diameter + 5px;
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
left: $border-indent;
width: $border-thickness;
height: 25px;
background: $border-colour;
}
}
}
}
Change radio buttons to inline 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.
2019-10-09 16:16:22 +01:00
.inline {
.multiple-choice {
margin-right: 15px;
}
}
Add a form to set priority of top 2 providers 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.
2019-12-02 18:15:00 +00:00
.radio-slider {
border-bottom: 2px solid $black;
height: 18px;
margin-bottom: 18px + 30px;
margin-right: -18px;
margin-left: -18px;
white-space: nowrap;
legend {
display: none;
}
.multiple-choice {
display: inline-block;
margin-right: 0;
padding: 0;
width: 38px;
margin-right: calc((100% - (38px * 11)) / 10);
&:last-child {
margin-right: 0;
}
label {
font-size: 0;
padding: 0;
&:before {
background: $white;
}
}
}
&-left-value {
position: absolute;
bottom: 30px;
left: 0;
}
&-right-value {
position: absolute;
bottom: 30px;
right: 0;
text-align: right;
}
}
Reference in New Issue Copy Permalink