Fix CSS load order in Templates

[MarcSkovMadsen]

For some reason the load order of the css had been switched ??

It's very important to first load the external, official framework css from getbootstrap, material design etc.

And then secondly import the customizations done in the templates. Otherwise the customizations will not take effect.

[MarcSkovMadsen]

In order for the templates to be useable this needs to be released @philippjfr .

[MarcSkovMadsen]

I've found the cause ad43110#r43609468

[philippjfr]

In order for the templates to be useable this needs to be released @philippjfr .

I agree this should be applied but the templates are perfectly usable for me as they are. What exactly isn't working without this change?

[philippjfr]

Basically not seeing any difference between this PR and master.

[MarcSkovMadsen]

There is a difference right. For example

This is an important difference because the order of the css matters.

I described the consequence above

You can find more context here https://gitter.im/philippjfr

[MarcSkovMadsen]

@philippjfr . This is a major issue. Any new user trying out the templates will risk having a bad experience.

And I cannot get awesome-panel.org upgraded to Panel 0.10 before it's fixed and start promoting the new features.

Please ask more questions if this is not obvious to you.

Thanks.

[MarcSkovMadsen]

I will try to explain again why this is important. Let's take a look at

import panel as pn

long_text = "abcde"*10

pn.template.MaterialTemplate(
    title="Hello World",
    sidebar=long_text,
    main=long_text,
).servable()

With Panel 0.10 it looks like

It's determined by the material design css file. Thus we have no way in the material.css file to override that unless we use !important which is a really bad practice and shold be avoided. Because it makes it difficult for users later to override the setting if they need it.

The material.css file is not taken into account since it is loaded before the material design framework css!

The consequence is that the templates DOES NOT WORK AS EXPECTED.

[philippjfr]

I understand your concern here completely, but what I was saying is that I cannot see the issues you are saying are being caused by the wrong CSS ordering, e.g. this is what your example looks like using 0.10 for me:

which is exactly the same as it looks with this PR, i.e. there is zero difference for me. The same is true for the issues you point out for the Vanilla template. Maybe this is another Windows vs. OSX thing.

I also don't know when the issues with the logos occurred as this was fixed the last time I looked. Let's make sure all of these issues are addressed and then we can push out 0.10.1.

[MarcSkovMadsen]

Thanks. I was also a bit confused here I believe.

FYI @philippjfr . I have now used test_manual.py to go through all templates and fix all visual issues I've seen.

[philippjfr]

Great work, I'll give it until the end of the day to discover other issues and then I'll release 0.10.1.