Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Backport] Fix faulty admin spinner animation #14940

Merged

Conversation

rogyar
Copy link
Contributor

@rogyar rogyar commented May 2, 2018

Original PR: #13700

Description

When the @spinner-delay variable does not have a unit (s/seconds), the generated animation-delay attribute for the western spinner spoke also lacks a unit. In certain browsers (I am testing with Firefox Developer Edition 59.0b10 (64-bit)), this CSS style is marked as invalid and not applied, causing the western and south-western spokes of the spinner to flash out of order in the resulting animation. I assume that, somewhere in the LESS calculations, the @spinner-delay and @spinner-animation-step variables are combined with arithmetic, coercing the resulting spoke style to have the correct units: this coercion does not occur for the final spoke, perhaps because the arithmetic involved does not include the last child (for which the animation delay should be at a maximum).

In any case, the error is hardly noticeable, but there's no reason to let such a easily-fixable styling omission slip through the cracks.

Manual testing scenarios

Faulty Behavior

  1. Log in to a clean Magento 2.2 admin panel with the default adminhtml theme on Firefox Developer Edition 59.0b10.
  2. On the left sidebar, navigate to Sales > Operations > Orders.
  3. As the grid loads, note the incorrect order in which the western and south-western spinner spokes flash.
  4. Inspect the CSS and find .spinner > span:nth-child(8). Note that, unlike all of the other nth-child selectors in that category, the 8th and final selector's animation-delay does not have a unit of seconds. On browsers where units are required, that style will be marked as invalid.

Proper Behavior

  1. Repeat steps above. Verify that the spinner looks visually correct to the naked eye.
  2. Inspect the CSS to ensure that the proper unit has been added to the .spinner > span:nth-child(8) selector.

@magento-engcom-team magento-engcom-team added this to the May 2018 milestone May 2, 2018
@magento-engcom-team magento-engcom-team added Partner: Atwix Pull Request is created by partner Atwix partners-contribution Pull Request is created by Magento Partner labels May 2, 2018
@VladimirZaets
Copy link
Contributor

Hi, @rogyar , I took your PR into processing, thank you for collaboration.

@magento-engcom-team
Copy link
Contributor

Hi @rogyar. Thank you for your contribution.
Changes from your Pull Request will be available with the upcoming 2.1.15 release.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Partner: Atwix Pull Request is created by partner Atwix partners-contribution Pull Request is created by Magento Partner Progress: accept Release Line: 2.1
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants