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

Give tabs need consistent nav-tab-wrapper class #936

Closed
ramiy opened this issue Aug 22, 2016 · 8 comments
Closed

Give tabs need consistent nav-tab-wrapper class #936

ramiy opened this issue Aug 22, 2016 · 8 comments
Assignees
@ramiy
Milestone
1.7

Comments

@ramiy
Copy link
Contributor

ramiy commented Aug 22, 2016

In the admin area, the plugin has 3 admin screens using tabs:

  • Settings
  • Reports
  • Donor Profile

The first two screens use WordPress nav-tab-wrapper class. The "donor" screen use custom CSS generated by Give plugin. That is why it looks different.

In my opinion, we should remove all the custom tab CSS, replacing it with nav-tab-wrapper class.

This way we are unifying the look&feel, reducing the give css and using wordpress built-in classes.
@DevinWalker
Copy link
Member

@ramiy can we keep the dashicons in use?

@ramiy
Copy link
Contributor Author

ramiy commented Aug 22, 2016

@DevinWalker Yes of course.

@ramiy
Copy link
Contributor Author

ramiy commented Aug 22, 2016

BTW, while we where discussing about .nav-tab-wrapper class, my first wp core commit for 4.7 was just accepted. Improving the .nav-tab-wrapper class. https://core.trac.wordpress.org/ticket/37257

@DevinWalker
Copy link
Member

Nice! Let's do it then. The less CSS in our plugin, the better. Congrats on the 4.7 commit. One thing that bothers me about the tabs is how they stack when there are too many.

@DevinWalker DevinWalker added this to the 1.7 milestone Aug 22, 2016
@ramiy ramiy mentioned this issue Aug 22, 2016
Merged
@ramiy
Copy link
Contributor Author

ramiy commented Aug 22, 2016 •
edited

OLD:

donor-tabs-before

NEW:

donor-tabs-after

@ramiy
Copy link
Contributor Author

ramiy commented Aug 22, 2016 •
edited

I don't like the result. The icons are not aligned properly.

@DevinWalker
Copy link
Member

Looks OK minus the icon alignment

DevinWalker pushed a commit that referenced this issue Aug 23, 2016
CSS improvements for donors section due to merge of #938 re: #936
adf842b
@DevinWalker
Copy link
Member

This is fixed

DevinWalker pushed a commit that referenced this issue Aug 24, 2016
Merge branch 'release/1.7' into issue/370
ba5b9d7 
* release/1.7: (22 commits)
  Space remove
  Fixed incorrect variable name
  removed unnecessary var
  CSS improvements for donors section due to merge of #938 re: #936
  Sentence closures and doc block improvements
  Do not format amount which is already formatted
  Added a readme item for #780
  Added back the gateway column #780
  Removed the gateway column #780
  Improved layout of error logs page, doc block updates
  Change log item for #937 added
  Ensure API and System Info tabs don't have save button output #937
  Reverted tabs to pre-1.5 state - a page reload after clicking each tab #937
  a11y: add `<label>` fields to newsletter `<input>` fields, with `for` attributes and `class="screen-reader-text"`
  Remove Give Tabs (`#customer-tab-wrapper-list`), replaced by WordPress Tabs (`.nav-tab-wrapper`)
  Use WordPress `.nav-tab-wrapper` class in Donor screen tabs
  Doc block updates
  Auto format amount with decimal separator when focusout from money field
  Fix currency icon before input field css bug
  Remove all decimal seperator except last if thousand seperator is same ad decimal
  ...
@mathetos mathetos changed the title Give tabs Give tabs need consistent nav-tab-wrapper class Oct 21, 2016
@mathetos mathetos added the a11y label Oct 21, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ramiy ramiy

Labels
None yet
Projects
None yet
Milestone
1.7
Development

No branches or pull requests
3 participants
@ramiy @mathetos @DevinWalker