while it does improve repaint performance on *some* setups (OS X+Chrome+Low-DPI),
it seems to have no effect on most (OS X+FF, OS X+Chrome+High-DPI, Linux+Chrome),
and the opposite effect on others (Linux+FF).
The approach in #7517 didn't work on Safari
(as in the entire page was invisible).
This is the same mechanism used to size the CodeMirror div on the edit page, and should work more reliably.
fixes#7355
Also limit the number of query "jump", and use variables.
In particular there was a container width discontinuity at 768 pixel
where below 768 container width is 100% and "only" 720px on wider
screen, making a jump.
So now Css media query have 3 breakpoints:
- <540 px with (aka -no name-)
- colapsed menubar
- vbox for prompt
- 100% width container
- 540 -> 767 (aka -xs- )
- expand menubar
- hbox fro prompt
- 767 -> 991 (aka -sm-)
- show save widget
- fix width (768px)
- 991+ (aka -md-)
- extra save widget info (date time)
- fix with of 991 px.
- 1200+ (aka -lg-)
- widht of 1200px.
of course we've set soem variable wrongly so this is still kinda-a-hack
as we shoudl have pushed the xs-sm limit lower instead of pushing the
nothing-xs limit up but I don't want to "fix it" now.
mainly in navbars, where we were doing custom
things that bootstrap already did with classes.
This did require the removal of multiple class LESS inheritance for
navbar buttons, because it doesn't work properly. Seems like a LESS bug, but I'm not sure.