ibm-js / deliteful-tutorial

The example application that is explained in the deliteful tutorial.

Home Page:http://ibm-js.github.io/deliteful-tutorial/runnable/part8-2/index.html

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Increase Switch height

pruzand opened this issue · comments

The current height of the Switch is too small on mobile devices which makes it hard to use.
(fyi the Switch height is defined from the current value of the active line-height css property, which seems to be the one set on body from what I see. Also, note that changing this property at this level would also benefit to the other controls in the Settings panels, which are also quite small on mobile because of this )

Does it mean we might want to revisit our default sizing, at least on mobile? (we are supposed to be multichannel so in some way users should not have to do things to run correctly (default sizing included) on mobile & desktop?

in some way users should not have to do things to run correctly (default sizing included)

I understand your point. But on the other hand, usually (at least that's my feeling), the line-height is something that is/would be defined by the developer when designing its page layout and widgets should fit accordingly. For ex, he will set a line-height on its container, and expects the children of the container to size and align properly (e.g. a label with a Switch on the same line). If we set a specific line-height on the Switch, it would make the layout task harder for the author IMO.

So what about defaultapps.css? Or something like that?

defaultapps.css makes sense indeed.

@dmandrioli, @wkeese, what do you think?

Sure, having an opt-in defaultapp.css file makes sense to me. Actually, I thought we had that already.

@wkeese yes we already have that file, I was just looking for opinions of whether that file should also contain maybe some default values for mobile like line-height that are bigger so that the application can pick them up.

I think having a rule in defaultapp.css to increase line-height on mobile makes sense.
This could be done by a media query based on pixel density.

@dmandrioli can you create an issue on delite (I think defaults.css is there) and assign it to you?