chore: improve style of menu buttons and labels #9533
Conversation
latin-panda
changed the title
|
Thanks for sending this @GallyTi, I'll be reviewing your PR tomorrow. The Pull Request title will be the commit message before merging. I have updated the title to follow the commit message format. |
| @@ -76,7 +76,6 @@ button.mat-mdc-unelevated-button { | |||
| */ | |||
| mm-panel-header { | |||
| display: flex; | |||
| padding: 14px 20px 10px 20px; | |||
There was a problem hiding this comment.
The mm-panel-header is a component reused in several places, and this change affects headers of modals, FAB menu, revision of reports. For example:
Please revert this change and override the component in the mm-sidebar-menu code block from inbox.less file.
| @@ -1456,7 +1487,7 @@ mm-sidebar-menu .mat-sidenav-container { | |||
| top: 0; | |||
| font-size: @font-XXS; | |||
| padding-top: 5px; | |||
| text-overflow: ellipsis; | |||
| //text-overflow: ellipsis; | |||
There was a problem hiding this comment.
In mobile, this is looking a bit off, there is single letters left in a second line, and the icons aren't aligned anymore
This bar is initially okay for mobile, master branch:
The scope of the ellipsis work is only for desktop display:
I recommend leaving this bar as it is originally on mobile display (master branch) and only applying the changes to the desktop display. When applying the changes to the desktop display, there can be side effects to the mobile because it inherits the styles, in that case, you'll need to override the mobile styles so it displays the same as in master branch
| @@ -1327,7 +1339,8 @@ mm-sidebar-menu .mat-sidenav-container { | |||
| } | |||
|
|
|||
| .nav-item { | |||
| padding: 0 20px 20px 20px; | |||
| //padding: 0 20px 20px 20px; | |||
There was a problem hiding this comment.
Please remove any new comment
| @@ -1363,7 +1376,12 @@ mm-sidebar-menu .mat-sidenav-container { | |||
| color: @text-secondary-color; | |||
| } | |||
|
|
|||
| .nav-item-title { | |||
There was a problem hiding this comment.
There are some side effects to these texts, but I'm not sure what is causing it.
In this one, the texts are overlapping
See master branch where it doesn't overlap
In this other one, the text is all the way to the left.
Have a look at master branch, the text is aligned with the icons
| width: 48px !important; | ||
| } | ||
|
|
||
| .nav-item-title { |
There was a problem hiding this comment.
The label on the pink box should align to the red line
This is how it is in master branch.
There was a problem hiding this comment.
While on the please keep the X icon about similar size as "Menu", just as in master branch:
|
Hello @latin-panda, I apologize for the inconvenience. I needed a fresh start, so I created a new git clone and a new branch, which led to this new pull request. I’m really sorry for the trouble, but everything should now be properly aligned as requested, with cleaner and more organized code. Thank you for your understanding! If it is possible i will link this pull request to the new one, and pelase close or remove this pull request. Thank you! 🥺🥺 |
|
That's okay @GallyTi, thank you for your time on this. I'll review the other PR tomorrow :) |
Description
Improve Sidebar Menu's button and label placement
#9481
Code review checklist
License
The software is provided under AGPL-3.0. Contributions to this project are accepted under the same license.