Increase login links touch area on small screens #4680
Merged
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
javierm
force-pushed
the
small_menu_links
branch
2 times, most recently
from
8c8092a
to
fea3fe2
Compare
javierm
force-pushed
the
small_menu_links
branch
from
fea3fe2
to
e3d347a
Compare
When, on small screens, a navigation element had a very long text causing it to span over multiple lines, the space between each line was the same as the space between elements. This made it hard to see where elements started and ended. Using a padding to separate the contents of one element and the contents of the next one solves the issue.
In commit 55c3c79 we updated the admin layout header to use `class="dropdown menu" data-dropdown-menu` instead of `class="menu" data-responsive-menu="medium-dropdown"`. Then, in commit dcec003, we updated the public layout header to use `class="menu" data-responsive-menu="medium-dropdown"` instead of `class="dropdown menu" data-dropdown-menu`. Now we're applying the same classes to both, hoping we can get some consistent styles. I'm choosing to keep the ones in the public layout because using it I had less problems when trying to improve the styles of this navigation.
javierm
force-pushed
the
small_menu_links
branch
from
e3d347a
to
9cf9c9f
Compare
Having the logo inside a list of one item wasn't needed and its classes conflicted with other elements with the `.menu` class.
Some of these styles were redundant and so we can remove them.
On small screens, the "Sign in", "Register", "My content", "My account" and "Sign out" links didn't have much padding nor space between them, and it was easy to accidentally click the wrong link. This change also positively affects the menu on medium and large screens. When one of the options (like "SDG content") had a text spanning over two lines (like it happens in Swedish), there was barely any space between those two lines. So we're using `line-height: inherit` instead and adjusting the padding accordingly.
javierm
force-pushed
the
small_menu_links
branch
2 times, most recently
from
ce123f3
to
e2d6809
Compare
The "Sign in" or "My account" links and the main navigation are different elements, and they're in different places on medium and large screens. Now we're also separating them on small screens. Since the `.vertical` class in the menu added quite a few styles and it was difficult to overwrite them, we're simply removing this class from this element. This way we're also removing the huge space between the menu button and the first element of the navigation.
taitus
approved these changes
Sep 15, 2021
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.
Objectives
Visual Changes
Before these changes
After these changes