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

Merged
merged 46 commits into from Jun 20, 2014
Merged

Switch to using govuk_admin_template #210

merged 46 commits into from Jun 20, 2014

Conversation

@fofr
Copy link
Contributor

@fofr fofr commented Jun 19, 2014

  • Start using admin gem which bundles jQuery, Bootstrap, environment indicator and default application layout
  • Upgrade from Bootstrap 2 to Bootstrap 3
  • Upgrade formtastic, formtastic-bootstrap
    • Switch from using deprecated buttons to using actions
  • Update markup to conform with newest bootstrap patterns
    • Accordion pattern when editing an edition with parts becomes a set of rearrangeable panels
    • Same applies to edition history accordion
    • Replace grid classes on form elements with appropriate grid wrappers
    • Formtastic picks up most of the form changes, but for forms not using it:
      • 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
    • Use Bootstrap 3 kaminari themes for pagination
    • Update modal markup

screen shot 2014-06-18 at 10 35 55

screen shot 2014-06-19 at 18 39 06

fofr added 30 commits Jun 19, 2014
* Add govuk_admin_template
* Stop using less
* Remove jquery-rails, jQuery is provided via gem
* Stop using branches for formtastic, and use Bootstrap 3 versions
* Use nested layouts
* Make application.css SASS friendly, and import gem styles
* Remove now unnecessary javascript includes
* Switch from less to SASS
* Delete navbar less file, all styles are now in admin gem
* Default bootstrap 3 styles make this slightly too big
* Compress the margins and reduce font sizes
* Split out into its own css file
* Don’t use grid classes in sidebar form, use form-control class
instead - it expands to 100% width by default
* Bring table inline with admin style guide
* Move sortable table styles into its own component stylesheet
* Darken the selected state (really the whole th cell should be
highlighted and clickable)
* No need for any grid wrappers or classes here
* Remove row and column divs
* Labels inherit their text-size now, this leads to labels being huge
if they are in an <h1>
* Grey labels also need a default class, “label-default”
* Show and diff pages don’t need to be wrapper in a row class
* Use `form-control`, and move the grid wrappers from input to a parent
wrapper
* Remove unnecessary form wrappers
* Replace grid classes on inputs with bootstrap’s form-control
* Split two types of note with a horizontal rule
* Instead of putting grid classes on individual form elements, use rows
and wrappers instead
* Removed specific CSS for the now unused “control-group” class (from
bootstrap 2)
* Remove outer grid wrappers
* Use `page-title` to avoid a border on the page header which clashes
with the bootstrap well
* Remove grid wrappers
* Move sidebar and well styles out of grid wrapper to prevent clashes
(form was expanding beyond the col-md-2 width)
* `col-md-12` is unnecessary as form inputs expand to their full width
in bootstrap 3
* Use grid wrappers instead of input classes for video form
* Accordions have been replaced with panels in Bootstrap 3
* Markup is very similar
* Move styles into separate stylesheet
* Update javascript to use js- prefixed class
* Use CSS animation for yellow fade effect, rather than a timeout
* Bootstrap 3 removed accordions, panels are effectively the same
* Use the collapsing panel pattern, and remove custom js
* Remove some custom css, replace with default bootstrap 3 classes
* Keep the first set of notes open using “in” class
* Update tests to reflect use of “in” class
* Change purpose of second test to check that the panel closes (the former test didn’t match existing behaviour)
* Make it easier to scan notes
* Add a notes header and remove “Notes for” from each panel
* Shorten link text for comparing with previous edition
* Fixed footer nave need either navbar-default or navbar-inverse class
* Remove styling that modifies baseline Bootstrap behaviour, replace
with helper class in markup
* Use navbar-btn wrapper to correctly align buttons within bar
* Remove classes from inputs and replace with grid wrappers
* Split main form and expectations with a horizontal rule
* Add form-control and form-group classes where forms aren’t going
through formtastic
* Replace classes on inputs with wrappers
* Use more specific validation tests to avoid problem of repositioned hint text in newer formtastic (hint comes before error now, rather than after)
fofr added 16 commits Jun 19, 2014
* The default nested form uses an ordered list for its fields
* This creates a horrible form, and is an existing bug on
preview/production
* Switching to use “bootstrap_nested_form” removes the ordered lists,
and styles the form like other forms with parts.
* Use bootstrap 3 form classes
* Remove custom CSS that changed behaviour of baseline classes
* Use plus icons rather than plus-sign icons (plus signs are best used
outside of buttons)
* Add some horizontal spacing between options, arrows and node lists
* Form elements expand to full width in bootstrap 3 by default
* Button had no styles but the default browser ones
* Modals no longer need to be hidden with hide classes
  * But tabindex -1 and aria hidden should be used
* Update modal markup to include new and necessary bootstrap 3 wrappers
(modal-dialog, modal-content), use html5 elements for modal header and
footer
* Remove grid classes from inputs in modal, inputs expand to full width
by default in bootstrap 3
* Workflow buttons are in an “info” alert, the buttons should match
this — switch from primary buttons to info buttons
* Remove modal styles that modified baseline bootstrap behaviour
* Update test where new modals interfere with poltergeist and supposedly obscure checkbox (in reality this isn't the case) — trigger change we want directly to circumvent
* Text was too dark to read before, black on black
* Give the table of images contrast against the grey background, and
add a table header for accessibility
* Remove classes attached to form elements, bootstrap 3 elements now
expand to the size of their parent – use wrappers instead
* Default notice and alert message types to the bootstrap “warning”
alert
* Allow support for success, danger and info style alerts too
* Use actions, and specify a bootstrap button class on the submit
button, use the same text as before
* Cleanup the page a bit — give it a proper header and style messages
in the appropriate alert
* Bootstrap 3 requires buttons to have both “btn” and “btn-default”
* Give some vertical spacing to improve layout
* Keep a reference to admin design patterns
* Show how local styles may have affected those patterns
* A placeholder module was created to distinguish between environments
before the app switched over to use the admin template
* Now we’re using the gem, this isn’t needed
danielroseman
Copy link
Contributor

danielroseman commented on 70191a6 Jun 20, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the change from btn-primary to btn-default deliberate?

Loading

fofr
Copy link
Contributor

fofr commented on 70191a6 Jun 20, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, a default grey for submitting a form that doesn't add or edit anything. (There needs to be a larger piece of work that looks at how we're using different coloured buttons.)

Loading

@bishboria
Copy link
Contributor

@bishboria bishboria commented Jun 20, 2014

LGTM. I'll give others time to review it before merging.

Loading

@danielroseman
Copy link
Contributor

@danielroseman danielroseman commented Jun 20, 2014

It's probably a quibble, but View Changes on an edition now looks bit odd - the + and - are offset downwards.

Loading

@fofr
Copy link
Contributor Author

@fofr fofr commented Jun 20, 2014

@danielroseman Yeah, I spotted that and looked for a quick fix without finding one (with the aim of keeping the PR from ballooning). There's a bit of work to be done to clean that view up in general (black text on harsh red/green), and my view was that this fix should also wait until then.

Loading

@danielroseman
Copy link
Contributor

@danielroseman danielroseman commented Jun 20, 2014

Fair enough. LGTM too then.

Loading

danielroseman added a commit that referenced this issue Jun 20, 2014
Switch to using govuk_admin_template
@danielroseman danielroseman merged commit 5b8ba9f into master Jun 20, 2014
1 check passed
Loading
@danielroseman danielroseman deleted the with-admin-gem branch Jun 20, 2014
fofr added a commit to alphagov/smokey that referenced this issue Jun 24, 2014
* This PR breaks the existing test:
alphagov/publisher#210
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

3 participants