Page MenuHomePhabricator

Loading animation is over text on Recent Changes
Closed, ResolvedPublic

Description

When new changes arrive and you click "View new changes", an ellipsis animation appears on top of the results area. It appears at the same level as the level the first line is at, overlaying the top of the characters. For my taste, this looks clumsy.

I would've expected something like this:

This is because of margin-top: 2em; in mw.rcfilters.less:

body.mw-rcfilters-ui-loading .rcfilters-spinner {
  display: block;
  // When loading new results, display the spinner on top of the results area
  margin-top: 2em;
}

On the second image, margin-top property is removed.

Details

Related Gerrit Patches:

Event Timeline

Restricted Application added a project: Collaboration-Team-Triage. · View Herald TranscriptApr 14 2018, 4:51 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Trizek-WMF renamed this task from Fix a couple of visual issues with the new filters UI to Loading animation is over text on Recent Changes.Apr 16 2018, 12:47 PM
Trizek-WMF removed a project: Design.
Trizek-WMF updated the task description. (Show Details)

I've renamed that task and move the second part of the task to T192275: Fix "Tags" padding to have it less close to the edge to handle it.

Thank you for the report @Jack_who_built_the_house. Please create separate tasks for issues that are really different. Those were related but different (animation versus padding).

Thanks for the split, I will do as you advise next time.

Change 440075 had a related patch set uploaded (by Hagar Shilo; owner: Hagar Shilo):
[mediawiki/core@master] Remove loading animation top margin to prevent it from covering text

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

Change 440075 merged by jenkins-bot:
[mediawiki/core@master] Align loading animation for first load later reloads

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

Etonkovidova closed this task as Resolved.Jun 26 2018, 7:24 PM
Etonkovidova added a subscriber: Etonkovidova.

Checked n betalabs for the usual set of browsers (Chrome, FF, Safari and IE11). Checked for Hide/Show and Grouped states.