mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-10 10:03:21 -04:00
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
This commit is contained in:
@@ -6,7 +6,9 @@
|
||||
vertical-align: top;
|
||||
|
||||
.block-label {
|
||||
margin-right: 10px;
|
||||
margin-right: 5px;
|
||||
padding-right: $gutter - 10px;
|
||||
padding-left: 54px - 10px;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -15,33 +17,12 @@
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: auto;
|
||||
padding: 20px 30px 15px 30px;
|
||||
padding: 20px $gutter-half 15px $gutter-half;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.js-enabled & {
|
||||
|
||||
|
||||
.block-label {
|
||||
&:last-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.block-label,
|
||||
.tertiary-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.js-visible {
|
||||
|
||||
display: block;
|
||||
|
||||
&.tertiary-button {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user