Add dropdown-group directive

[chrisjsewell]

When you say dropdown-group, do you essentially mean bootstrap accordions

Yeh basically. Just a way to orchestrate the style of a group of dropdowns with a default style and adding a bottom/top margin for the group. So rather than:

.. dropdown:: My Content
    :container: mt-3 shadow
    :title: bg-primary text-white text-center font-weight-bold
    :body: bg-light text-right font-italic

    Is formatted

.. dropdown:: My Content
    :container: shadow
    :title: bg-primary text-white text-center font-weight-bold
    :body: bg-light text-right font-italic

    Is formatted

.. dropdown:: My Content
    :container: mb-3 shadow
    :title: bg-primary text-white text-center font-weight-bold
    :body: bg-light text-right font-italic

    Is formatted

You could have:

.. dropdown-group::
    :container: shadow
    :title: bg-primary text-white text-center font-weight-bold
    :body: bg-light text-right font-italic

    .. dropdown:: My Content
    
        if formatted

    .. dropdown:: My Content
    
        if formatted

    .. dropdown:: My Content
    
        if formatted

Originally posted by @chrisjsewell in https://github.com/executablebooks/sphinx-panels/pull/15#issuecomment-629560076

[chrisjsewell]

This example from google search is actually quite a nice example; with the rounded edges in the corners:

(just re-watched this film, is flippin great 😂 )

[chrisjsewell]

This works quite well:

.dropdown-group .dropdown .summary-title {
    border-bottom: 0 !important;
    font-weight:700 !important;
}
.dropdown-group .dropdown:not(:last-child) {
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}
.dropdown-group .dropdown:first-child,
.dropdown-group .dropdown:first-child .summary-title {
    border-radius: 1rem 1rem 0rem 0rem !important;
}
.dropdown-group .dropdown:last-child,
.dropdown-group .dropdown:last-child .summary-title {
    border-radius: 0rem 0rem 1rem 1rem !important;
}

.dropdown-group .dropdown:last-child {
    margin-bottom: 24px !important;
}

[stefanodavid]

I was exactly searching for a way to group dropdowns and could not find one, so I am adding my use case as well (pretty similar to the image posted above): we have a few domains that contain a variable number of datasets. It would be great to be able to have a nested dropdowns, because wrapping dropdowns into a sphinx-panel isn't a good solution.

[chrisjsewell]

Hey @stefanodavid, actually in lieu of a built-in solution, I implemented this in one of my other projects, using the div directive that is also part of this package:

This is the file: https://github.com/aiidateam/aiida-core/blob/develop/docs/source/intro/installation.rst

This is the custom CSS: https://github.com/aiidateam/aiida-core/blob/0345e61f92381216ac1a8067a623f22cebdc5daa/docs/source/_static/aiida-custom.css#L78

and this is the rendered page 😄: https://aiida.readthedocs.io/projects/aiida-core/en/latest/intro/installation.html

Let me know if that works for you?

I should circle back round at some point, to basically copy this implementation into sphinx-panels.

[stefanodavid]

hi @chrisjsewell well, you're right, I saw div::, but never thought to use it this way, and your result is exactly what I had in mind.

If i can add one (OT) remark, I think that if it were possible to "stack" the dropdown horizzontally, you could even mimic sphinx-tabs's behaviour and functionality (and perhaps even merge them in a single sphinx-panles-togglebutton-tabs package -- or sphinx-widgets for short?).

Thanks a lot!

[chrisjsewell]

Thanks, yeh any feedback is great 😄

and perhaps even merge them in a single sphinx-panles

Yes indeed, that was in the thinking (see #28). The only sticking point is that, currently, this package is "CSS based" only, which I like because it requires no JavaScript loads (which can slow down page loads) and obviously works when offline or when JS is deactivated. Whereas toggle-buttons and tabs currently rely on JS

or sphinx-widgets for short

good shout, this didn't come up in #16, added there

[stefanodavid]

The only sticking point is that, currently, this package is "CSS based" only, which I like because it requires no JavaScript loads

Good point. I read discussions in other issues but did not think about the no-JS thing. Just guessing, but.... there is already a kind of "togglebutton" functionality for dropdowns (HTML's details tag) in sphins-panels, perhaps the same approach could work for tabs?

[chrisjsewell]

Yeh I'm sure I talked about this in an issue somewhere (but I can't remember which one and which repo!). But there are approaches like https://css-tricks.com/the-checkbox-hack/ But perhaps it called a hack for a reason 😬

[choldgraf]

Just a quick thought on drop-down groups: why not use the same pattern that we use for tabs with the 'tabbed' directive? AKA if the directives are successive they're treated as part of the same group and the stylings of the first are applied to all others (and perhaps they are joined together somehow).