Page MenuHomePhabricator

ULS "No results found" looks badly styled
Closed, ResolvedPublic

Description

This is how it looks in ULS:

image.png (399×716 px, 13 KB)

This is how it looks in jquery.uls:

image.png (365×727 px, 20 KB)

Are there already existing mockups/specs where I could see the expected styling of this text?

Event Timeline

Amire80 triaged this task as Medium priority.Oct 31 2017, 7:11 AM
Amire80 subscribed.

I agree.

The margin above the "No results found" string is definitely too small.

Here's another screenshot, from Compact Language Links in Zulu Wikipedia, searching for a non-existent language:

צילום מסך 2017.10.31 ב.9.10.28.png (1×1 px, 274 KB)

We want to provide better spacing around this message since it is the main information piece here. I proposed some spacing adjustments and related changes that may help add some clarity:

lang-select-nofound-adjustments.png (792×1 px, 84 KB)

  • 20px spacing above and below the "No results found" message.
  • 12px spacing above and below the search indications ("You can search by...")
    • Adjusting the text color to use Base20 (#54595D)
    • Adjust the background to use the same background color as the area above it (#FCFCFC).
    • Add a top border in Base80 (#EAECF0) to separate both areas.
Arrbee raised the priority of this task from Medium to High.Jan 18 2018, 9:19 AM

Upstream fix https://github.com/wikimedia/jquery.uls/pull/293

It might require some skin specific overrides in MW ULS too. Will do that once the upstream PR merged.

Change 407584 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/UniversalLanguageSelector@master] Update jquery.uls to 3161b34

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

Change 407584 merged by jenkins-bot:
[mediawiki/extensions/UniversalLanguageSelector@master] Update jquery.uls to 3161b34

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

It seems that all specs (specified by @Pginer-WMF) are in place:

cx-testingwmf.17
Screen Shot 2018-02-08 at 11.29.24 AM.png (351×778 px, 51 KB)
Screen Shot 2018-02-08 at 11.39.06 AM.png (338×745 px, 48 KB)

In IE11 additional 'x' is displayed - I've added the screenshot to the already filed ticket: T173060: Content Translation in IE - UI problems

double_X.png (614×1 px, 20 KB)