Material Template Fixes #1662

MarcSkovMadsen · 2020-10-20T16:24:57Z

I have tested the Material Template and see some issues that I would like to fix

The header items overflow the header on the right
The header has no box shadow (as the Vanilla template has)
There are a lot of scrollbars.
A little bit more padding/ margin is need.
Cannot set the main max-width.
Add a little bit of gray to the sidebar.

I will develop the fixes ASAP. Will change the Material Template to behave as the Vanilla Template.

philippjfr · 2020-10-20T16:28:56Z

See #1661

philippjfr · 2020-10-20T18:01:06Z

Sorry misread, thought this was Golden layout as well.

philippjfr · 2020-10-20T18:01:48Z

There are a lot of scrollbars.

So I don't know what's up with that, I do not see scrollbars, only when I actually try to scroll. Same with the other templates.

philippjfr · 2020-10-20T18:05:18Z

That's probably specific to my particular browser tbh, so I'll probably have to fix this everywhere for all templates.

philippjfr · 2020-10-20T18:09:00Z

Actually I can't any browser to show all the scrollbars all the time, is this a windows thing?

nghenzi · 2020-10-20T18:14:46Z

I see the scrollbars in windows too with chrome

philippjfr · 2020-10-20T19:17:30Z

Okay, clearly needs fixing but really I blame windows 😜

MarcSkovMadsen · 2020-10-20T19:47:42Z

The only thing I know is that overflow: auto is handle differently by Chrome and Firefox. As far as I remember Chrome shows disabled scrollbars while Firefox only shows the scrollbars when needed. Therefore I always set them to scroll instead of auto because then they behave the same and I don't need to handle margin/ padding/ width differences between browsers.

MarcSkovMadsen · 2020-10-20T19:48:44Z

MarcSkovMadsen · 2020-10-21T03:17:29Z

FYI. I will start working on this.

…al-template-fixes

MarcSkovMadsen · 2020-10-21T05:39:33Z

I've now implemented the fixes needed and aligned with the VanillaTemplate.

I have some ideas on providing a MaterialTheme for Bokeh. I will try to add that as well.

MarcSkovMadsen · 2020-10-21T05:53:58Z

I've now added a Bokeh MaterialTheme and MaterialDarkTheme but then

the default.css is no longer imported (and it gets the purple header as shown below)
and I don't think the bokeh theme is actually changed. The font in the plots does not look bigger and Roboto like

I will stop now. @philippjfr can you help or guide me to a solution on the two issues above? Thanks.

philippjfr · 2020-10-21T10:49:19Z

panel/template/theme.py

@@ -59,3 +59,113 @@ class DarkTheme(Theme):

    bokeh_theme = param.ClassSelector(class_=(_BkTheme, str),
                                      default=_BkTheme(json=BOKEH_DARK))
+
+MATERIAL_FONT = "Roboto, sans-serif, Verdana"
+MATERIAL_THEME = {


This should live in panel/template/material/init.py

That's awesome. I just did not know that one. Will move it.

philippjfr · 2020-10-21T10:50:58Z

Again, in the interest of making quick progress here I'll merge and make a new PR. You have access rights for this repo so please push directly to holoviz/panel rather than your own fork so we can collaborate more easily.

MarcSkovMadsen · 2020-10-21T10:57:27Z

@philippjfr . Did you have any ideas on fixing the below

I've now added a Bokeh MaterialTheme and MaterialDarkTheme but then

the default.css is no longer imported (and it gets the purple header as shown below)
and I don't think the bokeh theme is actually changed. The font in the plots does not look bigger and Roboto like

MarcSkovMadsen · 2020-10-21T10:59:15Z

Hi @ceball

I've have heard you have an interest in applications using Material Theme. If you have any ideas, guidance, requirements feel free to comment. Thanks.

philippjfr · 2020-10-21T11:16:32Z

the default.css is no longer imported (and it gets the purple header as shown below)

That is deliberate, the default.css corresponds to the default theme. I'm still trying to understand why you created the MaterialTheme instead of extending the DefaultTheme but maybe it's just not well documented and that was your intention?

MarcSkovMadsen · 2020-10-21T11:21:55Z

The intention is to make the Bokeh/ HoloViews plot look consistent with the bootstrap theme. This includes the "Roboto" font, some font size changes, some color changes etc.

Maybe I implemented it wrongly. I believe the Bokeh JSON THEME is correct. But maybe I need some guidance on how to move on from there @philippjfr ?

MarcSkovMadsen · 2020-10-21T11:25:14Z

@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

MarcSkovMadsen · 2020-10-21T11:30:42Z

One problem right now is I don't know how to find documentation for MASTER. I can only find documentation for 0.9.7.

Maybe a link to the MASTER documentation in the GITHUB README or the DEVELOPER GUIDE would be nice to have.

philippjfr · 2020-10-21T11:32:35Z

Here's where those builds go: https://pyviz-dev.github.io/panel/

xavArtley · 2020-10-21T11:34:31Z

@philippjfr
when is updated this site?
For what I see the version is Panel 0.10.0a24.post1+g2b9c98f documentation

philippjfr · 2020-10-21T11:38:59Z

The builds have been broken for a while, trying to fix that. It's usually rebuilt on each dev release or when a commit ending in [doc-build] is merged.

material change comment

9d2439e

MarcSkovMadsen added the in progress label Oct 20, 2020

Marc Skov Madsen added 5 commits October 21, 2020 05:28

Merge branch 'master' of https://github.com/holoviz/panel into materi…

48066cc

…al-template-fixes

add query parameter for app name

8e99ee9

lots of fixes

a1ecf4b

fix main area scroll problems :-)

3b58319

fix font-issue

2fcb1fe

added Bokeh MaterialTheme and MaterialDarkTheme

2820cc3

philippjfr reviewed Oct 21, 2020

View reviewed changes

philippjfr merged commit 7e39884 into holoviz:master Oct 21, 2020

philippjfr mentioned this pull request Oct 21, 2020

Fix up theme issues #1670

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Material Template Fixes #1662

Material Template Fixes #1662

MarcSkovMadsen commented Oct 20, 2020 •

edited

Loading

philippjfr commented Oct 20, 2020

philippjfr commented Oct 20, 2020

philippjfr commented Oct 20, 2020 •

edited

Loading

philippjfr commented Oct 20, 2020 •

edited

Loading

philippjfr commented Oct 20, 2020

nghenzi commented Oct 20, 2020

philippjfr commented Oct 20, 2020

MarcSkovMadsen commented Oct 20, 2020

MarcSkovMadsen commented Oct 20, 2020

MarcSkovMadsen commented Oct 21, 2020

MarcSkovMadsen commented Oct 21, 2020

MarcSkovMadsen commented Oct 21, 2020 •

edited

Loading

philippjfr Oct 21, 2020

MarcSkovMadsen Oct 21, 2020

philippjfr commented Oct 21, 2020

MarcSkovMadsen commented Oct 21, 2020 •

edited

Loading

MarcSkovMadsen commented Oct 21, 2020

philippjfr commented Oct 21, 2020

MarcSkovMadsen commented Oct 21, 2020

MarcSkovMadsen commented Oct 21, 2020

MarcSkovMadsen commented Oct 21, 2020

philippjfr commented Oct 21, 2020

xavArtley commented Oct 21, 2020

philippjfr commented Oct 21, 2020

Material Template Fixes #1662

Material Template Fixes #1662

Conversation

MarcSkovMadsen commented Oct 20, 2020 • edited Loading

philippjfr commented Oct 20, 2020

philippjfr commented Oct 20, 2020

philippjfr commented Oct 20, 2020 • edited Loading

philippjfr commented Oct 20, 2020 • edited Loading

philippjfr commented Oct 20, 2020

nghenzi commented Oct 20, 2020

philippjfr commented Oct 20, 2020

MarcSkovMadsen commented Oct 20, 2020

MarcSkovMadsen commented Oct 20, 2020

MarcSkovMadsen commented Oct 21, 2020

MarcSkovMadsen commented Oct 21, 2020

MarcSkovMadsen commented Oct 21, 2020 • edited Loading

philippjfr Oct 21, 2020

Choose a reason for hiding this comment

MarcSkovMadsen Oct 21, 2020

Choose a reason for hiding this comment

philippjfr commented Oct 21, 2020

MarcSkovMadsen commented Oct 21, 2020 • edited Loading

MarcSkovMadsen commented Oct 21, 2020

philippjfr commented Oct 21, 2020

MarcSkovMadsen commented Oct 21, 2020

MarcSkovMadsen commented Oct 21, 2020

POC

MarcSkovMadsen commented Oct 21, 2020

philippjfr commented Oct 21, 2020

xavArtley commented Oct 21, 2020

philippjfr commented Oct 21, 2020

MarcSkovMadsen commented Oct 20, 2020 •

edited

Loading

philippjfr commented Oct 20, 2020 •

edited

Loading

philippjfr commented Oct 20, 2020 •

edited

Loading

MarcSkovMadsen commented Oct 21, 2020 •

edited

Loading

MarcSkovMadsen commented Oct 21, 2020 •

edited

Loading