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

Collapsible set (accordion): Cleanup #1899

Closed
toddparker opened this Issue Jun 22, 2011 · 8 comments

Comments

Projects
None yet
6 participants
@toddparker
Contributor

toddparker commented Jun 22, 2011

The collapsible set needs some visual and functional cleanup:

  • All sections are collapsed by default (which is fine) but there isn't any way to set one as open. The data-collapsed="false" attribute doesn't seem to affect anything. This is a bug.
  • The last item doesn't get the rounded corners - #1751
  • We need to add a background gradient to the body of each section so they are visually connected. By default the body of each section should match the theme of their parent header (these are individually themable) but if the data-role is specified on the wrapper for the section content, that should be respected. So if the parent header doesn't have a theme specified, both the heading and body will get swatch C (ui-bar-c and ui-body-c respectively). If data-theme is set to A on the heading, the body will also be A. If the data-theme is then set to B on the body wrapper in this example, the header will be A and the body B.

@ghost ghost assigned scottjehl Jun 22, 2011

@adondero

This comment has been minimized.

Show comment
Hide comment
@adondero

adondero Jun 23, 2011

one thing that we have noticed (along with the last item not having rounded corners on the bottom) is that when the first item is collapsed, the bottom corners are rounded.

You can see the it in the Demo site (scroll to the bottom where collapsible-set example is and collapse the first item)
http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/content/content-collapsible.html

one thing that we have noticed (along with the last item not having rounded corners on the bottom) is that when the first item is collapsed, the bottom corners are rounded.

You can see the it in the Demo site (scroll to the bottom where collapsible-set example is and collapse the first item)
http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/content/content-collapsible.html

@alumni

This comment has been minimized.

Show comment
Hide comment
@alumni

alumni Jul 19, 2011

Also, the +/- button always has the D theme no matter what the collapsible theme is. I think it should be inherited, or at least an option to change it should be provided.

Later Edit: Maybe 'click to collapse contents' could also be removed. I don't know why is this useful, but I wouldn't want to have this text if the application is not in English.

alumni commented Jul 19, 2011

Also, the +/- button always has the D theme no matter what the collapsible theme is. I think it should be inherited, or at least an option to change it should be provided.

Later Edit: Maybe 'click to collapse contents' could also be removed. I don't know why is this useful, but I wouldn't want to have this text if the application is not in English.

@noiselesslark

This comment has been minimized.

Show comment
Hide comment
@noiselesslark

noiselesslark Aug 16, 2011

The icon always has a border around it as well - the cropping of the icon image doesn't come as close to the icon as in all the other button icons in jQuery Mobile.

The icon always has a border around it as well - the cropping of the icon image doesn't come as close to the icon as in all the other button icons in jQuery Mobile.

@ghost ghost assigned gseguin Sep 6, 2011

@gseguin

This comment has been minimized.

Show comment
Hide comment
@gseguin

gseguin Sep 8, 2011

Member

Filed #2404 for the first issue

Member

gseguin commented Sep 8, 2011

Filed #2404 for the first issue

gseguin added a commit to gseguin/jquery-mobile that referenced this issue Sep 14, 2011

Fix for issue #1899
Refactored some css classes
Fixed bottom corners in set with only one collapsible

gseguin added a commit to gseguin/jquery-mobile that referenced this issue Sep 14, 2011

Fix for #1899:
Re-styled collapsible and collapsible set so the content of the collapsible now is applied the ui-btn-up-%%theme%% class. This way the border will match the border of the header button. In the meantime in the ui-collapsible-content class we remove the background image and tweak the margin/padding to make everything look good.
Combined the expand/collapse handlers into a single one and made extensive use of .toggleClass()
@gseguin

This comment has been minimized.

Show comment
Hide comment
@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Sep 19, 2011

Contributor

I just check out this branch and I really like the simplified +/1 icons (buttonless). @scottjehl - want to weigh in before we push this to master?

Contributor

toddparker commented Sep 19, 2011

I just check out this branch and I really like the simplified +/1 icons (buttonless). @scottjehl - want to weigh in before we push this to master?

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Sep 20, 2011

Contributor

Ok, so the suggestion on this is to not set a bg color or stroke unless the user adds the data attribute to set the theme swatch for the content block. We also need to make sure you can set this on the accordion parent so it ripples through.

@gseguin - once this is in, we're good to go. Looks great.

Contributor

toddparker commented Sep 20, 2011

Ok, so the suggestion on this is to not set a bg color or stroke unless the user adds the data attribute to set the theme swatch for the content block. We also need to make sure you can set this on the accordion parent so it ripples through.

@gseguin - once this is in, we're good to go. Looks great.

gseguin added a commit that referenced this issue Sep 25, 2011

Fix for #1899
Added data-content-theme to style the content of the collapsible
data-theme and data-content-theme inherit collapsible-set's
@gseguin

This comment has been minimized.

Show comment
Hide comment
@gseguin

gseguin Sep 25, 2011

Member

Landed branch collapsible-redesign which takes care of this issue and many other ones.

Member

gseguin commented Sep 25, 2011

Landed branch collapsible-redesign which takes care of this issue and many other ones.

@gseguin gseguin closed this Sep 25, 2011

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