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

40 lines
551 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 {
&-column {
display: inline-block;
vertical-align: top;
.block-label {
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;
padding-right: $gutter - 10px;
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
}
}
.tertiary-button {
display: inline-block;
vertical-align: top;
width: auto;
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: 20px $gutter-half 15px $gutter-half;
margin-right: 5px;
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
height: 60px;
overflow: visible;
.block-label {
display: none;
}
.js-block-label {
display: inline-block;
}
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