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

Switch to using govuk_admin_template #241

Merged
merged 36 commits into from Jul 4, 2014
Merged

Switch to using govuk_admin_template #241

merged 36 commits into from Jul 4, 2014

Conversation

@fofr
Copy link
Contributor

@fofr fofr commented Jul 1, 2014

  • Start using admin gem which bundles jQuery, Bootstrap, environment indicator and default application layout
  • Upgrade from Bootstrap 2 to Bootstrap 3, remove old bootstrap assets that weren't coming from gem
  • Update chosen library
    • Style chosen selects to match bootstrap 3
  • Update markup to conform with newest bootstrap patterns
    • Add bootstrap 3 classes to form elements
    • Update bootstrap grid classes
    • Replace grid classes on form elements with grid wrappers (you can't apply grid classes directly to forms in bootstrap 3)
    • Add missing -default classes to default buttons and alerts
    • Use Bootstrap 3 kaminari and alphabetical_paginate themes
      • Patch alphabetical_paginate gem which has some broken HTML
    • Stop nesting tables in wells
    • Give table headers contrast
  • Add simple breadcrumbs to appropriate pages
  • Remove a lot of the custom signon CSS that was overriding default bootstrap behaviour
  • Tweak behaviour of password change form based on limitations of bootstrap 3 add-ons — add-ons can't be toggled, so an indicator is always shown, but it begins greyed out.

screen shot 2014-06-26 at 15 16 25
screen shot 2014-06-26 at 15 16 50
screen shot 2014-06-27 at 11 24 24
screen shot 2014-06-27 at 18 23 00
screen shot 2014-06-27 at 18 23 16

@vinayvinay
Copy link
Contributor

@vinayvinay vinayvinay commented Jul 2, 2014

LVGTM! ❤️

@vinayvinay
Copy link
Contributor

@vinayvinay vinayvinay commented Jul 2, 2014

waiting for @fofr to complete some cross-browser testing before merging.

@bishboria
Copy link
Contributor

@bishboria bishboria commented Jul 2, 2014

I'm finding some input/label alignment issues, mostly in Firefox.

Other than that, it looks much better.

@fofr
Copy link
Contributor Author

@fofr fofr commented Jul 2, 2014

Testing with IE7 (~6% of all sessions), there are some alignment issues with forms, and the glyphicon font doesn't work. The extent of my planned fix for this is to ensure that sign on, change password and edit your account pages work acceptably in IE7. (IE6 has 0.18% of all sessions)

fofr added 26 commits Jun 26, 2014
* Add govuk_admin_template
* Remove jquery-rails, jQuery is provided via gem
* All of bootstrap now comes via govuk_admin_template
* Crown provided via govuk_admin_template
* Use nested layouts
* Make application.css SASS friendly, and import gem styles
*
* Wrap title with bootstrap class
* Break Your account and Your applications into two columns
* Use a `list-group` rather than a standard list to display applications
* Bootstrap 3 requires some helper classes before it styles input
elements
* Add missing `form-control` classes
* Replace old span grid classes with col-md ones
* Don’t nest table in a well
* Remove grid classes from form elements
* Replace spanX with col-md-X
* Replace row-fluid with row
* Remove grid classes from table headers
* Bootstrap 3 requires two classes, `btn` and a modifier, `btn-default`
* Upgrade gem to latest version
* Add bootstrap 3 flag in config
* Upgrade kaminari and use kaminari bootstrap theme (change log for
kaminari: https://github.com/amatsuda/kaminari/releases)
* Put filters into a well
* Remove table from well
* Remove “clear” form and button from filter
* Add bootstrap 3 form classes to fields, bootstrap no longer styles
form inputs by default
* Move help text from inline to block
* Clarify that alerts are also warnings
* Upgrade from 0.9.8 to 1.1.0:
https://github.com/harvesthq/chosen/releases (3 years of updates)
* Rename all uses of chzn to chosen
* Remove custom sign on css no longer being used
* `top-buffer` is a duplicate of a margin helper class provided by the
govuk_admin_template
* Rename label class to match bootstrap 3
* Switch visually hidden class to one provided by gem
* Give table header stronger contrast, and don’t condense table for
better legibility
* Update breadcrumb to bootstrap 3, divider elements aren’t necessary
any more
* Add tbody and thead to table, and distinguish table header
* Add a no content box and message when there’s no activity
* Add a breadcrumb to get back to user edit form easily
* Make the cancel button work (it hasn’t until now)
* Use bootstrap 3 form styles
* Bootstrap changed all the class names
* Don’t nest in grid row and well
* Add table header contrast
* Don’t nest in well
* Add table header contrast
* Add bootstrap 3 form classes
* Add breadcrumb to easily return to application table
* Change supported permissions button to be a link, to avoid confusion
with submit form button
* Add breadcrumb to get back to editing application easily
* Use a friendly date format
* Don’t nest table in a well/grid wrapper
* Include breadcrumbs to easily get back to permissions list and
editing an application
* Don’t put the form in a faux table that used grid wrappers, use a
standard form layout
fofr added 9 commits Jun 27, 2014
* Add bootstrap 3 form classes
* Bootstrap 3 form ‘add-ons’ behave differently, you can’t toggle the
display on and off so easily. Instead show a greyed out ‘ok’ sign,
which is replaced with a green or red symbol depending on input
* Render help text in an alert, and remove icons for better legibility
* Use friendlier green and red colours for ok/not-ok symbols
* Add bootstrap 3 form classes
* Limit width to match password fields
* Add a breadcrumb to easily navigate back to sign in page
* Add bootstrap form classes, and restrict width of email field
* Remove link at bottom of the page, now available in breadcrumb
* Put error message in a bootstrap warning
* Make ‘try again’ action clearer by styling as a button
* Add breadcrumbs
* Add vertical space to submit button
* Use a warning alert to purvey message
* Add some margins to paragraphs in alert — these are removed by
default within alerts
* Don’t nest tables within wells
* Use friendly date formatting
* Include table class to give header greater contrast
* Refer to fixed git branch of alphabetical_paginate in gem file
* Pull request outstanding:
lingz/alphabetical_paginate#23
* There’s an unclosed <ul> which causes incorrect nesting, and warning
when tests run.
@fofr
Copy link
Contributor Author

@fofr fofr commented Jul 3, 2014

Updated to latest version of admin gem for better Bootstrap 3 styling in IE7. Cross browser good to go now.

Also used latest admin gem input classes (input-md-x) to restrict form input lengths. Instead of using grid wrappers.

@bishboria I've fixed the rendering problems you were seeing in Firefox if you could re-check.

* Render Bootstrap 3 add-on at same size as text input
* Push add-on to baseline for correct alignment
* Hide/show the [X] icon with CSS
@fofr
Copy link
Contributor Author

@fofr fofr commented Jul 3, 2014

IE7 rendering:
screen shot 2014-07-03 at 18 00 28
screen shot 2014-07-03 at 18 00 50
screen shot 2014-07-03 at 18 13 03

@bishboria
Copy link
Contributor

@bishboria bishboria commented Jul 4, 2014

@fofr just checked 👍

bishboria added a commit that referenced this pull request Jul 4, 2014
Switch to using govuk_admin_template
@bishboria bishboria merged commit 20e73e1 into master Jul 4, 2014
1 check passed
1 check passed
default "Build #263 succeeded on Jenkins"
Details
@bishboria bishboria deleted the with-admin-gem branch Jul 4, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
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.