COMPASS-1417 Remove loading animation scrollbars #1195
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
matt-d-rat
reviewed
Aug 9, 2017
src/app/loading/style.css
Outdated
| width: 100%; | ||
| padding-left: 6px; | ||
| left: 50%; | ||
| margin-left: -26px; |
There was a problem hiding this comment.
I assume that the width of the loading icon is 26px hence the negative margin offset here?
This should probably be at the very least a locally scoped variable for verbosity or at least have an inline comment as it is not immediately obvious.
I would also consider using display: flex, height: 100vh, flex-direction: column on the parent with flex: 1 and width: 100% on the child as an alternative, cleaner approach.
pzrq
force-pushed
the
COMPASS-1417-scrollbars
branch
2 times, most recently
from
7ce6733 to
96d8e1e
Compare
pzrq
force-pushed
the
COMPASS-1417-scrollbars
branch
from
96d8e1e to
64e2808
Compare
|
CI is currently blocked on #1201 |
|
Thanks @matt-d-rat 👍 |
So it's easier to inspect its state.
No flexbox needed in this context.
CSS animation appears to be special enough I don't know how to handle it in this context, perhaps it needs another wrapper?
pzrq
force-pushed
the
COMPASS-1417-scrollbars
branch
from
64e2808 to
dbc568d
Compare
pzrq
added a commit
that referenced
this pull request
Aug 11, 2017
* Temporarily disable hiding the loading animation So it's easier to inspect its state. * Remove default 8px margin * Use standard top/left pattern from .sq CSS class * Go back to width: 100% removing margin/padding No flexbox needed in this context. * Remove duplicate text-align * Abstract towards a reusable loading animation component CSS animation appears to be special enough I don't know how to handle it in this context, perhaps it needs another wrapper? * Revert "Temporarily disable hiding the loading animation"
pzrq
added a commit
that referenced
this pull request
Aug 11, 2017
* Temporarily disable hiding the loading animation So it's easier to inspect its state. * Remove default 8px margin * Use standard top/left pattern from .sq CSS class * Go back to width: 100% removing margin/padding No flexbox needed in this context. * Remove duplicate text-align * Abstract towards a reusable loading animation component CSS animation appears to be special enough I don't know how to handle it in this context, perhaps it needs another wrapper? * Revert "Temporarily disable hiding the loading animation"
pzrq
added a commit
that referenced
this pull request
Aug 11, 2017
* Temporarily disable hiding the loading animation So it's easier to inspect its state. * Remove default 8px margin * Use standard top/left pattern from .sq CSS class * Go back to width: 100% removing margin/padding No flexbox needed in this context. * Remove duplicate text-align * Abstract towards a reusable loading animation component CSS animation appears to be special enough I don't know how to handle it in this context, perhaps it needs another wrapper? * Revert "Temporarily disable hiding the loading animation"
This was referenced Aug 11, 2017
pzrq
added a commit
that referenced
this pull request
Aug 11, 2017
… (#1205) * Temporarily disable hiding the loading animation So it's easier to inspect its state. * Remove default 8px margin * Use standard top/left pattern from .sq CSS class * Go back to width: 100% removing margin/padding No flexbox needed in this context. * Remove duplicate text-align * Abstract towards a reusable loading animation component CSS animation appears to be special enough I don't know how to handle it in this context, perhaps it needs another wrapper? * Revert "Temporarily disable hiding the loading animation"
pzrq
added a commit
that referenced
this pull request
Aug 11, 2017
… (#1204) * Temporarily disable hiding the loading animation So it's easier to inspect its state. * Remove default 8px margin * Use standard top/left pattern from .sq CSS class * Go back to width: 100% removing margin/padding No flexbox needed in this context. * Remove duplicate text-align * Abstract towards a reusable loading animation component CSS animation appears to be special enough I don't know how to handle it in this context, perhaps it needs another wrapper? * Revert "Temporarily disable hiding the loading animation"
durran
pushed a commit
that referenced
this pull request
Aug 13, 2017
* Temporarily disable hiding the loading animation So it's easier to inspect its state. * Remove default 8px margin * Use standard top/left pattern from .sq CSS class * Go back to width: 100% removing margin/padding No flexbox needed in this context. * Remove duplicate text-align * Abstract towards a reusable loading animation component CSS animation appears to be special enough I don't know how to handle it in this context, perhaps it needs another wrapper? * Revert "Temporarily disable hiding the loading animation"
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
macOS - git / local build
Before
After
Ubuntu VM - git / local build
Before
After
Windows VM - Via Evergreen patch build
https://evergreen.mongodb.com/version/598a8b6ae3c331594401b427
After