[Django] #35112: Confusing animation of admin date picker buttons
Django
------------------------------------------------+------------------------
Reporter: Alexander Lazarević | Owner: nobody
Type: Cleanup/optimization | Status: new
Component: contrib.admin | Version: dev
Severity: Normal | Keywords:
Triage Stage: Unreviewed | Has patch: 0
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 1 |
------------------------------------------------+------------------------
In the admin date picker widget there are two buttons to go to the
previous month (<) and to the next month (>). While hovering the mouse
over it they do some "scroll up" animation.
1. I don't think the animation is any helpful to indicate that you are
hovering with the mouse over the button. A colour highlight of some sort
would be more helpful.
2. The animation is for some reason not consistent. When you pressed the
previous month button once, leave the button and hover over it again, the
animation is **not** shown. If you hover over the next month button, the
animation is shown. This confusing and not helpful at all.
I've attached a short video that hopefully better shows the issue.
This was performed with Firefox 121.0.1
The admin date picker overall looks dated (no pun intended) and lacks
functions that are now commonly expected, like a way to select the month
or the year directly. There is already a ticket for that #9388
--
Ticket URL: <https://code.djangoproject.com/ticket/35112>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
Django
Reporter: Alexander Lazarević | Owner: nobody
Cleanup/optimization |
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
Changes (by Alexander Lazarević):
* Attachment "Screencast_15_01_24_12:00:19.mp4" added.
Screencast of the previous month (<) and next month (>) buttons
Django
-------------------------------------+-------------------------------------
Reporter: Alexander Lazarević | Owner: nobody
Type: | Status: new
Cleanup/optimization |
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Old description:
> In the admin date picker widget there are two buttons to go to the
> previous month (<) and to the next month (>). While hovering the mouse
> over it they do some "scroll up" animation.
>
> 1. I don't think the animation is any helpful to indicate that you are
> hovering with the mouse over the button. A colour highlight of some sort
> would be more helpful.
> 2. The animation is for some reason not consistent. When you pressed the
> previous month button once, leave the button and hover over it again, the
> animation is **not** shown. If you hover over the next month button, the
> animation is shown. This confusing and not helpful at all.
>
> I've attached a short video that hopefully better shows the issue.
>
> This was performed with Firefox 121.0.1
>
> The admin date picker overall looks dated (no pun intended) and lacks
> functions that are now commonly expected, like a way to select the month
> or the year directly. There is already a ticket for that #9388
New description:
In the admin date picker widget there are two buttons to go to the
previous month (<) and to the next month (>). While hovering the mouse
over it they do some "scroll up" animation.
1. I don't think the animation is any helpful to indicate that you are
hovering with the mouse over the button. A colour highlight of some sort
would be more helpful.
2. The animation is for some reason not consistent. When you pressed the
previous month button once, leave the button and hover over it again, the
animation is **not** shown. If you hover over the next month button, the
animation is shown. This is confusing and not helpful at all.
I've attached a short video that hopefully better shows the issue.
This was performed with Firefox 121.0.1
The admin date picker overall looks dated (no pun intended) and lacks
functions that are now commonly expected, like a way to select the month
or the year directly. There is already a ticket for that #9388
--
--
Ticket URL: <https://code.djangoproject.com/ticket/35112#comment:1>
Django
Reporter: Alexander Lazarević | Owner: nobody
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
Changes (by Mariusz Felisiak):
* cc: Tom Carrick, elky (added)
* stage: Unreviewed => Accepted
Comment:
I agree that this animation is unnecessary.
--
Ticket URL: <https://code.djangoproject.com/ticket/35112#comment:2>
Django
--------------------------------------+------------------------------------
Reporter: Alexander Lazarević | Owner: nobody
Type: Cleanup/optimization | Status: new
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
--------------------------------------+------------------------------------
Comment (by Tom Carrick):
I agree, it looks more glitchy than helpful.
I also agree that the datepicker is dated, but it also has a lot of other
problems.The accessibility team has discussed the date picker multiple
times but so far there's no clear alternative we can get people to agree
on. I'm loosely in favour of removing our widgets and using the native
browser controls, but there are problems with these at the moment as well.
--
Ticket URL: <https://code.djangoproject.com/ticket/35112#comment:3>
Django
--------------------------------------+------------------------------------
Reporter: Alexander Lazarević | Owner: nobody
Type: Cleanup/optimization | Status: new
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
--------------------------------------+------------------------------------
Comment (by Alexander Lazarević):
I guess it is just a matter of removing this two entries in the CSS:
{{{
.calendarbox .calendarnav-previous:focus,
.calendarbox .calendarnav-previous:hover {
background-position: 0 -15px;
}
...
.calendarbox .calendarnav-next:focus,
.calendarbox .calendarnav-next:hover {
background-position: 0 -45px;
}}}
The `calendar-icons.svg` could be changed as well to only contain the two
used icons.
--
Ticket URL: <https://code.djangoproject.com/ticket/35112#comment:4>
Django
--------------------------------------+------------------------------------
Reporter: Alexander Lazarević | Owner: nobody
Type: Cleanup/optimization | Status: new
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
--------------------------------------+------------------------------------
Comment (by Tom Carrick):
Alexander, feel free to make a PR, otherwise I will get to it in the
coming days.
--
Ticket URL: <https://code.djangoproject.com/ticket/35112#comment:5>
Django
Reporter: Alexander Lazarević | Owner: Alexander
Type: | Lazarević
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
Changes (by Alexander Lazarević):
* owner: nobody => Alexander Lazarević
* status: new => assigned
--
Ticket URL: <https://code.djangoproject.com/ticket/35112#comment:6>
Django
-------------------------------------+-------------------------------------
Reporter: Alexander Lazarević | Owner: Alexander
Type: | Lazarević
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Alexander Lazarević):
* has_patch: 0 => 1
Comment:
I created a PR https://github.com/django/django/pull/17737
--
Ticket URL: <https://code.djangoproject.com/ticket/35112#comment:7>
Django
-------------------------------------+-------------------------------------
Reporter: Alexander Lazarević | Owner: Alexander
Type: | Lazarević
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* needs_better_patch: 0 => 1
--
Ticket URL: <https://code.djangoproject.com/ticket/35112#comment:8>
Django
-------------------------------------+-------------------------------------
Reporter: Alexander Lazarević | Owner: Alexander
Type: | Lazarević
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
| checkin
Has patch: 1 | Needs documentation: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Mariusz Felisiak):
* needs_better_patch: 1 => 0
* stage: Accepted => Ready for checkin
--
Ticket URL: <https://code.djangoproject.com/ticket/35112#comment:9>
Django
-------------------------------------+-------------------------------------
Reporter: Alexander Lazarević | Owner: Alexander
Type: | Lazarević
Component: contrib.admin | Version: dev
Severity: Normal | Resolution: fixed
Keywords: | Triage Stage: Ready for
| checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* status: assigned => closed
* resolution: => fixed
Comment:
In [changeset:"5a46f3fad7a1a0955d68e76a9b48daf7c4f7c1e0" 5a46f3fa]:
{{{
#!CommitTicketReference repository=""
revision="5a46f3fad7a1a0955d68e76a9b48daf7c4f7c1e0"
Fixed #35112 -- Removed previous/next month animation in admin calendar
widget.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/35112#comment:10>