Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Standardize buttons and form #4498

Merged
merged 26 commits into from Jun 8, 2012

Conversation

Projects
None yet
3 participants
Member

jaspermdegroot commented Jun 7, 2012

All changes are described in the changelog at the test page and in the commit messages.

Test page: http://ugomobi.github.com/buttons-form/

Fixes:
#3284
#3983
#3301
#3922
#1998
#2804
#3684
#4252
#4098
#3979
#4263
#4489

jaspermdegroot added some commits Jun 7, 2012

Fixes #3284 - Added vertical-align middle for inline buttons to creat…
…e consistency between browsers, since the default vertical alignment differs.
Fixes #3983 - Changed display inline-block rule to only be applied to…
… buttons that are direct children of the header/footer.
Hide legend instead of label for checkbox/radio and other controlgrou…
…ps. Added flip toggle (ui-slider) label to the selectors.
Adjusted top and bottom margin for consistency. Removed margin when w…
…rapped in ui-field-contain since there is already padding.
Removed rule for left/right margin on ui-input-text in header/footer …
…since we recommend to wrap in a div with class ui-bar to get padding.
Fixes #3979 and #4263 - Added/adjusted count bubble positioning and p…
…adding rules for select menu, listview buttons, and divider.
Contributor

johnbender commented Jun 7, 2012

Holy moly

@Wilto @scottjehl

We need you guys to review this stuff.

Contributor

toddparker commented Jun 8, 2012

Zach and I tested http://ugomobi.github.com/buttons-form/ on the following platforms without any major issues, everything looked good. As long as that failing test is passing, this looks ready to land. Excellent work @ugomobi

Safari 4.1.3
Opera Mobile
Opera Mini
Google Chrome
FireFox
Firefox (beta)
Apple Ipad ios4.3
Apple Ipad ios5.0.1
Samsung Galaxy Tab Android 3.1
HP Touchpad WebOS 3.0.2
Kindle Fire
Nook Android 2.2
Apple Iphone ios 5.0.1
Blackberry Playbook OS 2.0
HTC Incredible Android 2.3
Samsung Galaxy nexus Android 4.0X
HTC Surround Windows 7
Nokia Lumia Windows 7.5

Some minor issues I noticed:

SAFARI 4.1.3:
-Under form, in the slider input, 1 digit gets cut off from lack of space

IPHONE 4, HTC INCREDIBLE, DROID TOUCH (all cells with smaller screen than the GALAXY NEXUS):
-Under buttons in the Grid Blocks section:
-Button Outside UI Grid is wider than the other buttons (On all tests this occurred, including computers)
-The 2 Select buttons cut off the text within it on the right (only mobile)

OPERA MINI:

-Under Control Group, Horizontal, Some of the "X" buttons are misaligned or completely out of the box underneath them. Menu Button overlaps Search Button.

OPERA MOBILE:

-Under Form, Cannot select any "Choices" (Full size or mini). The popup menu comes up for a second, than disappears. In the old one it works fine.
-Under Control Group, Horizontal, Some of the "X" buttons are misaligned or completely out of the box underneath them. Menu Button overlaps Search Button.

jaspermdegroot added some commits Jun 8, 2012

Removed position relative from ui-btn-inner to have the icon being ab…
…solute positioned to button and not to inner (small selectmenu buttons with padding for count and icon can cause inner sticking out the button). Removed display inline-block from span inside ui-select ui-btn-text to get overflow ellipses.
Changed min-width into width since this works as well and Opera Mini …
…doesn't understand min-width here. Changed line-height into height since this is a more consistent solution for all browsers.
Member

jaspermdegroot commented Jun 8, 2012

Thanks a lot for the test result Todd and Zach!

  • Under form, in the slider input, 1 digit gets cut off from lack of space

    Fixed

  • Button Outside UI Grid is wider than the other buttons (On all tests this occurred, including computers)

    In the current situation buttons have left/right margin by default. This way you can not align them with other components. Therefor I removed that margin and only added it where really needed (i.e. inline buttons and buttons in grids). Only downside of this is that when you combine two or more buttons with a single full width button. The first go in a grid and have margin and the last not. As a "solution" I added a note in the docs (part of the first commit above) that when you can wrap a button in a div with ui-grid class and then it will get the same margin.
    I should have mentioned on the test page that I added that button outside the grid on purpose to show the difference.

[UPDATE:] I just found out we have a class ui-grid-solo for this. Will update the note in the docs.

  • The 2 Select buttons cut off the text within it on the right (only mobile)

    I used this example because the issue I fixed was about the select button being misaligned next to a regular button. Using a custom multiple select menu like this is not really good practise.
    What happens is that the multiple select has class has-count from the beginning, even when the count bubble isn't visible yet. So there is also extra padding. This makes the available space for text so small that some browsers don't even show an ellipsis anymore. Same goes for the three buttons at the top of the grid where I didn't see text at all when testing Opera Mini, but I see similar issues when I resize Chrome browser to smallest possible width.
    I was able to optimize it a little bit, but I don't think we can really fix this.

  • Under Control Group, Horizontal, Some of the "X" buttons are misaligned or completely out of the box underneath them. Menu Button overlaps Search Button. (Opera Mobile and Mini)

    Fixed

  • Under Form, Cannot select any "Choices" (Full size or mini). The popup menu comes up for a second, than disappears. In the old one it works fine. (Opera Mobile)

    I could not reproduce this on the Opera Mobile emulator, but that was after I already made a few changes. So maybe I fixed it without knowing. Other possibility is issues with fiexed toolbars. I changed the header and footer of the test page to inline.
    Can you please test again?

The branch passed all unit tests.

@toddparker - Do you want all commits to be cherry-picked into 1.1.1.?

Contributor

toddparker commented Jun 8, 2012

@ugomobi - Great news. Why don't you land this (I'll give you the pleasure of hitting the big green button). Yes, let's cherry pick this to stable since they are bug fixes. We'll re-test the opera mobile issue once this lands.

jaspermdegroot added a commit that referenced this pull request Jun 8, 2012

@jaspermdegroot jaspermdegroot merged commit ea5e7f1 into jquery:master Jun 8, 2012

jaspermdegroot added a commit that referenced this pull request Jun 8, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment