Fixed #27471 -- Made admin's filter choices collapsable.

[mgaligniana]

This is the 2nd approach to solve ticket 27471 following the knyghty and pauloxnet suggest using details/summary elements

You can run test doing: ./runtests.py admin_changelist.tests.SeleniumTests.test_collapse_filters --selenium=chrome,firefox

[carltongibson]

Thanks for this @mgaligniana.

I think I much prefer the <details> approach over rebuilding that by hand, so let's focus effort here for the now. (We can always revert to the original approach if it doesn't work out, but it should...)

Two initial queries:

• Can we style the disclosure element at all? The ▼/▶. Maybe that's fine, but are there options?
• Can you think about @kezabelle's point from Fixed #27471 -- Make admin's list_filter choices collapsable #15331 about persistence? Otherwise I collapse the irrelevant filters, click a remaining relevant one, which triggers a reload, and then all the filters are back how they started. Session Storage should be fine. I guess a (sparse) per-changelist, per-filter reference to control the open state, applied on load, and stored on a change. … 🤔

I don't think I'd worry about auto-collapsing (< 10) here.

[matthiask]

Here's a snippet which works well to remove the default styles:

summary {
  list-style: none;

  &::-webkit-details-marker {
    display: none;
  }
}

Now you can add custom styles via details[open] > summary and details > summary (or something like that)

[mgaligniana]

Thanks @matthiask and @carltongibson

• I re-styled the disclosure element following your comments and this answer at Stack Overflow

• I added the persistence logic and updated the test!

Thank you again!

[mgaligniana]

Not sure if this is the correct to place the file and if the name is accurate 🤔

[felixxm]

I moved it to the templates/admin/change_list.html.

[mgaligniana]

With [Linux|Chrome] I see the ▶️ like this:

Should I re-define or load another font?

[felixxm]

Can we use arrows instead of emojis? ↓ → 🤔

[felixxm]

I'm not an UX expert, but they look nice and the same in all browsers:

• Firefox:
  
• Chrome:
  

Maybe bolded and with --link-hover-color to make it clear that they are clickable:

#changelist-filter details > summary::before {
    content: '→';
    font-weight: bold;
    color: var(--link-hover-color);
}

#changelist-filter details[open] > summary::before {
    content: '↓';
    font-weight: bold;
    color: var(--link-hover-color);
}

[mgaligniana]

I really like it @felixxm! Styles updated.

[felixxm]

@mgaligniana Thanks 👍 I pushed small edits and updated screenshots in docs.

[felixxm]

I moved it to the templates/admin/change_list.html.

[mgaligniana]

@felixxm I know this is not the appropriate place to ask a question unrelated to the pull request but I just read the Django contributing Git guideline and it says:

Note that user.name should be your real name, not your GitHub nick.

I noticed mine is my GitHub username. Does it affect in any way? Should we document the reason?

[felixxm]

I noticed mine is my GitHub username. Does it affect in any way? Should we document the reason?

Don't worry it's not a blocker. I updated the author's description.