Collapsible filters in admin listings

[morlandi]

Sometime you need to display many columns in the listing,
and the horizontal space taken up by the filters results in additional horizontal scrolling which might be inconvenient.

In these situations, the possibility to (optionally) collapse the filters could help; mush like django-grappelli does:

[fabiocaccamo]

@morlandi cool suggestion!

[smunoz-ml]

This is similar to what I have suggested in #163!

[fabiocaccamo]

@smunoz-ml true, even if at UI level, having the filter collapsible to the right seems to be more complicated than having it in an absolute position above the changelist.

[morlandi]

@smunoz-ml true, even if at UI level, having the filter collapsible to the right seems to be more complicated than having it in an absolute position above the changelist.

I do agree on this point, partly because the django-grappelli solution is familiar to me and therefore I'm used to it, but above all because having the filters under your nose (even when collapsed they act as a placeholder), is more intuitive compared to an anonymous button.

[smunoz-ml]

Whatever is easier for you @fabiocaccamo or whomever is going to implement this feature. I suggested the solution of collapsing to the right like the left menu because the left menu is already implemented and I thought that the implementation of the same feature on the right side would be easier. But @morlandi's solution also works for me!

[merwok]

Sidebar collapsing would look better and be more usable than the button style in the screenshot!
(It looks like a dropdown that shows more dropdowns + the filters are not visible after applying one?)

[morlandi]

The real challenge here is to implement this without interfering too much with Django admin templates .. so the solution can survive across future Django releases ;)

I am available to collaborate in the implementation perhaps with some strategic suggestions from the author @fabiocaccamo , or at the very least to test a temporary solution during development

[fabiocaccamo]

@morlandi if you want to work on a PR for this, I will be glad to discuss it together.

I would opt for the "Grappelli" solution, it seems to me the better at UX level and also easier to develop/maintain in the long term.

[fabiocaccamo]

Some time ago I did some tests, I paste what I did here, so I can delete the file from my desktop :)

/* solution 1 */
.admin-interface .module.filtered #changelist-filter {
    position: fixed;
    z-index: 50;
    box-shadow: 0px 4px 16px rgba(0,0,0,0.2);
    bottom: 40px;
    right: 40px;
    top: auto;
    max-width: 240px;
    margin: 0;
    padding: 0;
    max-height: calc(100% - 115px);
}

.admin-interface .module.filtered #changelist-filter > h2 {
    position: sticky;
    top: 0;
    z-index: 10;
    border: 1px solid rgba(255,255,255,0.3);
    border-bottom: none;
    cursor: pointer;
}


/* collapsed */
.admin-interface .module.filtered #changelist-filter {
    height: 35px;
    overflow: hidden;
}

/* solution 2 */
.admin-interface .module.filtered #changelist-filter {
    margin-left: -240px;
    height: 34px;
    overflow: hidden;
    cursor: pointer;
    margin-top: 5px;
    box-shadow: 4px 4px 16px rgba(0,0,0,0.6);
}

[EricPobot]

@fabiocaccamo Thanks for your suggestions.

I've used them in the following override of the change_list.html template :

{% extends "admin/change_list.html" %}

{% block extrastyle %}
    {{ block.super }}

    <style>
        #changelist-filter {
            margin-top: 5px;
            box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.6);

            h2 {
                cursor: pointer;
            }
        }

        #changelist-filter.collapsed {
            height: 34px !important;
            overflow-y: hidden !important;
            margin-left: -240px;
        }
    </style>
{% endblock %}

{% block footer %}
    {{ block.super }}

    <script>
        const changelistFilterElt = document.getElementById("changelist-filter");

        changelistFilterElt.querySelector("h2").addEventListener("click", () => {
            changelistFilterElt.classList.toggle("collapsed");
        });
    </script>
{% endblock %}

The toggling script needs to be put in the footer block to ensure it is included at the very end of the HTML code, so that the filter container element is defined when the initialization JS code is executed.

It seems to work fine in Django 5.x, even with django-admin-interface addon.

[bastiaan85]

Extended @EricPobot's solution with a chevron to make it more intuitive to the user that the feature is there:

{% extends "admin/change_list.html" %}

{% block extrastyle %}
{{ block.super }}

<style>
    #changelist-filter {
        margin-top: 5px;
        box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.6);
        position: relative;
    }

    #changelist-filter h2 {
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #changelist-filter.collapsed {
        height: 34px !important;
        overflow-y: hidden !important;
        margin-left: -240px;
    }

    .chevron {
        transition: transform 0.3s ease;
    }

    .collapsed .chevron {
        transform: rotate(180deg);
    }
</style>
{% endblock %}

{% block footer %}
{{ block.super }}

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const changelistFilterElt = document.getElementById("changelist-filter");
        const chevron = document.createElement('span');
        chevron.className = 'chevron';
        chevron.textContent = '▼';

        changelistFilterElt.querySelector("h2").appendChild(chevron);

        changelistFilterElt.querySelector("h2").addEventListener("click", () => {
            const isCollapsed = changelistFilterElt.classList.toggle("collapsed");
        });
    });
</script>
{% endblock %

Verified on Django==5.1.2 with django-admin-interface==0.28.9.

[EricPobot]

@bastiaan85 Thanks a lot for this very valuable improvement. I'm going to integrate it ASAP in my projects.