Skip to content
This repository

Read-only lists styling #4347

Closed
agcolom opened this Issue May 13, 2012 · 23 comments

6 participants

Anne-Gaelle Colom Jasper de Groot Maurice Gottlieb Todd Parker Tyler Benziger Scott Jehl
Anne-Gaelle Colom
Collaborator
agcolom commented May 13, 2012

It seems that read only lists cannot be themed using the data-theme attribute, whether this is a simple read-only list or as part of a nested list. In the fiddle below, click on the first list item. The nested list after that contains a liked list item and some read only list items. Only the linked li get the data-theme color.

http://jsfiddle.net/enxXQ/68/

Jasper de Groot
Owner
uGoMobi commented May 13, 2012

hi Anne,

Both are styled according the assigned swatch, but linked LI's are styled as buttons and read-only/static LI's are styled as body.

Jasper

Maurice Gottlieb

Hi Anne :-)
The li items are styled like a background if they are not a link: http://jsfiddle.net/MauriceG/enxXQ/69/

Anne-Gaelle Colom
Collaborator
agcolom commented May 13, 2012

Hi Maurice, hi Jasper,

Thanks a lot for your quick response. I'll clarify the docs tomorrow then as this may otherwise lead to confusion.

Goodnight Europe :-)

Anne

Jasper de Groot
Owner
uGoMobi commented May 13, 2012

Anne,

On this page http://jquerymobile.com/test/docs/lists/docs-lists.html in the "Read-only lists" paragraph it says "The framework defaults to styling these list with the "c" theme swatch". That's not true, it inherits the content or page theme swatch if nothing is set. Can you change this when add info about not being styled as buttons? Thanks!

Todd Parker

Thanks all. I do wonder if we need to re-think how we style read-only lists to give people control over what swatch is used, maybe for 1.2. We could apply the specified body/content swatch instead of button classes. Alternatively, we could assign the button classes, just like linked lists but negate the gradient and just use the bg color to give these a flat appearance. This second approach might be better because with the first (using content/body) these could still be gradients and thus look clickable.

Thoughts?

Jasper de Groot
Owner
uGoMobi commented May 16, 2012

To avoid confusing; currently you can control the style of the read-only list with data-theme, but we assign the body class and not the button class. See http://jsfiddle.net/Qw3wr/3/

When it comes to lists where static and linked list items are combined this often doesn't look good (body and button class have different colors) or it is not clear what is clickable like Todd said.
I am in favour of using plain background color of the btn-up class. Also, I suggest to drop the smaller font-size/height for static list items.

A reminder: we have to check how changes work out for the generated nested list page.

Talking about nested lists. Something that could be improved or clarified a bit more in the docs is that you have to set data-header-theme on the parent list UL and the data-theme for the body and listview on the nested list UL.

Jasper de Groot
Owner
uGoMobi commented May 16, 2012

Actually it is very easy to accomplish this, but I don't know how the Theme Roller works exactly.

@TylerBenziger :

If we add an .ui-btn-a class and we want its background to be the same as .ui-btn-up-a background, would it work if we do it like below?

.ui-btn-a {
    background:             #333 /*{a-bup-background-color}*/;
}
.ui-btn-up-a {
    border: 1px solid       #111 /*{a-bup-border}*/;
    background:             #333 /*{a-bup-background-color}*/;
    // rest of the button up styling
}

("a" could be any swatch letter)

Tyler Benziger
tybenz commented May 16, 2012

@uGoMobi That would world perfectly. Keeping that CSS comment will allow ThemeRoller to update both values as well.

Jasper de Groot
Owner
uGoMobi commented May 16, 2012

@TylerBenziger - Thanks for your quick response and cool that it would work!

@ everyone - I'll wait until you have shared your thoughts about best way to style read-only lists. If it turns out that we want to style them as "flat buttons" I can create a PR for that.

Todd Parker

I wish there was a clean way in CSS to negate the gradients since we already have the bg color specified in these swatches but I think that would require a really ugly selector like:

.ui-btn-up-a, 
.ui-btn-up-b,
...
.ui-btn-up-z {  negate the gradients } 

So I think that leaves us with adding this new class as suggested by @uGoMobi. I think we need to also include the font color, shadow, border, etc. so this is going to be more verbose.

@scottjehl or @Wilto?

Jasper de Groot
Owner
uGoMobi commented May 16, 2012

@toddparker

The idea is that not only static list items get that class, but all buttons. So for clickable buttons it would be an extra class which would also be very useful for making the active/focus state themable.

At first I thought we had to duplicate background, but that isn't necessary. Same goes for border, color, etc..
We could move all properties except background-image from ui-btn-up-a to ui-btn-a. Hover and down state rules can stay the same.

.ui-btn-a {
    border: 1px solid       #111 /*{a-bup-border}*/;
    background:             #333 /*{a-bup-background-color}*/;
    font-weight: bold;
    color:                  #fff /*{a-bup-color}*/;
    text-shadow: 0 /*{a-bup-shadow-x}*/ 1px /*{a-bup-shadow-y}*/ 1px /*{a-bup-shadow-radius}*/ #111 /*{a-bup-shadow-color}*/;
}
.ui-btn-up-a {
    background-image: -webkit-gradient(linear, left top, left bottom, from( #444444 /*{a-bup-background-start}*/), to( #2d2d2d /*{a-bup-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient( #444444 /*{a-bup-background-start}*/, #2d2d2d /*{a-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient( #444444 /*{a-bup-background-start}*/, #2d2d2d /*{a-bup-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient( #444444 /*{a-bup-background-start}*/, #2d2d2d /*{a-bup-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient( #444444 /*{a-bup-background-start}*/, #2d2d2d /*{a-bup-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient( #444444 /*{a-bup-background-start}*/, #2d2d2d /*{a-bup-background-end}*/);
}
.ui-btn-up-a a.ui-link-inherit {
    color:                  #fff /*{a-bup-color}*/;
}
Scott Jehl

Maybe you've already considered this, but I think that we could probably just add our existing button class to static listview li's and then negate the gradient (background image part) via the listview CSS to make it flat.

Say ui-btn-up-a was added to static listview li's by default...

<li class="ui-li ui-li-static ui-btn-up-a">...</li>

The following CSS would knock back the gradient to flat:

.ui-li-static { background-image: none; }

To my eye, that solves this one with little overhead.

Jasper de Groot
Owner
uGoMobi commented May 17, 2012

@scottjehl

That is a good solution and even easier to accomplish (change 1 word in JS and at that rule). The reason I came up with that extra class is that I already had it in mind for making the active state themable.
We can look into that later so I say +1 for your solution.

What are the thoughts about dropping smaller font-size / height so they are equal to other buttons?

Todd Parker

I think when we have swatch-specific active classes, we'll have a .ui-btn-active-a class that will just be swapped in so that shouldn't be an issue here. Active will have to be a full button state class like up, hover, down per swatch.

I think that the read only lists already have less padding (=height) and I don't think I'd want the font size be be any smaller.

Jasper de Groot
Owner
uGoMobi commented May 17, 2012

@toddparker - sorry, I think my English language skills let me down again. I meant dropping/removing the rule that makes them smaller now. I suggest to make them equal size as other list buttons.

Jasper de Groot
Owner
uGoMobi commented May 17, 2012

This is what is going to look like: http://jsfiddle.net/Qw3wr/6/

[Update]

Example where read-only list items have same font-size and padding as other buttons: http://jsfiddle.net/Qw3wr/8/

This would also solve #4254

[Edit:] I removed the source code for those examples now the changes landed in master.

Todd Parker

@uGoMobi - the rationale for making read-only lists smaller is that they don't require interaction so they could be more compact but I do think that second fiddle does look nice. Sort of begs the question of whether we should support mini lists to accomplish the previous design. In any case, this is a big enough of a change that this should be for 1.2, not 1.1.1 but I'm on board. Anyone else have opinions?

Anne-Gaelle Colom
Collaborator
agcolom commented May 18, 2012

Yes I think the example does look very nice. Also in favour of 1.2 release, as it is a major change. It may be missed by the community if it goes in 1.1.1.

Whaou! So much going into 1.2!!! That's really going to be a major release! That's really good and exciting!

Jasper de Groot
Owner
uGoMobi commented May 21, 2012

What do you think about adding a new data attribute that set read-only list to the smaller size and disables auto generated nested list pages so there won't be a linked list item?
The last is an option that I have seen people asking for in the issue tracker.

Or the other way round; use the above as default and add an option to allow linked nested lists and set the same font-size and padding as regular buttons for all items in the list.

Todd Parker

@uGoMobi - Good question. I think if we all agree the more consistent listview behavior is preferred, we could make the change as the default for 1.2 but add a section on the list docs showing the CSS rule to tweak the heights to get back to the 1.1 style. Not sure we need a new attribute, this could just be a style override. Or, if we do anything it would be to allow mini on read-only but that may be a lot of work. That would be a solid change package.

Re: the nested lists, do you have more info on that? We should break that out as a separate discussion to keep each change as small and discrete as possible.

Jasper de Groot
Owner
uGoMobi commented May 21, 2012

@toddparker - Adding a styling suggestion to the docs sounds like a good idea. Allowing mini only for read-only lists indeed requires a lot of CSS to avoid regression that I think we should forget about that.

Note: We should wait with making the read-only list changes in master until a fix for the issue referenced above has landed and cherry-picked into 1.1 branch. [Update:] fix is PR #4380 - those changes have to be revert

Todd Parker

OK, agreed then. We'll tweak the default styles for 1.2 to use the same padding/size as normal lists for read-only, but add a docs blurb and demo showing how to use a bit of CSS to restore the older style as an override.

Jasper de Groot uGoMobi closed this in 571c08e June 26, 2012
Jasper de Groot uGoMobi reopened this June 26, 2012
Jasper de Groot
Owner

Reopend because we still need to update the docs.

Jasper de Groot uGoMobi closed this in 8c4a5f2 June 27, 2012
Elliot Smith townxelliot referenced this issue from a commit July 30, 2012
Commit has since been removed from the repository and is no longer available.
Elliot Smith townxelliot referenced this issue from a commit July 30, 2012
Commit has since been removed from the repository and is no longer available.
Jake Boone jakeboone02 referenced this issue from a commit in jakeboone02/jquery-mobile November 05, 2012
Jake Boone Docs: Added themed read-only list examples
Provides and example for each default swatch of the new flat style for read-only list items in 1.2 (see #4347 and 571c08e).
221de19
Jake Boone jakeboone02 referenced this issue in jquery/themeroller.jquerymobile.com April 01, 2013
Closed

Read-only list item examples needed #116

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.