Page MenuHomePhabricator

Media Search: Background transition of namespace filter
Closed, ResolvedPublic

Description

Currently when the namespace filter is clicked on in Media Search, the background white behind the dialog is growing into its full space. There should be no size transition of this background and should either appear automatically or have a fade in at it's full size

Video replicating the issue found here: https://drive.google.com/file/d/14PfbOfUz4gbnorEph6B0h2pPXCTHRkEi/view?usp=sharing

Event Timeline

@mwilliams The above animation is used in two different instance. In the namespace filter (like you mentioned), but also when displaying the "quick result" dialog in mobile view.

As you can see from the video below, I have updated the animation now to just "ease in" instead than also change in size. Doing so has also changed the animation shown in mobile view.

My question to you (or whoever is meant to answer this kind of question is): Shall I keep one animation for both dialog like in the video, or shall I add different transition animation and keep the quick filter animation as it was before? (both simple to achieve).

https://www.loom.com/share/12d1e1252ecc4bb2b4016ad0dacc15a4

@SimoneThisDot Looks great, using this animation for both instances seems reasonable to me.

Change 708718 had a related patch set uploaded (by Simone Cuomo; author: Simone Cuomo):

[mediawiki/extensions/MediaSearch@master] Background transition of namespace filter

https://gerrit.wikimedia.org/r/708718

I have done some investigation on this ticket, but I have not worked on it, as I will surely not be able to get all the required information and agreement by the time I go on vacation tomorrow.

I want to provide some further information for whoever picks this ticket in my absence, or for my older me in 3 weeks.

The ticket is a bit more involving than just show the gradient, in fact there are some underlying issues with the filter and type list as it is not accessible in smaller screen without touch.

I created a ticket last week for that, that is currently in triage https://phabricator.wikimedia.org/T287457.

The problem that I could see that need solving in this ticket are:

  • On Desktop view between 850px and 720px we should hide the overflow and align the gradient to the end of the container (currently it is hidden only for device smaller than 720px)
  • On device without touch, we need to provide a scrollbar both for the filter and the result type (https://phabricator.wikimedia.org/T287457)
  • On mobile view the gradient is not added at the correct time (between 820px and 720px the text is overflowing and visible with no gradient.

https://www.loom.com/share/cf51b5759256401d9d767a8f78769e9f

Change 708718 merged by jenkins-bot:

[mediawiki/extensions/MediaSearch@master] Background transition of namespace filter

https://gerrit.wikimedia.org/r/708718

Etonkovidova added a subscriber: Etonkovidova.

Moving to Design QA for @mwilliams's inputs on two points:
(1) Just for a quick review - I checked the fix on commons wmf.17 (the patch was ported there) - the screen recordings below are the same as in https://www.loom.com/share/12d1e1252ecc4bb2b4016ad0dacc15a4 (click on an image to see animated gifs).

on Desktop:
commons_gradient2.gif (729×1 px, 1 MB)
on mobile:
commons_gradient3.gif (698×403 px, 1 MB)

(2) Any follow-ups on @SimoneThisDot comment? Or T287457: Filters and results not accessible in small device without touch is sufficient to address the issues that were mentioned in the comment?

If no additional testing is needed from QA, the ticket can be marked as Resolved.