Add Template Examples

[kebowen730]

This PR is adding examples for the new and old templates to the Panel Reference Gallery. It can't be merged until the Vanilla and Golden Layout Templates are merged in, but I wanted to go ahead and get feedback on the documentation included.

I also noticed that including .servable() looks a bit rough, and that the input widgets aren't working when the template is rendered within the notebook. This is a screenshot of an example using the Bootstrap template:

[philippjfr]

Might be good to put a note in there to say that rendering the templates in the notebook may not render correctly and that you really want to deploy to a server. On the website these will be iframed server apps so they'll look okay.

[MarcSkovMadsen]

Consider whether you can make the templates work in the notebook.

One of the unique selling points of Panel is how well it works in both notebook and on server.

It should be possible to do. For example the Material Template example I initially contributed works in both environments.

[philippjfr]

That is a point well taken. I don't think it necessarily needs to happen in the first cut of this PR though.

[MarcSkovMadsen]

I am currently looking through the new template implementation which I'm really looking forward to.

I just wanted to share my comments/ questions.

Theme

• I have a few bokeh_theme for material lying around some where (light+dark) would you like a PR?
• Are there any ways in which the user can switch from light to dark theme and back in a running application?
• The implementation currently supports a fixed theme. Have you thoughts about supporting a "dynamic theme". One where the user can change for example the primary and secondary color and the css and bokeh_theme updates accordingly?

BasicTemplate

• busy_indicator. Have you thought about supporting a linear progress also? https://www.npmjs.com/package/@material/mwc-linear-progress. That was the one I was thinking about putting into my standard template for awesome-panel.org one day. It just provides more possibility to inform the user on progress.
• header. Often times you want to display something on the left (title, logo, menu hamburger) and something on the right (more menus). Is that possible. somebody even want to position things in the middle. Is that possible?
• One additional parameter I would like is something like a snackbar https://www.npmjs.com/package/@material/mwc-snackbar so that it is possible to "send messages" to the user.
• Some general functionality to indicate the layout of main. Like with @nghenzi 's react layout example. Other grids could be supported. Would it be possible to make a general api/ some general functionality for that?

BooleanIndicator

• Because you use value to indicate activity then it's not possible to that circular and linear progress indicators can inherit from this (they use active to indicate activity and value to indicate progress) making them difficult to substitute in.

material css

• I have been working on styling bokeh/ panel widgets from the mdc material values. Would that be something you would be interested in as a PR?

[philippjfr]

I have a few bokeh_theme for material lying around some where (light+dark) would you like a PR?

That would be great.

Are there any ways in which the user can switch from light to dark theme and back in a running application? / Have you thoughts about supporting a "dynamic theme".

I have thought about it but don't yet have a good solution to dynamically switch out the CSS.

busy_indicator. Have you thought about supporting a linear progress also?

I am very happy to accept further Indicator classes.

header. Often times you want to display something on the left (title, logo, menu hamburger) and something on the right (more menus). Is that possible. somebody even want to position things in the middle. Is that possible?

I need to have another look at the way the header works, while I think what you're asking for will work with enough fiddling I've found position items in the header the most difficult part of using these templates.

One additional parameter I would like is something like a snackbar https://www.npmjs.com/package/@material/mwc-snackbar so that it is possible to "send messages" to the user.

Yes, was planning on supporting this where possible, just wasn't the highest priority.

Because you use value to indicate activity then it's not possible to that circular and linear progress indicators can inherit from this (they use active to indicate activity and value to indicate progress) making them difficult to substitute in.

I'll think about this.

I have been working on styling bokeh/ panel widgets from the mdc material values. Would that be something you would be interested in as a PR?

Yes, I have not had a lot of time to look at the CSS styling for different templates/themes and was hoping this would be something we would slowly fill in over time.

[codecov]

Codecov Report

Merging #1459 into master will decrease coverage by 0.00%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master    #1459      +/-   ##
==========================================
- Coverage   85.68%   85.68%   -0.01%     
==========================================
  Files         147      147              
  Lines       16462    16440      -22     
==========================================
- Hits        14106    14086      -20     
+ Misses       2356     2354       -2     

Impacted Files	Coverage Δ
panel/__init__.py	100.00% <ø> (ø)
panel/auth.py	34.24% <ø> (ø)
panel/callbacks.py	100.00% <ø> (ø)
panel/command/__init__.py	35.80% <ø> (ø)
panel/command/oauth_secret.py	66.66% <ø> (ø)
panel/command/serve.py	19.10% <ø> (ø)
panel/compiler.py	4.65% <ø> (ø)
panel/config.py	46.20% <ø> (ø)
panel/depends.py	50.00% <ø> (ø)
panel/io/__init__.py	100.00% <ø> (ø)
... and 62 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6905d5a...91d4329. Read the comment docs.