Fix sidebar width issues and make it customizable

[MarcSkovMadsen]

Fixes #2223

The problem is that the sidebar width does not match the default fixed width of buttons and dropdowns. Furthermore users are also requesting the ability to configure the sidebar width. The problem is shown below.

[MarcSkovMadsen]

I have added a sidebar_width parameter to all templates and set to the default to somewhere between 300px and 370px depending on the template. I've fixed a few other css issues along the way.

The functionality can be tested via

from panel import param
import panel as pn

def template_with_sidebar(Template=pn.template.FastListTemplate, sidebar=True):
    button = pn.widgets.Button(name="Click Me")
    select = pn.widgets.Select(name="Select", value=1, options=[1,2,3,4,5])
    if sidebar:
        title = Template.name + " Sidebar Width Test"
    else:
        title = Template.name + " No Sidebar Width Test"
    template = Template(
        site="Home",
        title=title,
        main=["Hello"]
        )
    if sidebar:
        template.sidebar[:]=[button, select, pn.Param(select)]
    return template

def template_without_sidebar(Template=pn.template.FastListTemplate):
    return Template(
        title="No Sidebar Width Test",
        main=["Hello"]
        )

apps = {
    "vanilla-template": template_with_sidebar(Template=pn.template.VanillaTemplate),
    "vanilla-template-no-sidebar": template_with_sidebar(Template=pn.template.VanillaTemplate, sidebar=False),
    "material-template": template_with_sidebar(Template=pn.template.MaterialTemplate),
    "material-template-no-sidebar": template_with_sidebar(Template=pn.template.MaterialTemplate, sidebar=False),
    "bootstrap-template": template_with_sidebar(Template=pn.template.BootstrapTemplate),
    "bootstrap-template-no-sidebar": template_with_sidebar(Template=pn.template.BootstrapTemplate, sidebar=False),
    "react-template": template_with_sidebar(Template=pn.template.ReactTemplate),
    "react-template-no-sidebar": template_with_sidebar(Template=pn.template.ReactTemplate, sidebar=False),
    "fast-list-template": template_with_sidebar(Template=pn.template.FastListTemplate),
    "fast-list-template-no-sidebar": template_with_sidebar(Template=pn.template.FastListTemplate, sidebar=False),
    "fast-grid-template": template_with_sidebar(Template=pn.template.FastGridTemplate),
    "fast-grid-template-no-sidebar": template_with_sidebar(Template=pn.template.FastGridTemplate, sidebar=False),
}

if __name__.startswith("bokeh"):
    template = "react"
    apps[template + "-template"].servable()
if __name__=="__main__":
    pn.serve(apps)

sidebar_width_test.mp4

[MarcSkovMadsen]

Only outstanding thing to do is to document it across notebooks.

[codecov]

Codecov Report

Merging #2301 (d9557c8) into master (b90cf0e) will increase coverage by 0.00%.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##           master    #2301   +/-   ##
=======================================
  Coverage   84.02%   84.03%           
=======================================
  Files         181      181           
  Lines       21940    21946    +6     
=======================================
+ Hits        18436    18442    +6     
  Misses       3504     3504           

Impacted Files	Coverage Δ
panel/template/base.py	79.13% <100.00%> (+0.09%)	⬆️
panel/template/bootstrap/__init__.py	100.00% <100.00%> (ø)
panel/template/golden/__init__.py	90.00% <100.00%> (+0.52%)	⬆️
panel/template/material/__init__.py	100.00% <100.00%> (ø)
panel/template/react/__init__.py	100.00% <100.00%> (ø)

---

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 b90cf0e...d9557c8. Read the comment docs.

[jbednar]

Thanks! Very useful!

[MarcSkovMadsen]

I have now documented and also implemented the GoldenTemplate. I believe this is ready.

When you have time @philippjfr . Please review and let me know if there is more to do. Thanks.

[philippjfr]

Happy with this, thanks!