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.

Sign up for GitHub

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

Jump to bottom

Make UI more like other admin apps, prevent accidental publishing #466

Merged
merged 17 commits into from
Apr 10, 2015
Merged

Make UI more like other admin apps, prevent accidental publishing #466

merged 17 commits into from
Apr 10, 2015

Conversation

fofr
Copy link
Contributor

@fofr fofr commented Apr 10, 2015

Supercedes #464 (force-pushed after master rebase so couldn't re-open old PR)

Differences with #464:

  • Move the withdraw button to a different place, because its actions are more like those of publish and it's not a safe action
  • Re-instate the warning messages for when something can't be published, and check the appropriateness of those messages

Original PR

  • Use Bootstrap form styles rather than custom ones (and extract common form parts into partials)
  • Use admin template pattern for attachments table, and truncate large tables with a JS toggle (some documents have over 100 attachments) – instead of [CLOSED] Make attachments collapsible specialist-publisher#461
  • Separate publish, edit and withdraw actions and add confirm dialogues to irreversible actions
    • Completely hide publish button when unavailable, a disabled button is
      confusing
  • Correctly space sections on the show pages with a consistent vertical rhythm
  • Use lead styles to make summary more readable
  • Remove collapsible body function, instead restrict height, and don’t show at all unless there is a body
  • Reduce dependencies on govuk_frontend_toolkit – currently Bootstrap and the toolkit don’t play well together

https://www.pivotaltracker.com/story/show/90529348

Editing a document

Before

screen shot 2015-04-02 at 11 55 02

After

screen shot 2015-04-02 at 11 55 21

Viewing a document

Before

screen shot 2015-04-02 at 11 53 32

Actions:
screen shot 2015-04-02 at 11 53 46

After

screen shot 2015-04-02 at 11 53 58

Actions:
screen shot 2015-04-09 at 16 59 57

Truncated attachments table

screen shot 2015-04-02 at 12 09 22

Warnings

screen shot 2015-04-02 at 11 54 33

fofr added 17 commits April 9, 2015 13:45
@fofr
Use Bootstrap 3 form styles
2f76021 
Match the behaviour of other admin apps and use styles provided by the
admin gem.
@fofr
Move shared fields and preview into partial
bc2b721
@fofr
Cleanup attachments table
205933b 
* Remove “hover” style, items aren’t clickable, use striped instead
* Add a missing table row element
* Add table-header class to highlight headings
@fofr
Correctly wrap bootstrap checkboxes
bfa33f9 
Prevent checkboxes from appearing too far left of content. This matches
the recommended Bootstrap 3 pattern: http://getbootstrap.com/css/#forms
@fofr
Remove unnecessary grid wrappers
8a15ac8 
A row with col-md-12 in this case is the same as no row and no cell.
@fofr
Separate edit and publish manual buttons
7189417 
* Make it harder to accidentally click the wrong one.
* Put the more commonly used edit button first.
* Hide the publish button altogether when you can’t publish, disabled
buttons have proved to be confusing in the past and users continue to
try and interact with them
@fofr
Lessen importance of 'updated' text
bbfda33 
Use a lighter colour to indicate when an item was updated, to make the
list of sections or manuals easier to scan.
@fofr
Make section add/reorder actions clearer
6ddcd3e
@fofr
Tidy up manual and document show pages
7ffb148 
* Correctly space sections with a consistent vertical rhythm
* Use `lead` styles to make summary more readable
* Remove collapsible body function, instead restrict height, and don’t
show at all unless there is a body
* Remove dependencies on govuk_frontend_toolkit – currently the admin
template and the toolkit don’t play well together
@fofr
Remove times from attachments table
72540be 
A date is usually enough to determine how recently something has been
changed.
@fofr
Be explicit that publishing sends emails
03cda82
@fofr
Force words to wrap onto new lines
3eeac00 
`<pre>` tags have a default word wrap that causes words to break
mid-word, which makes reading content difficult.
@fofr
Add warnings when publishing
2dd6aab 
* Bump admin gem to pick up confirm JS module
* Use module to warn when clicking publish or withdraw buttons and to
confirm user action
* Separate publish, withdraw and edit buttons to avoid accidental clicks
* Always include a title on the “publish” container
* Completely hide publish button when unavailable, a disabled button is
confusing
@fofr
Truncate large tables of attachments
a0534ea 
* Some documents have a couple of attachments, others have hundreds
* Always show the first 5 attachments
* When more than 5 and when JS is enabled, hide the rest behind a
toggle with a link that indicates how many more attachments will be
revealed
* Pattern pulled from Transition where it was well received for tables
containing hundreds of mappings
@fofr
Refine publish action and messaging
dda7526 
Rather than hiding the entire `publish` pane, put it back with
appropriate messaging.

* Don’t mark the panel itself as dangerous, the publish action is red
and that’s enough
* Don’t give warnings when there are no changes or a user can’t publish
* Use smart quotes in messaging
@fofr
Separate withdraw action in UI
62c3024 
Clearly distinguish between editing, publishing and withdrawing. As
withdrawing is the least used action it is at the bottom.
@fofr
Clarify withdrawn state
e7dd134 
When something is withdrawn it is draft like, but not a draft. Instead
indicate that the document can still be edited and published.
@evilstreak
Copy link
Contributor

👍 This is great

evilstreak added a commit that referenced this pull request Apr 10, 2015
@evilstreak
Merge pull request #466 from alphagov/improved-ui
a613008 
Make UI more like other admin apps, prevent accidental publishing
@evilstreak evilstreak merged commit a613008 into master Apr 10, 2015
@evilstreak evilstreak deleted the improved-ui branch April 10, 2015 11:02
@benilovj benilovj mentioned this pull request Apr 8, 2016
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@fofr @evilstreak