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 #167

Merged
merged 33 commits into from Jan 6, 2015
Merged

Switch to using govuk_admin_template #167

merged 33 commits into from Jan 6, 2015

Conversation

@fofr
Copy link
Contributor

@fofr fofr commented Dec 30, 2014

  • Start using admin gem which bundles jQuery, Bootstrap, environment indicator and default application layout
  • Upgrade from Bootstrap 2 to Bootstrap 3
  • Update markup to conform with newest bootstrap patterns
    • Remove most grid wrappers which were unnecessary
    • Switch from controls to form-group, and ensure there's a form-control class on inputs
    • Add missing -default classes to default buttons and alerts
    • Update modal markup, remove fade animation
  • Remove all custom IE styles
  • Add page titles
  • Add missing H1s
  • Add breadcrumbs
  • Use admin template's no content styles when content is missing

Before and after screens

Contacts

screen shot 2014-12-30 at 08 27 49
screen shot 2014-12-30 at 08 28 00

Contact groups

screen shot 2014-12-30 at 08 33 22
screen shot 2014-12-30 at 08 32 59

Editing contact

screen shot 2014-12-30 at 08 28 19
screen shot 2014-12-30 at 08 28 33

Editing contact group

screen shot 2014-12-30 at 08 33 36
screen shot 2014-12-30 at 08 33 12

Online links

screen shot 2014-12-30 at 08 28 59
screen shot 2014-12-30 at 08 29 11

Editing online link

screen shot 2014-12-30 at 08 29 56
screen shot 2014-12-30 at 08 30 06

fofr added 30 commits Dec 29, 2014
* Upgrade to Bootstrap 3
* Remove own dependencies on bootstrap and jquery
* Include content_for
* Name app “GOV.UK Contacts”
* Remove bootstrap styles
* Remove library javascript includes
* Remove styles that overwrite bootstrap/admin template
Only the IE conditional logic is being used from these includes
Most of these styles don’t apply to Bootstrap 3 classes

Sign on analytics show that less than 0.07% of sessions are IE6 (about
200 in the last year)
* Add h1 and page title
* Use admin template’s table-header styles
* Remove obsolete colgroup/width markup
* Use admin template no content styles
* Use Bootstrap 3 modal markup
* Use Bootstrap 3 grid markup
* Use Bootstrap 3 form classes
* Remove unnecessary grid wrappers around pages
* Remove styles overriding breadcrumb
* Add a breadcrumb
* Add page titles
* Remove obsolete colgroup/width
* Add page title and h1
* Cleanup search/filter styles
* Remove unnecessary grids
* Add breadcrumbs
* Add page titles
* Use H1s
* Use form-group as default wrapper
* Don’t nest checkboxes
* Remove label classes
* Replace Bootstrap 2 grid classes with admin template helpers
* Rename quick links to links
* Remove form-horizontal classes
* Nest forms in a well so they are more clearly separated from lists of
numbers, links, etc
* Use Bootstrap 3 form classes
* Use “information” over info
Allows easier re-use on all sub tabs
* Use matching table design to indexes
* Move more information form below table
* Remove obsolete colgroup markup
* Remove `+` from add links, add default bootstrap btn class
* Use admin template’s no content styles when no items in table
The actions only apply to the contact as a whole, not individual items
which are part of that contact.
* Remove unnecessary grid wrappers
* Add breadcrumbs
* Move delete down form alongside other submit button
* Put form in well for clarity
* Remove unnecessary grid wrappers
* Add breadcrumbs and page title
* Move delete down form alongside other submit button
* Put form into well for clarity
* Remove unnecessary grid wrappers
* Add breadcrumbs and page title
* Move delete down form alongside other submit button
* Put form into well for clarity
* Remove unnecessary grid wrappers
* Add breadcrumbs and page title
* Move delete down form alongside other submit button
* Put form into well for clarity
Break address onto separate lines, reduce size of leading line
* no-underline, text-red classes removed
* textareas have widths specified on them now
* h2 small dropdown styles aren’t used anywhere
* control-label, span-preview and form-actions were resets for old
bootstrap form styles
Stubbed feature was never implemented
Use `btn-success` styles to highlight buttons against a list of grey
“Edit” buttons in a table.
There are no longer any custom IE styles in the app
* Use built in Bootstrap padding for better looking badges
* Use default vertical rhythm for tab margin
* Delete unused px/em mixins
* Delete unused ‘clear’ css helper, this is provided via Bootstrap
Against a grey backgrounds it’s clearer to see:
* when the form fields end
* where the white editable fields are

(Pattern is used in mainstream publisher)

Use page title class rather than header to avoid a border. With a well
a border is unnecessary.
@fofr fofr closed this Dec 30, 2014
* Bump admin gem to pickup `app_home_path` variable
* Prevents linking to a frontend `/`
@fofr
Copy link
Contributor Author

@fofr fofr commented Dec 30, 2014

Closing PR while investigating problems with IE and respond.js. The contacts app serves its admin stylesheets via assets-origin. Being a different subdomain the cross-origin policy seems to be preventing respond.js from running correctly, presenting the app in mobile mode for all IE8 users.

https://github.com/scottjehl/Respond#cdnx-domain-setup

Respond.js works by requesting a pristine copy of your CSS via AJAX, so if you host your stylesheets on a CDN (or a subdomain), you'll need to upload a proxy page to enable cross-domain communication.

Respond.js needs to run on the same domain to request stylesheets,
parse them and render a non-mobile layout on <IE9

https://github.com/scottjehl/Respond#cdnx-domain-setup

This setup matches other publishing apps which don’t use the CDN to
serve assets.
@fofr
Copy link
Contributor Author

@fofr fofr commented Dec 30, 2014

Prevented admin assets from being served from a CDN: 4396cc8

This matches other publishing apps.

Re-opening PR.

@fofr fofr reopened this Dec 30, 2014
https://www.agileplannerapp.com/boards/173808/cards/9052

As a researcher
I want to know who is using the app, how many people are using it, what
they are using it for and what they are doing
So that I can make things easier for them
jamiecobbett added a commit that referenced this pull request Jan 6, 2015
Switch to using govuk_admin_template
@jamiecobbett jamiecobbett merged commit a9f9c20 into master Jan 6, 2015
1 check passed
1 check passed
default "Build #173 succeeded on Jenkins"
Details
@jamiecobbett jamiecobbett deleted the govuk-admin-template branch Jan 6, 2015
@jamiecobbett
Copy link
Contributor

@jamiecobbett jamiecobbett commented Jan 6, 2015

Let the Contacts app love begin ❤️ ☎️

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

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