User themes can have something like font-size: 1vw; (just for instance) set on html tag, to have proportional scaling of all UI elements no matter which resolution of the screen.
Almost all sizes of everything related to Navigation module are based on --admin-toolbar-rem CSS variable, which is doing its job great. However we still have few UI elements with the px sizes set, or some where don't have sizes set at all (for instance logotype)
1. Standard profile installation
2. Enable Navigation module
3. Then on any page try to zoom out or zoom in
4. Then add for instance font-size: 1vw; to the html tag and try to zoom out or zoom it again
I found 3 UI elements (could be more, but seems only 3, at least i didn't find anything else) where we have to set or replace sizes in rems:
1. Logotype
2. Dividing line between sections in navigation bar
3. Outlines/borders, hovers and focuses (to be checked for all interactive elements which does have these states with outlines)
1. Convert existing hardcoded px values into rems (using --admin-toolbar-rem css variable)
2. For the elements like logotype - add sizes
| Comment | File | Size | Author |
|---|---|---|---|
| #19 | 3446611-nr-bot.txt | 90 bytes | needs-review-queue-bot |
| #14 | 3446611-nr-bot.txt | 90 bytes | needs-review-queue-bot |
| #13 | screen-capture (7).gif | 11.57 MB | kostyashupenko |
| #2 | screen-capture (5).gif | 5.59 MB | kostyashupenko |
| #2 | screen-capture (4).gif | 4.32 MB | kostyashupenko |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
kostyashupenkoComment #4
kostyashupenkoComment #5
kostyashupenko*
Comment #6
kostyashupenkoComment #7
kostyashupenkoComment #8
kostyashupenkoComment #9
kostyashupenkoComment #10
kostyashupenkoMR is ready for review. In #5 i have uploaded wrong gif with the demonstration of results. Will upload correct gif later, but you can test in any way.
Comment #12
gauravvvv commentedI have updated leftover px value with variables.
Comment #13
kostyashupenkoRE #10
i'm attaching correct gif with the results
btw @Gauravvvv i think it is not required to change those px values, because if you will look to the context of the selector you will understand that the styles are used to hide visually an element.
Keeping on Needs review still
Comment #14
needs-review-queue-bot commentedThe Needs Review Queue Bot tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".
This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.
Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.
Comment #18
arunkumarkUpdated the fork and ready for Review.
Comment #19
needs-review-queue-bot commentedThe Needs Review Queue Bot tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".
This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.
Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.
Comment #21
ahsannazir commentedComment #23
finnsky commentedLooks good to me, checked on all screen sizes and rem definitions.
Fixed 2 small bugs
1. scope of mobile expand button. now it is control-bar instead of top-bar
2. duplication of --admin-toolbar-top-bar-height variable in control-bar
That small bugs so i believe they can be applied as RTBC.
Comment #24
finnsky commentedIf possible i would like to postpone it.
Comment #25
nod_#3458215: Migrate Toolbar button to SDC