Fix up theme issues

[philippjfr]

Fixes theme issues introduced in #1662

[philippjfr]

@MarcSkovMadsen Here's a start, a user should never import a particular theme implementation directly, i.e. they should always import DarkTheme or DefaultTheme never BootstrapDarkTheme or MaterialDarkTheme, it automatically uses the appropriate implementation depending on the template you are using.

[MarcSkovMadsen]

I was doing that also. But I can start from your fix then. @philippjfr

[MarcSkovMadsen]

I can see the BOKEH JSON THEME is in fact working if i set the fonts to something large.

That solves that problem.

[MarcSkovMadsen]

Please note that now you can test with and without sidebar

http://localhost:5006/test_manual?template=material&app=no_sidebar

[philippjfr]

@MarcSkovMadsen This seems extremely broken right now, any idea why the main content does not fill the screen?

[MarcSkovMadsen]

Nope. I've not tested the Dark themes. Did not know that the css was related.

I can try to take a look tomorrow. I will have other work till late tonight unfortunately.

[philippjfr]

Nothing to do with the dark theme, happens with the default theme too:

[MarcSkovMadsen]

Actually I might have an idea @philippjfr . Because of my lack of understanding of the inner workings I switched

You can try switching it back.

[philippjfr]

Can't wait until tomorrow, I'm going to tag and release today. Going to try to figure this out, otherwise I will probably revert your changes for the time being.

[MarcSkovMadsen]

I have a few minutes more if this branch is up to date i can pull it and see if I can fix.

[philippjfr]

That fixed it, what's the deal with these huge margins:

Is this intentional?

[philippjfr]

Ah something to do with max-width. Will probably disable that by default.

[MarcSkovMadsen]

:-) You miss all the information I provide :-) Communication is difficult

[MarcSkovMadsen]

Agree on disabling by default. C.f. docs :-)

[MarcSkovMadsen]

I've not the main_max_width for the Material or Bootstrap Template yet. It's easy to do. But I have to leave now.

[philippjfr]

At least for the Vanilla theme you had also hardcoded 1000px in the actual template. Disabling the main_max_width has no effect on Material. Anyway don't worry about it, I'll figure it out.

[MarcSkovMadsen]

I don't know where the 1000px comes from. I also saw it. Thought you provided it? Maybe I did it while exploring. But forgot about it?

[MarcSkovMadsen]

The main_max_width is maybe not so important for a dashboard page. But if you have more like a "home", "about", "report" or text heavy page it's essential I believe. And centering a panel.Column is not always easy - at least I need to use some tricks that took time to develop.

[philippjfr]

Got it, seems all okay now. Thanks for all your efforts here! We can always iterate in 0.10.x releases.

[MarcSkovMadsen]

@philippjfr . One temporary solution for getting material themed widgets could be using a small script to replace the bokeh classes with the material classes. Maybe it's as simple as defining the conversions in a dictionary.

What do you think?

The thing I don't know is if I can get the script to execute every time the css class changes. But maybe I can using a MUTATIONOBSERVER.

If it works it could be a really easy and powerful thing.

POC

[philippjfr]

One temporary solution for getting material themed widgets could be using a small script to replace the bokeh classes with the material classes. Maybe it's as simple as defining the conversions in a dictionary.

Maybe at some point but not before release.