Fix and improve fast templates

[MarcSkovMadsen]

This PR fixes various fast styling issues introduced by Panel 1.0.

• Removing the bootstrap styling and adding the fast styling to Buttons.
• Giving links the accent color
• Making the triangle in the Select widget visible - also in dark mode.

It also improves the template styling when main_layout=None giving it the familiar Streamlit Gray Sidebar look. I think I will be using this version and more and more because I think it looks the best.

• I was thinking maybe we should add a deprecation warning that we will be changing the default value of main_layout to None in Panel 1.6 or similar?

I also add a tiny bid of left padding to the sidebar too make it look more symmetric and less cramped.

I also fix #6024.

Test Script

I've been using the below test script

import panel as pn

pn.extension(sizing_mode="stretch_width", inline=True)

ACCENT = "#da1a5f"

disabled = pn.widgets.Checkbox(name="Disabled", value=False)

@pn.depends(disabled)
def get_buttons(disabled):
       buttons = pn.Row(
       *(pn.Column(*(pn.widgets.Button(name=p, button_type=p, button_style=bs, disabled=disabled) for p in pn.widgets.Button.param.button_type.objects))
       for bs in pn.widgets.Button.param.button_style.objects)
       )
       button_radioboxes = pn.Row(
       *(pn.Column(*(pn.widgets.RadioButtonGroup(name=p, options=["AAA", "BBB"], button_type=p, button_style=bs, disabled=disabled) for p in pn.widgets.Button.param.button_type.objects))
       for bs in pn.widgets.Button.param.button_style.objects)
       )
       description="""## Header
Some text and a [link](https://panel.holoviz.org)
       
"""
       select = pn.widgets.Select(value="Option A", options=["Option A", "Option B"])
       return pn.Column(
              buttons, button_radioboxes, description, select, margin=0
       )


pn.template.FastListTemplate(
       title="Test App", 
       main=[],
       sidebar=[disabled, get_buttons],
       accent=ACCENT,
       # main_layout=None,
).servable()

After

This is how things will be looking when applying this PR.

main_layout=None

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (573497c) 84.65% compared to head (81410cd) 84.67%.
Report is 14 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6023      +/-   ##
==========================================
+ Coverage   84.65%   84.67%   +0.01%     
==========================================
  Files         291      291              
  Lines       43458    43586     +128     
==========================================
+ Hits        36788    36905     +117     
- Misses       6670     6681      +11     

Flag	Coverage Δ
ui-tests	40.74% <ø> (-0.08%)	⬇️
unitexamples-tests	72.80% <ø> (+0.07%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[philippjfr]

Are we sure about this one?

[philippjfr]

Suggested change

	{% if not main_layout %}
	background-color: var(--panel-surface-color);
	{% endif %}
	{% if not main_layout %}
	background-color: var(--panel-surface-color);
	{% endif %}

[philippjfr]

Looks good, just want to be sure that the 100% height on pn-wrapper works well in all cases.

[MarcSkovMadsen]

Its a good question. I can see that the fast-card has this by it self. Isabella tested in an app with two elements in main area. And it was fine.

[philippjfr]

I'll merge and will make sure to do some testing over the next few days.