search

binarybucks / homA

An extensible framework for the smart home
Eclipse Public License 1.0
137 stars 25 forks source link

Beautify webinterface in firefox #85

Open binarybucks opened 11 years ago

simonvanderveldt commented 9 years ago

This seems to work fine for me with Firefox 37.0.1, is there still something that needs fixing?

stylpen commented 9 years ago

It works but it doesn't look the same for me. Here is a screenshot I just made: ffvschrome Firefox 37.0.1 is on the left, Chrome 42.0.2311.90 on the right and while the layout is exactly the same sliders (input type range) and switches (input type checkbox) are not. In another project I had some success styling sliders so they look the same in FF and Chrome but I've had more trouble getting nice looking switches in Firefox without too much effort. But I'm certainly no expert on this so probably this is easy but not for me right now. If it should look the same then there is still some CSS that needs fixing.

simonvanderveldt commented 9 years ago

Thx for the screenshots, I see the same now.

The checkbox/sliders seem to be fixable with some ugly hacks http://stackoverflow.com/a/24788957.

Unfortunately it seems like the sliders cannot be fixed, seems to be a bug in Firefox. The selector we need input[type='range']::-moz-range-thumb::beforedoesn't work in Firefox, I'm guessing because it's having issues with a pseudo-selector used in combination with the -moz-range-thumb pseudo-selector. It gives the following error: Extra pseudo-element 'before'. Ruleset ignored due to bad selector. I've tried all kinds of permutations of the pseudo-selectors, none of them work.

stylpen commented 9 years ago

Good job with the checkboxes! They look the same but there is a difference in behaviour, though. Not between Firefox and Chrome but between the old version and the new one using the div wrapper: You now have to click exactly at the "knob" (the dark gray thing when it is in off position or blue part when it is on). Previously, clicking anywhere on the entire switch was enough to toggle it. I don't mind that - it's a bit more like switches in real life now! We could have sliders in Firefox and Chrome (possibly also IE) look the same if we change the design from filling bars to something that doesn't need the input[type='range']::-moz-range-thumb::before selector. Here, for example, is a more conservative design in FF (left) and Chrome (right): ffvschromeslider They look different than in the Android app anyway so why don't we choose a design that all browsers can support?

stylpen commented 9 years ago

Whoops, I didn't mean to close the issue when merging. We still have the slider issue ...

simonvanderveldt commented 9 years ago

Good job with the checkboxes! They look the same but there is a difference in behaviour, though. Not between Firefox and Chrome but between the old version and the new one using the div wrapper: You now have to click exactly at the "knob" (the dark gray thing when it is in off position or blue part when it is on). Previously, clicking anywhere on the entire switch was enough to toggle it. I don't mind that - it's a bit more like switches in real life now!

@stylpen Thx! :) I think I can fix it so the behaviour will be as it was whilst still working in firefox. Although the current behaviour is more like a physical toggle I do think the old behaviour was easier, especially when using the webinterface on a mobile/tablet. Give me sec to come up with a fix.