Add Card and Accordion layout [doc-build]

[philippjfr]

Supersedes #1182

Adds a Card model with configurable HTML tags and css classes and collapse button

Here's what it will look like in the coming Material design template:

[maximlt]

This is really really cool!

[MarcSkovMadsen]

Looks nice. Does it support

• Markdown or HTML in the header?

For example I might like to put an icon in there, a link or set the "size"/ "type" of header?

[philippjfr]

Here are the docs I'm about to add, you'll see an example with a logo: https://anaconda.org/philippjfr/card/notebook

[codecov]

Codecov Report

Merging #1262 into master will increase coverage by 0.22%.
The diff coverage is 93.23%.

@@            Coverage Diff             @@
##           master    #1262      +/-   ##
==========================================
+ Coverage   87.30%   87.53%   +0.22%     
==========================================
  Files         106      117      +11     
  Lines       12662    12952     +290     
==========================================
+ Hits        11055    11337     +282     
- Misses       1607     1615       +8     

Impacted Files	Coverage Δ
panel/layout/spacer.py	74.07% <74.07%> (ø)
panel/layout/grid.py	75.00% <75.00%> (ø)
panel/layout/accordion.py	85.50% <85.50%> (ø)
panel/layout/tabs.py	91.01% <91.01%> (ø)
panel/layout/base.py	93.47% <93.47%> (ø)
panel/layout/card.py	95.65% <95.65%> (ø)
panel/tests/layout/test_accordion.py	96.55% <96.55%> (ø)
panel/__init__.py	100.00% <100.00%> (ø)
panel/layout/__init__.py	100.00% <100.00%> (ø)
panel/models/__init__.py	100.00% <100.00%> (ø)
... and 20 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 a3993d1...b178a16. Read the comment docs.

[MarcSkovMadsen]

Hi @philippjfr

It's great. Here is a little feedback.

1. The toogle area is very small and difficult to hit (see video below). Can it be made larger?
2. Personally I would have liked to include something better than +/- for toggle in my example. I can see that a lot of times < and > (rotated 90 degrees) are used. And they are larger and bolder than what is there now.
3. I have not seen it but is there a divider or border between the objects? I think that gives a nice seperation of objects. Or would I just specify a divider my self? Then maybe that should be included as an example.
4. When clicking the toggle button a blue border appears while the +/- is clicked. This is a bit strange and should be removed if possible.
5. Personally I would like the scroll to be on the objects only and not include the title/ header.

Difficult to hit toggle

Divider between objects

Blue border when clicking +/-

Scroll includes title/ header

[philippjfr]

This PR now also adds support for a new Accordion layout which behaves very similarly to a Tabs component:

[philippjfr]

@MarcSkovMadsen Thanks for the feedback, a lot of what you're seeing is simply because anaconda.org defines various CSS which does not seem to work too well with the Card CSS. I'll try to make sure they don't interfere like that but there's only so much we can do.

The toogle area is very small and difficult to hit (see video below). Can it be made larger?

It is actually considerably larger than it appears on anaconda.org, it defines various CSS tags that interfere with the actual look and feel. I'll still try to make it larger though.

Personally I would have liked to include something better than +/- for toggle in my example. I can see that a lot of times < and > (rotated 90 degrees) are used. And they are larger and bolder than what is there now.

Personally I prefer +/- and again they appear much larger and bolder without anaconda.org's theme interferring. I'll try to make sure that external CSS doesn't interfere like that.

I have not seen it but is there a divider or border between the objects? I think that gives a nice seperation of objects. Or would I just specify a divider my self? Then maybe that should be included as an example.

Happy to add an example, much less happy adding dividers by default.

When clicking the toggle button a blue border appears while the +/- is clicked. This is a bit strange and should be removed if possible.

Again, this is anaconda.org CSS, not part of the default look.

Personally I would like the scroll to be on the objects only and not include the title/ header.

Unlikely to be easy, but I'll give that a shot.

[kcpevey]

I'm super excited to see this!! 🎉

[philippjfr]

Merging for now. We can add additional tweaks later.