Improve stats announcements UI #1649

* Tricky naming for this, as “style guide” and “front-end” are both already overloaded terms * Page is intended to have the same purpose as /style-guide in other admin apps, which documents design patterns that differ from Bootstrap

* Include Bootstrap 2.0.3 caveats

* Indicates how default legend and fieldset styles create a layout that separates headings from content

* Rather than porting Whitehall over to the template, which would take a long time, begin adapting some of the concepts the template introduces * Include CSS helper classes for admin UI * Include theme variables used within the template

* Use a class, form-large, to avoid applying this everywhere * Reset many of the styles applied by Bootstrap 2 * Default to a larger font-size * Document styles in the style guide

* Add form-large, form-group wrappers and form-control classes to form elements * Apply checkbox and radio styles directly to labels where appropriate — form builders make it harder to change the markup

* Make the cancel action clearer by using a grey button style, but separate it from the main submit action to prevent accidental clicks * Create gutter classes and mixins to specify a large gap between elements, in this case two buttons

* Move or (remove where appropriate) the warning message to render grid correctly * Remove warning message when performing an edit action, presume that at this point the user understands the consequences of these actions * Create styles for item and actions within a header, this ought to be extracted into a generic pattern at a later date

* When a stats announcement is created, edited or has its date changed, the changes are immediately published — the button text needs to make this clear

* Put header at the top of the page * Move warning down and give better vertical spacing to create announcement action * Rename search to filter to match other filter forms on Whitehall * Make the search button a Bootstrap styled button

* Add table example to style guide * Include styles for table header and secondary table headers

* Give the table a prominent header consistent with other admin apps

* A large but light style which applies to the empty state. * Apply when no statistics announcements are found by a filter

* Indicate statistics type above title, matching front-end * Clarify the view on website link, specifying which site * Remove the warning message and fix grid layout of page * Format details and summary in the same style as used on the front-end * Remove delete announcement button

* Delete existing overrides and inline styles * Update language from “linking” to “connecting” to avoid confusion related to behaviour of legacy systems, as observed in user research * Re-style document finder, which uses IDs for styles and javascript which makes refactoring or overriding styles difficult

* Using span8 grid classes meant that form elements were always a percentage width of the viewport, at small widths this doesn’t make sense * Use max-widths instead, the form expands up to a certain point, but on smaller viewports elements take up more of the limited screen space * Apply the same logic to organisation and topic selects

* Base on the pattern in GOV.UK elements, but use the existing Bootstrap palette, http://govuk-elements.herokuapp.com/#guide-forms * Add examples to style guide * Currently missing the javascript focus and selected styles

* Provide better titles and descriptions for statistics types, and replace select with radio buttons for easier access to options * Use inline block labels for display precision

* Show users the exact date that will be published and shown to users based on their choices. (As announcements are published immediately, they otherwise wouldn’t see it until it was live) * Exact date, one month range, two month range and whether the date is provisional or not

* Avoid inferring semantics, the styles should be usable with any content * Don’t nest divs within headings, that’s not valid HTML

* Files aren’t intended to be compiled and used by themselves * Use _ to indicate that they are partials — http://sass-lang.com/guide#topic-4

* The stats CSS applies to a set of pages across a couple of controllers, and isn’t restricted based on the usual controller generated classnames * Because it doesn’t meet the usual rules for styles specific to views, it should live elsewhere

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve stats announcements UI #1649

Improve stats announcements UI #1649

Commits on Aug 11, 2014