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

Cleanup mapping controls and improve usability [57569076] #28

Merged
merged 24 commits into from Oct 1, 2013

Conversation

@fofr
Copy link
Contributor

@fofr fofr commented Sep 30, 2013

  • Update filter markup to bootstrap defaults and remove custom styles
  • Add a header containing mappings count
  • Make "remove filter" link available to all filtered results
  • Put "add mapping" button and pagination alongside each other
  • Introduce a visited link colour, with overrides for buttons
  • Only use New Transport typeface for headings
Paul Hayes added 20 commits Sep 27, 2013
* Rename query params to parameters
* Add an abbreviation for TNA
* Bootstrap comes with link and active link colours, but no visited
colour
* Set visited link colour to purple
* Create a colours file for this variable
* Stop links in the header, which are against black, from appearing
purple
* Wrap main role area in a 'content' class
* Use bootstrap's form-inline class and markup and remove custom filter
label and input styles
* Add placeholder text with example path
* Add a filter icon to input field using boostrap pattern, with tooltip
* Cleans up vertical alignment and attempts to clarify feature
* Switch from success style, we haven't succeeded yet
* Create variables for each button's text colour, this isn't already
provided
* Use these colours to override the visited text colour
* eg Stops blue buttons having purple text
* Keep UI elements contiguous
* Easily add and remove margins based on the baseLineHeight defined by
bootstrap (20px)
* Avoids the need to create CSS classes that simply manipulate margins
* Labels were being styled at 14px/20px, when all other text was
13px/18px
* Icon is confusing
* Pagination when placed alongside a button looked awkward
* Create a structure import for structure based variables
* Update pagination to be 30px high (default button size)
* Add a default for border radius too
* Only apply bottom margin on pagination
* Move "no mappings" and "remove filter" messages to the Filter by path
label
* Make "remove filter" link available on all filtered results pages
* Avoid stacking controls
* Move (presumed) less used 'new mapping' button to the right, with
pagination on the left
* Bring new mapping button back to left when no pagination, or no
mappings
* The default pagination window made the number of page links on screen
unruly, and at thinner page widths would break the layout.
* See https://github.com/amatsuda/kaminari
* Switch from new to add, but leave 'new' in place on create pages/forms
* Add a plus icon
* Move button to a partial
* Show a total count for all mappings
* It helps illustrate how much a list has been filtered
* On sites and mappings indexes use the bootstrap page header class on
the H1
* This increases vertical spacing and adds a light horizontal rule
* With a header containing the mappings count, this message in the
filter label is no longer necessary
* Keep body copy using bootstrap defaults
* Body copy now uses: "Helvetica Neue", Helvetica, Arial, sans-serif
* Improves button spacing and icon alignment in bootstrap
* Conforms with other admin tools
@rgarner
Copy link
Contributor

@rgarner rgarner commented Sep 30, 2013

Visiting the last page makes the pagination controls disappear.

@ghost ghost assigned jamiecobbett Sep 30, 2013
<% else %>
<%= paginate(@mappings) %>
<div class="clearfix">

This comment has been minimized.

@rgarner

rgarner Sep 30, 2013
Contributor

What's the clearfix for? (Excuse my ignorance - if I remove it, nothing seems to change)

This comment has been minimized.

@fofr

fofr Oct 1, 2013
Author Contributor

Yep, this was unnecessary. I've removed and revised in d0c1f30

@tombye
Copy link

@tombye tombye commented Sep 30, 2013

If the <section role="main"> tag is involved in this, can we change it to <main role="main"> now that's a valid tag?

Paul Hayes added 3 commits Oct 1, 2013
* Fix bug where pagination would be hidden on the last page
* Update pagination feature test to look for two sets of pagination
links
* Include missing 'then' in original page 2 scenario
* Remove the clearfix and wrapper which aren't necessary
* Include a margin on the add button, when it collapses on thinner page
widths it will keep the correct vertical spacing
* Use the new HTML5 semantic element <main>, which aligns with role=main
* Update the HTML5-Shiv from v3.6.2pre to v3.6.2, which includes
support for <main>
* Remove .content class, <main> is unique enough, it can only be used
once anyhow
@fofr
Copy link
Contributor Author

@fofr fofr commented Oct 1, 2013

@tombye I've updated to use <main>, and switched to the version of HTML5 Shiv being used on gov.uk (3.6.2), although 3.7 came out last week.

@rgarner
Copy link
Contributor

@rgarner rgarner commented Oct 1, 2013

Looks good. @jamiecobbett ?

* We're using this as a positive action in other admin apps
jamiecobbett added a commit that referenced this pull request Oct 1, 2013
Cleanup mapping controls and improve usability [57569076]
@jamiecobbett jamiecobbett merged commit 6a40d83 into master Oct 1, 2013
@jamiecobbett jamiecobbett deleted the mapping-controls-57569076 branch Oct 1, 2013
@jamiecobbett
Copy link
Contributor

@jamiecobbett jamiecobbett commented Oct 1, 2013

Lots of nice improvements here, nice work :)

@tombye
Copy link

@tombye tombye commented Oct 1, 2013

👍 (belatedly)

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

4 participants