Header: The Pegasus header's user menu & hamburger no longer wrap #16984
Conversation
This file contains 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
With a particularly long set of options in the Pegasus header on a responsive page, there was a chance that the user menu and hamburger would wrap into the whitespace below, rendering them invisible, at certain browser widths. The same thing was occurring on the teacher-dashboard, since he header has remained responsive even as those pages themselves are not. This fix brings the Pegasus functionality closer to the dashboard, by not allowing these right-hand components to wrap. It does produce some overlapped rendering, but going forward we can tune the content of the header and the responsive rules to prevent that.
Make the hamburger the same distance from the edge as it is on pegasus. This also makes it the same distance as the logo on the left.
davidsbailey
approved these changes
Aug 10, 2017
| @@ -983,7 +983,7 @@ $default-modal-width: 640px; | |||
| .header_right { | |||
| position: absolute; | |||
| float: left; | |||
| right: 25px; | |||
| right: 16px; | |||
There was a problem hiding this comment.
nit: I think you can get rid of float: left; since it should have no effect on an absolutely positioned element.
There was a problem hiding this comment.
Great catch. I'd discovered this when messing with the DOM and then forgot when implementing here.
Erin007
approved these changes
Aug 10, 2017
|
fyi @wjordan |
|
PTAL |
|
these look like they affect the user menu. can you include screenshots? |
|
Hi Brendan, please ping if you're making modifications only to the github description next time, as these do not generate email updates. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
With a particularly long set of options in the Pegasus header on a responsive page, there was a chance that the user menu and hamburger would wrap into the whitespace below, rendering them invisible, at certain browser widths.
The same thing was occurring on the teacher-dashboard, since the header has remained responsive even as those pages themselves are not.
This fix brings the Pegasus functionality closer to the dashboard, by not allowing these right-hand components to wrap. It does produce some overlapped rendering, but going forward we can tune the content of the header and the responsive rules to prevent that.
I took this opportunity to fix something that was really bugging me: the padding on the right of the header is now the same as the padding on the left.
To remain consistent, the dashboard header also gets this new right-hand padding size.
Since a change to the header will fail a lot of Eyes visual diff tests, I took the opportunity to improve the user menu's up/down glyph to use the same font-awesome arrows as the hamburger. This work exposed some layout complications in the dropdown menu and how it related to its parent button which has been made more robust.
on a responsive pegasus page
on a non-responsive pegasus page
on a dashboard page
dropdown on pegasus
dropdown on dashboard