Skip to content
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.

Sign up for GitHub

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

Jump to bottom

fix(#9481): improve style of new menu buttons and labels #9545

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
+50 −28
Open

fix(#9481): improve style of new menu buttons and labels #9545

Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
167b6fd
Repaired PR request
GallyTi Oct 15, 2024
dc2845e
Some changes that was suggessted
GallyTi Oct 17, 2024
d762f97
Update webapp/src/css/inbox.less
GallyTi Oct 26, 2024
7e0ffcd
Update webapp/src/css/inbox.less
GallyTi Oct 26, 2024
2a12ad4
Removed unecesary code block
GallyTi Oct 26, 2024
6a075d5
Update webapp/src/css/inbox.less
GallyTi Oct 28, 2024
d950e01
Removed webkit
GallyTi Oct 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 45 additions & 7 deletions webapp/src/css/inbox.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,10 +198,17 @@ body {
a .button-label {
margin-top: 3px;
position: relative;
overflow: hidden;
word-wrap: break-word;
color: @nav-icon-gray;
font-size: @font-XXS;
overflow-wrap: break-word;
word-break: break-word;
hyphens: auto;
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-clamp: 2;
overflow: hidden;
Benmuiruri marked this conversation as resolved.
Show resolved Hide resolved
text-overflow: ellipsis;
}

Expand Down Expand Up @@ -1292,6 +1299,7 @@ mm-sidebar-menu .mat-sidenav-container {
mm-panel-header {
background: @top-header-color;
height: @sidebar-menu-header-desktop;
padding: 0px !important;

Benmuiruri marked this conversation as resolved.
Show resolved Hide resolved
.panel-header {
justify-content: flex-end;
Expand All @@ -1303,13 +1311,13 @@ mm-sidebar-menu .mat-sidenav-container {
font-size: @font-XXL;
font-weight: bold;
line-height: @font-XXL;
margin-left: 15px;
margin-left: -15px;
Benmuiruri marked this conversation as resolved.
Show resolved Hide resolved
color: @text-inverse-color;
letter-spacing: normal;
}

.panel-header-close {
width: 20px;
width: 80px;
text-align: center;

mat-icon {
Expand Down Expand Up @@ -1366,6 +1374,7 @@ mm-sidebar-menu .mat-sidenav-container {
mat-icon {
text-align: center;
margin-right: 15px;
margin-left: 10px;
flex-shrink: 0;
}
}
Expand Down Expand Up @@ -1402,14 +1411,45 @@ mm-sidebar-menu .mat-sidenav-container {
height: calc(@sidebar-menu-height - @sidebar-menu-header-mobile);
}

mat-icon {
margin-left: -6px !important;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Follow the same trick here, more specific selector and we can remove !important

Suggested change
mat-icon {
margin-left: -6px !important;
}
.nav-item mat-icon {
margin-left: -6px;
}

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here.


mm-panel-header {
height: @sidebar-menu-header-mobile;

.panel-header-title {
font-size: @font-extra-large;
}

.panel-header-close {
width: 48px !important;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same advice, to remove !important name the selector more specific, in L1418 .mat-sidenav mm-panel-header {
Then remove the !important

Suggested change
.panel-header-close {
width: 48px !important;
}
.panel-header-close {
width: 48px;
}

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cant do, it just don't apply those changes no matter hard i tried.


.panel-header-title {
margin-left: unset;
}
Benmuiruri marked this conversation as resolved.
Show resolved Hide resolved
}
}

.app-root:not(.old-nav) .header .tabs a .button-label {
/* Keep the desired styles */
margin-top: 3px;
overflow: hidden;
word-wrap: break-word;
color: @nav-icon-gray;
font-size: @font-XXS;
text-overflow: ellipsis;

/* Unset or override the unwanted properties */
display: block;
white-space: unset;
word-break: unset;
-webkit-line-clamp: unset;
-webkit-box-orient: unset;
line-clamp: unset;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please move this into L1499, which is pretty much the same selector.
Then, remove the comments and duplicate attributes.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

GallyTi marked this conversation as resolved.
Show resolved Hide resolved

.app-root:not(.old-nav) {
&.messages,
&.tasks,
Expand Down Expand Up @@ -1456,7 +1496,6 @@ mm-sidebar-menu .mat-sidenav-container {
top: 0;
font-size: @font-XXS;
padding-top: 5px;
text-overflow: ellipsis;
margin-top: 0;
}

Expand Down Expand Up @@ -1882,5 +1921,4 @@ mm-sidebar-menu .mat-sidenav-container {
.desktop-only {
display: none;
}
}

}
Loading