darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-04 19:38:24 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
d37a3557c4ff8286c4bfa25769ffa152a1fc81fa
notifications-admin/app/assets/stylesheets/components/radios.scss

119 lines
2.0 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;
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
&-column {
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 {
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
margin-right: 5px;
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
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
}
}
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-reset-button,
.js-category-button {
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
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
background: none;
text-decoration: underline;
color: $link-colour;
border: none;
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;
width: auto;
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
padding: 7px 20px 7px 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
margin-right: 5px;
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
cursor: pointer;
&:hover {
color: $link-hover-colour;
}
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 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
.js-reset-button-block {
display: block;
width: 100%;
text-align: left;
padding: 20px 20px $gutter 57px;
}
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;
}
}
}
}
Reference in New Issue Copy Permalink