[Django] #36529: Improvement of the filter and model selection sidebar on the admin changelist page for mobile screens.

[Django]

#36529: Improvement of the filter and model selection sidebar on the admin
changelist page for mobile screens.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Type: New
| feature
Status: new | Component:
| contrib.admin
Version: 5.2 | Severity: Normal
Keywords: accessibility, | Triage Stage:
changelist, sidebar | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
On the current changelist page, the model selection sidebar is set to
`display: none` on mobile screen sizes, so it is not visible. In contrast,
the filter sidebar is displayed at the bottom of the changelist.

[[Image(Screenshot 2025-07-28 at 8.35.36 AM.png)]]
In the above image, it's fine because the table has only one row. However,
if the table contains multiple rows, it may be difficult to access the
filter.
This layout can cause inconvenience to users and is something that I
believe needs improvement.

Also, I think it would be better if the model selection sidebar is
available on mobile screens as well. Not providing certain features
depending on the screen size can also cause inconvenience to users.

[[Image(sidebar_new_feature_example.png)]]

I think it would be good to add a button like the one above for the side
panel, and have the side panel appear when that button is clicked.
However, I think further discussion is needed regarding the exact design.
--
Ticket URL: <https://code.djangoproject.com/ticket/36529>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#36529: Improvement of the filter and model selection sidebar on the admin
changelist page for mobile screens.
-------------------------------------+-------------------------------------

Reporter: Antoliny | Owner: (none)

Type: New feature | Status: new
Component: contrib.admin | Version: 5.2

Severity: Normal | Resolution:

Keywords: accessibility, | Triage Stage:
changelist, sidebar | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by Antoliny):

* Attachment "Screenshot 2025-07-28 at 8.35.36 AM.png" added.

[Django]

#36529: Improvement of the filter and model selection sidebar on the admin
changelist page for mobile screens.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: (none)
Type: New feature | Status: new
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
changelist, sidebar | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Antoliny):

* Attachment "sidebar_new_feature_example.png" added.

[Django]

#36529: Improvement of the filter and model selection sidebar on the admin
changelist page for mobile screens.
-------------------------------------+-------------------------------------

Reporter: Antoliny | Owner: Antoliny
Type: New feature | Status: assigned

Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
changelist, sidebar | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Antoliny):

* owner: (none) => Antoliny
* status: new => assigned

--
Ticket URL: <https://code.djangoproject.com/ticket/36529#comment:1>

[Django]

#36529: Improvement of the filter and model selection sidebar on the admin
changelist page for mobile screens.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: New feature | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
changelist, sidebar | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Antoliny):

* Attachment "Screenshot 2025-07-28 at 8.35.36 AM.png" removed.

--
Ticket URL: <https://code.djangoproject.com/ticket/36529>

[Django]

#36529: Improvement of the filter and model selection sidebar on the admin
changelist page for mobile screens.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: New feature | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
changelist, sidebar | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Antoliny):

* Attachment "sidebar_new_feature_example.png" removed.

[Django]

#36529: Improvement of the filter and model selection sidebar on the admin
changelist page for mobile screens.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: New feature | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
changelist, sidebar | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Antoliny):

* Attachment "sidebar_new_feature_example.png" added.

[Django]

#36529: Improvement of the filter and model selection sidebar on the admin
changelist page for mobile screens.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: New feature | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
changelist, sidebar | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Antoliny):

* Attachment "Screenshot 2025-07-28 at 8.35.36 AM.png" added.

[Django]

#36529: Improvement of the filter and model selection sidebar on the admin
changelist page for mobile screens.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: New feature | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
changelist, sidebar | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Antoliny):

* Attachment "sidebar_new_feature_example.png" removed.

[Django]

#36529: Improvement of the filter and model selection sidebar on the admin
changelist page for mobile screens.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: New feature | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
changelist, sidebar | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Antoliny):

* Attachment "Screenshot 2025-07-28 at 8.35.36 AM.png" removed.

[Django]

#36529: Improvement of the filter and model selection sidebar on the admin
changelist page for mobile screens.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: New feature | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
changelist, sidebar | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Antoliny):

* Attachment "changelist_sidebar_mobile.png" added.

[Django]

#36529: Improvement of the filter and model selection sidebar on the admin
changelist page for mobile screens.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: New feature | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
changelist, sidebar | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Antoliny):

* Attachment "changelist_sidebar_mobile_example.png" added.

[Django]

#36529: Improvement of the filter and model selection sidebar on the admin
changelist page for mobile screens.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: New feature | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
changelist, sidebar | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Description changed by Antoliny:

Old description:

> On the current changelist page, the model selection sidebar is set to
> `display: none` on mobile screen sizes, so it is not visible. In
> contrast, the filter sidebar is displayed at the bottom of the
> changelist.
>
> [[Image(Screenshot 2025-07-28 at 8.35.36 AM.png)]]
> In the above image, it's fine because the table has only one row.
> However, if the table contains multiple rows, it may be difficult to
> access the filter.
> This layout can cause inconvenience to users and is something that I
> believe needs improvement.
>
> Also, I think it would be better if the model selection sidebar is
> available on mobile screens as well. Not providing certain features
> depending on the screen size can also cause inconvenience to users.
>
> [[Image(sidebar_new_feature_example.png)]]
>
> I think it would be good to add a button like the one above for the side
> panel, and have the side panel appear when that button is clicked.
> However, I think further discussion is needed regarding the exact design.

New description:

On the current changelist page, the model selection sidebar is set to
`display: none` on mobile screen sizes, so it is not visible. In contrast,
the filter sidebar is displayed at the bottom of the changelist.

[[Image(changelist_sidebar_mobile.png)]]

In the above image, it's fine because the table has only one row. However,
if the table contains multiple rows, it may be difficult to access the
filter.
This layout can cause inconvenience to users and is something that I
believe needs improvement.

Also, I think it would be better if the model selection sidebar is
available on mobile screens as well. Not providing certain features
depending on the screen size can also cause inconvenience to users.

[[Image(changelist_sidebar_mobile_example.png)]]

I think it would be good to add a button like the one above for the side
panel, and have the side panel appear when that button is clicked.
However, I think further discussion is needed regarding the exact design.

--

--
Ticket URL: <https://code.djangoproject.com/ticket/36529#comment:2>

[Django]

#36529: Improvement of the filter and model selection sidebar on the admin
changelist page for mobile screens.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: New feature | Status: assigned

Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
changelist, sidebar |

Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by Natalia Bidart):

* cc: Thibaud Colas, Tom Carrick, Sarah Abderemane, Eliana Rosselli
(added)
* stage: Unreviewed => Accepted
* version: 5.2 => dev

Comment:

Hello Antoliny, thank you for taking the time to create this report and
adding a clear description and proposal. I agree with your assessment, I
thought we had the "hide/show" expander for the side bar in mobile size
but I can't make it show (nor in `main` and nor in `stable/5.2.x`).

Shall we have a brainstorm forum post with the accessibility team to
evaluate options? Would you be up for starting that?
--
Ticket URL: <https://code.djangoproject.com/ticket/36529#comment:3>

[Django]

#36529: Improvement of the filter and model selection sidebar on the admin
changelist page for mobile screens.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: New feature | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
changelist, sidebar |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Comment (by Antoliny):

Replying to [comment:3 Natalia Bidart]:

> Hello Antoliny, thank you for taking the time to create this report and
adding a clear description and proposal. I agree with your assessment, I
thought we had the "hide/show" expander for the side bar in mobile size
but I can't make it show (nor in `main` and nor in `stable/5.2.x`).
>
> Shall we have a brainstorm forum post with the accessibility team to
evaluate options? Would you be up for starting that?

Sure, I'll post on the forum within this week.
I'll also try to include an example patch with my suggestions if possible.
I really hope this part gets improved soon :)
--
Ticket URL: <https://code.djangoproject.com/ticket/36529#comment:4>

[Django]

#36529: Improvement of the filter and model selection sidebar on the admin
changelist page for mobile screens.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: New feature | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
changelist, sidebar |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by Antoliny):

[https://forum.djangoproject.com/t/improved-the-ux-of-the-admin-
changelist-filter-on-mobile-screens/42188 discussion]
--
Ticket URL: <https://code.djangoproject.com/ticket/36529#comment:5>

[Django]

#36529: Improvement of the filter and model selection sidebar on the admin
changelist page for mobile screens.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: New feature | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
changelist, sidebar |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by Antoliny):

[https://github.com/django/django/pull/19696 PR]
--
Ticket URL: <https://code.djangoproject.com/ticket/36529#comment:6>

[Django]

#36529: Improvement of the filter and model selection sidebar on the admin
changelist page for mobile screens.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: New feature | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
changelist, sidebar |
Has patch: 0 | Needs documentation: 0

Needs tests: 1 | Patch needs improvement: 1

Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by Antoliny):

* needs_better_patch: 0 => 1
* needs_tests: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/36529#comment:7>

[Django]

#36529: Improvement of the filter and model selection sidebar on the admin
changelist page for mobile screens.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: New feature | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
changelist, sidebar |
Has patch: 0 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0

Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Antoliny):

* needs_better_patch: 1 => 0
* needs_tests: 1 => 0

--
Ticket URL: <https://code.djangoproject.com/ticket/36529#comment:8>