[Django] #34093: Admin theme switcher icon should resize according to browser font size
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud | Owner: nobody
Colas |
Type: Bug | Status: new
Component: | Version: dev
contrib.admin | Keywords: accessibility, ux,
Severity: Normal | font size, dark mode
Triage Stage: | Has patch: 0
Unreviewed |
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 1
UI/UX: 1 |
-------------------------------------+-------------------------------------
The new admin theme switcher’s icon is a fixed 16x16px, regardless of the
browser’s configured font size. It would be better for users requiring
larger text if icons resized as well.
This seems to be due to the icons’ SVG symbols having hard-coded `width`
and `height` attributes, which prevents resizing with CSS. I believe the
`width` and `height` should either be removed, or set on the inline SVG
(which can be a bit tedious).
Screenshot:
Relevant code:
https://github.com/django/django/blob/da8fa764134980ee1079f790cda6616f32cf9c44/django/contrib/admin/templates/admin/base.html#L118-L122
--
Ticket URL: <https://code.djangoproject.com/ticket/34093>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
Django
-------------------------------------+-------------------------------------
Type: Bug | Status: new
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, ux, | Triage Stage:
font size, dark mode | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
* Attachment "Screenshot 2022-10-13 at 17.44.39.png" added.
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, ux, | Triage Stage:
font size, dark mode | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
Old description:
> The new admin theme switcher’s icon is a fixed 16x16px, regardless of the
> browser’s configured font size. It would be better for users requiring
> larger text if icons resized as well.
>
> This seems to be due to the icons’ SVG symbols having hard-coded `width`
> and `height` attributes, which prevents resizing with CSS. I believe the
> `width` and `height` should either be removed, or set on the inline SVG
> (which can be a bit tedious).
>
> Screenshot:
>
> Relevant code:
> https://github.com/django/django/blob/da8fa764134980ee1079f790cda6616f32cf9c44/django/contrib/admin/templates/admin/base.html#L118-L122
New description:
The new admin theme switcher’s icon is a fixed 16x16px, regardless of the
browser’s configured font size. It would be better for users requiring
larger text if icons resized as well.
This seems to be due to the icons’ SVG symbols having hard-coded `width`
and `height` attributes, which prevents resizing with CSS. I believe the
`width` and `height` should either be removed, or set on the inline SVG
(which can be a bit tedious).
Screenshot: https://code.djangoproject.com/raw-
attachment/ticket/34093/Screenshot%202022-10-13%20at%2017.44.39.png
Relevant code:
https://github.com/django/django/blob/da8fa764134980ee1079f790cda6616f32cf9c44/django/contrib/admin/templates/admin/base.html#L118-L122
--
--
Ticket URL: <https://code.djangoproject.com/ticket/34093#comment:1>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: dev
Keywords: accessibility, ux, | Triage Stage: Accepted
font size, dark mode |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
* cc: Sarah Abderemane (added)
* severity: Normal => Release blocker
* stage: Unreviewed => Accepted
--
Ticket URL: <https://code.djangoproject.com/ticket/34093#comment:2>
Django
-------------------------------------+-------------------------------------
| Abderemane
Type: Bug | Status: assigned
Component: contrib.admin | Version: dev
Severity: Release blocker | Resolution:
Keywords: accessibility, ux, | Triage Stage: Accepted
font size, dark mode |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
* owner: nobody => Sarah Abderemane
* status: new => assigned
--
Ticket URL: <https://code.djangoproject.com/ticket/34093#comment:3>
Django
-------------------------------------+-------------------------------------
| O'Connor
Type: Bug | Status: assigned
Component: contrib.admin | Version: dev
Severity: Release blocker | Resolution:
Keywords: accessibility, ux, | Triage Stage: Accepted
font size, dark mode |
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
* owner: Sarah Abderemane => Colm O'Connor
* has_patch: 0 => 1
Comment:
[https://github.com/django/django/pull/16179 PR]
--
Ticket URL: <https://code.djangoproject.com/ticket/34093#comment:4>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Colm
| O'Connor
Component: contrib.admin | Version: dev
Severity: Release blocker | Resolution: fixed
Keywords: accessibility, ux, | Triage Stage: Accepted
font size, dark mode |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
* status: assigned => closed
* resolution: => fixed
Comment:
In [changeset:"37c5b8c07be104fd5288cd87f101e48cb7a40298" 37c5b8c0]:
{{{
#!CommitTicketReference repository=""
revision="37c5b8c07be104fd5288cd87f101e48cb7a40298"
Fixed #34093 -- Changed width/height of switch button icons to use rem
units in admin.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/34093#comment:5>