darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-02 17:48:50 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
b7e9c1a3e44c986e740bf40222a98ea809dbb2f2
notifications-admin/app/assets/stylesheets/components/radio-select.scss

60 lines
856 B
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
}
}
Reference in New Issue Copy Permalink