Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve stats announcements UI #1649

merged 24 commits into from Aug 11, 2014

Improve stats announcements UI #1649

merged 24 commits into from Aug 11, 2014


Copy link

@fofr fofr commented Aug 10, 2014

  • Create a Whitehall admin front-end style guide which documents and includes examples of new styles
  • Port across styles and class helpers from govuk_admin_template to begin adopting the same techniques used by other admin apps
  • Create a form-large style which emulates Bootstrap 3 and the govuk_admin_template
  • Add block-label styles which emulate GOV.UK Elements block labels using a Bootstrap palette
  • Improve legibility of stats announcement creation, edit, view and change date pages and forms
    • Switch type drop downs to radio buttons with explanations
    • Change language from "linking a document" to "connecting a document"
  • Improve display of stats announcement list and filters
  • When creating an announcement, show live example of display date
    • Test behaviour and add tests for existing stats js
  • Clarify form behaviour by indicating that announcements and their changes are immediately published

Recommend reviewing code using &w=1 in URL as many wrapping elements have been added/removed.

screen shot 2014-08-10 at 18 54 55

Stats announcement
screen shot 2014-08-10 at 18 55 54

Edit announcement form
screen shot 2014-08-10 at 18 56 11

screen shot 2014-08-10 at 18 56 26

Change release date
screen shot 2014-08-10 at 18 56 55

Announcement with a linked document
screen shot 2014-08-10 at 18 57 27

Create an announcement
screen shot 2014-08-10 at 18 57 48
screen shot 2014-08-10 at 18 57 59

@tekin tekin self-assigned this Aug 11, 2014
Copy link

@edds edds commented Aug 11, 2014

Can the admin template Sass partial files (app/assets/stylesheets/admin/govuk_admin_template/*) have leading underscore on their file names. This follows the Sass conventions of naming files which aren't supposed to be compiled by themselves but only included in other files.

@@ -368,6 +368,10 @@ def external_redirect(path_prefix, target)

resources :sitewide_settings

scope '/style-guide' do

This comment has been minimized.


tekin Aug 11, 2014

Is this the best place for this to live? Maybe this would be better as a static admin_styleguide.html file in /docs. That might make it easier for devs to view and use as a source reference.

This comment has been minimized.


tekin Aug 11, 2014

After discussion, this is the right place for it. Suggeted adding a new file in /docs called something like that points to /government/admin/style-guide so new and existing devs are made more aware of its existance. Also, the routing can be simplified:

get '/style-guide' => 'style_guide#index'

This comment has been minimized.


fofr Aug 11, 2014
Author Contributor

Routing simplified and rebased. Thanks.

@@ -1,5 +1,5 @@
<%= form_tag admin_statistics_announcements_path, class: "filter-options", method: :get do %>

<div class="filter-grouping">
<%= label_tag :search_title, 'Title or slug' %>

This comment has been minimized.


tekin Aug 11, 2014

Worth removing the placeholder on the actual search field?

<% end %>
<% end %>

<%= form.save_or_cancel buttons: { save: 'Save announcement' }, cancel: [:admin, statistics_announcement] %>
<%= form.save_or_cancel_buttons buttons: { save: statistics_announcement.new_record? ? 'Publish announcement' : 'Save and publish changes' }, cancel: [:admin, statistics_announcement] %>

This comment has been minimized.


tekin Aug 11, 2014


Copy link

@tekin tekin commented Aug 11, 2014

Other than the routing change, this looks good from my perspective 👍

fofr added 18 commits Aug 6, 2014
* 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
* 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
* 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
* 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,
* Add examples to style guide
* Currently missing the javascript focus and selected styles
@include remove-top-margin('!important');

.document-finder-fields .js-loader {
right: 6.3em !important;

This comment has been minimized.


edds Aug 11, 2014

eww. I assume this is required.

Copy link

@edds edds commented Aug 11, 2014

This looks good to me also.

fofr added 4 commits Aug 7, 2014
* 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
* Don’t nest divs within headings, that’s not valid HTML
fofr added 2 commits Aug 11, 2014
* Files aren’t intended to be compiled and used by themselves
* Use _ to indicate that they are partials —
* 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
fofr added a commit that referenced this pull request Aug 11, 2014
Improve stats announcements UI
@fofr fofr merged commit 90c8b66 into master Aug 11, 2014
1 check passed
1 check passed
default Build #3740 succeeded on Jenkins
@fofr fofr deleted the stats-ui branch Aug 11, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

3 participants
You can’t perform that action at this time.