Page MenuHomePhabricator

[XS] Media Search: Decrease padding below filters
Closed, ResolvedPublic

Description

When we removed the gray bar behind the filters it made the padding between the filters and the results too large. It appears to be around 30px right now via a few different elements above and below, I think halving that to about 16px would resolve this while still giving it enough room.

Screen Shot 2021-01-07 at 10.03.49 AM.png (1×2 px, 2 MB)

Event Timeline

CBogen renamed this task from Media Search: Decrease padding below filters to [XS] Media Search: Decrease padding below filters.Jan 13 2021, 5:57 PM

Notes:

  1. @media screen and (min-width: 720px) .wbmi-select__content:
    1. padding: 6px 36px 6px 12px;
  2. .wbmi-select__content:
    1. padding: 11px 36px 11px 12px;
  3. .wbmi-media-search-filters
    1. min-height: 2.5em
    2. padding: 6px 0px
  4. .wbmi-media-search-results
    1. margin: 16px 0

@mwilliams Just taken a gander at this. At the moment there is 12-17 px of white space with padding associated with the filters and 16 px of whitespace associated with the search results from a margin.

Do you want to just drop the margin on the search results to 0px to keep the space above above and below the filters symmetric or do you want a degree of asymmetry?

In which case we could keep 4 or 5px on the margin on the search results.

@Jseddon Tested out removing the 16px from the search results and that seems like it does the job nicely!

Change 666385 had a related patch set uploaded (by Seddon; owner: Seddon):
[mediawiki/extensions/WikibaseMediaInfo@master] Media Search: Decrease padding below filters

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

@Jseddon your solution looks great! One question for @mwilliams: do you think the new decreased padding works on the Other Media tab, or do we need a little more space here?

image.png (980×2 px, 235 KB)

Yeah, I wondered that when I took a look at this @AnneT, thanks for bringing that up.

After spending some more time with it, I think we could offer a bit more space, let's switch that 16px to 6px instead of 0px. Does that sound reasonable?

@mwilliams Sounds good! Just to be clear, do you want that 6px just on the Other Media tab only, or on all tabs?

I think its fine to have it on all the tabs to make this consistent

Change 666385 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Media Search: Decrease padding below filters

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

Checked in betalabs. Mobile looks fine too.

betalabscommons wmf.33
Screen Shot 2021-03-07 at 10.08.48 AM.png (437×820 px, 58 KB)
Screen Shot 2021-03-07 at 10.08.27 AM.png (344×770 px, 51 KB)

Checked in commons wmf.34 - Audio and Categories and Pages tabs display more space than other tabs (it doesn't seem to me as a bug; it's just visually inconsistent).

Images (the same for Video, Other Media)AudioCategories and Pages
Screen Shot 2021-03-10 at 7.20.10 PM.png (423×824 px, 308 KB)
Screen Shot 2021-03-10 at 7.14.43 PM.png (397×834 px, 55 KB)
Screen Shot 2021-03-10 at 7.23.50 PM.png (397×817 px, 58 KB)

For @mwilliams review - if anything needs to be done. The screenshots are from Chrome.

This works for me! Thanks everyone