-
-
Notifications
You must be signed in to change notification settings - Fork 214
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
chore: improve style of menu buttons and labels #9533
Conversation
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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice start!
It can get tricky with CSS since everything needs to align.
My advice is to keep changes at minimum, work with the icons first and leave changes to labels as last option.
Let me know if you need with anything
@@ -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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@@ -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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
width: 48px !important; | ||
} | ||
|
||
.nav-item-title { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.