Skip to content

Commit 42b5e3e

Browse files
bram-maegermanalexandrevryghem
bram-maegerman
authored and
alexandrevryghem
committed
139606: improved styling on user-menu & expandable-navbar-section components
1 parent afd6fda commit 42b5e3e

File tree

10 files changed

+132
-136
lines changed

10 files changed

+132
-136
lines changed

‎src/app/header-nav-wrapper/header-navbar-wrapper.component.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,14 @@
33
div#header-navbar-wrapper {
44
border-bottom: var(--ds-header-navbar-border-bottom-height) var(--ds-header-navbar-border-bottom-color) solid;
55
}
6+
7+
::ng-deep {
8+
nav#desktop-navbar {
9+
.ds-menu-item-wrapper {
10+
&:hover, &:focus {
11+
background-color: var(--ds-navbar-link-bg-hover);
12+
}
13+
}
14+
}
15+
}
616
}

‎src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
[dsHoverOutsideOfParentSelector]="'#expandable-navbar-section-' + section.id"
2929
(dsHoverOutside)="deactivateSection($event, false)"
3030
role="menu"
31-
class="dropdown-menu show nav-dropdown-menu m-0 shadow-none border-top-0 px-3 px-md-0 pt-0 pt-md-1">
31+
class="dropdown-menu show nav-dropdown-menu m-0 shadow-none border-top-0">
3232
<div @slide role="presentation">
3333
@for (subSection of (subSections$ | async); track subSection) {
3434
<div class="text-nowrap" role="presentation">

‎src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,20 @@
77
overflow: hidden;
88
min-width: 100%;
99
top: 100%;
10-
@include media-breakpoint-down(sm) {
10+
padding: var(--ds-expandable-navbar-padding);
11+
12+
@include media-breakpoint-down(md) {
1113
border: 0;
1214
border-radius: 0;
1315
}
1416
@include media-breakpoint-up(md) {
1517
border-top-left-radius: 0;
1618
border-top-right-radius: 0;
1719
}
20+
21+
::ng-deep .ds-menu-item {
22+
padding: var(--ds-expandable-navbar-item-padding);
23+
}
1824
}
1925

2026
.toggle-menu-icon {

‎src/app/navbar/navbar.component.scss‎

Lines changed: 11 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
/** Mobile menu styling **/
1111
@media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
1212
.navbar {
13-
width: 100vw;
13+
width: 100%;
1414
background-color: var(--bs-white);
1515
position: absolute;
1616
overflow: hidden;
@@ -24,13 +24,6 @@
2424
}
2525
}
2626

27-
@media screen and (min-width: map-get($grid-breakpoints, md)) {
28-
.reset-padding-md {
29-
margin-left: calc(var(--bs-spacer) / -1);
30-
margin-right: calc(var(--bs-spacer) / -1);
31-
}
32-
}
33-
3427
/* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */
3528
.navbar-expand-md.navbar-container {
3629
@media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
@@ -42,30 +35,30 @@
4235
}
4336

4437
#main-navbar ::ng-deep {
45-
.ds-menu-item, .ds-menu-toggler-wrapper {
46-
white-space: nowrap;
38+
.ds-menu-toggler-wrapper {
4739
text-decoration: none;
4840
}
4941

50-
.dropdown-menu {
51-
padding: 0.5rem !important;
52-
}
53-
5442
.ds-menu-item {
43+
text-decoration: none;
5544
display: block;
56-
padding: 0.5rem 0;
45+
width: 100%;
46+
47+
&:not(.dropdown-menu .ds-menu-item) {
48+
padding: var(--ds-navbar-item-padding);
49+
}
5750
}
5851
}
5952

60-
#main-navbar ::ng-deep .ds-menu-item-wrapper {
61-
background-color: var(--ds-navbar-link-bg-color);
53+
#main-navbar ::ng-deep .ds-menu-item-wrapper:not(ds-user-menu .ds-menu-item-wrapper) {
54+
background-color: var(--ds-navbar-link-bg);
6255

6356
.toggle-menu-icon, .ds-menu-item:not(.dropdown-menu .ds-menu-item) {
6457
color: var(--ds-navbar-link-color);
6558
}
6659

6760
&:hover, &:focus {
68-
background-color: var(--ds-navbar-link-bg-color-hover);
61+
background-color: var(--ds-navbar-link-bg-hover);
6962

7063
.toggle-menu-icon, .ds-menu-item:not(.dropdown-menu .ds-menu-item) {
7164
color: var(--ds-navbar-link-color-hover);

‎src/app/shared/auth-nav-menu/auth-nav-menu.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77
min-height: 75px;
88
}
99

10+
#logoutDropdownMenu {
11+
background-color: var(--ds-user-menu-bg);
12+
}
13+
1014
.dropdown-item.active, .dropdown-item:active,
1115
.dropdown-item:hover, .dropdown-item:focus {
1216
background-color: transparent !important;

‎src/app/shared/auth-nav-menu/user-menu/user-menu.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
[ngClass]="inExpandableNavbar ? 'user-menu-mobile pb-2 mb-2 border-bottom' : 'user-menu-dropdown'"
77
[attr.aria-label]="'nav.user-profile-menu-and-logout' |translate" id="user-menu-dropdown">
88
<li class="ds-menu-item-wrapper username-email-wrapper" role="presentation">
9-
{{dsoNameService.getName(user$ | async)}}<br>
10-
<span class="text-muted">{{(user$ | async)?.email}}</span>
9+
<span class="username-wrapper">{{dsoNameService.getName(user$ | async)}}<br></span>
10+
<span class="email-wrapper">{{(user$ | async)?.email}}</span>
1111
</li>
1212
<li class="ds-menu-item-wrapper" role="presentation" (click)="onMenuItemClick()">
1313
<a class="ds-menu-item" role="menuitem"

‎src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss‎

Lines changed: 19 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,42 +4,33 @@
44
margin: 0;
55
padding: 0;
66

7-
&.user-menu-dropdown {
8-
.ds-menu-item-wrapper {
9-
a.ds-menu-item, &.username-email-wrapper {
10-
padding: var(--ds-user-menu-item-vertical-padding) var(--ds-user-menu-dropdown-padding);
11-
}
12-
13-
a.ds-menu-item {
14-
display: block;
15-
color: var(--ds-expandable-navbar-link-color);
16-
&:hover {
17-
color: var(--ds-expandable-navbar-link-color-hover);
18-
background-color: var(--ds-user-menu-dropdown-link-background-hover);
19-
}
20-
}
21-
}
7+
.username-email-wrapper, .ds-menu-item {
8+
display: block;
9+
padding: var(--ds-user-menu-item-padding);
10+
width: 100%;
2211
}
2312

24-
&.user-menu-mobile {
25-
.ds-menu-item-wrapper {
26-
padding-top: var(--ds-user-menu-item-vertical-padding);
27-
padding-bottom: var(--ds-user-menu-item-vertical-padding);
13+
.username-email-wrapper {
14+
background-color: var(--ds-user-menu-user-info-bg);
15+
padding: var(--ds-user-menu-item-padding);
16+
17+
.username-wrapper {
18+
color: var(--ds-user-menu-username-color);
2819
}
2920

30-
.ds-menu-item {
31-
display: inline-block;
21+
.email-wrapper {
22+
color: var(--ds-user-menu-email-color);
3223
}
24+
}
3325

34-
.ds-menu-item, .ds-menu-toggler-wrapper {
35-
color: var(--ds-expandable-navbar-link-color) !important;
26+
.ds-menu-item {
27+
color: var(--ds-user-menu-dropdown-link-color);
28+
background-color: var(--ds-user-menu-dropdown-link-bg);
3629

37-
&:hover, &:focus {
38-
color: var(--ds-expandable-navbar-link-background-hover) !important;
39-
}
30+
&:hover, &:focus {
31+
color: var(--ds-user-menu-dropdown-link-color-hover);
32+
background-color: var(--ds-user-menu-dropdown-link-bg-hover);
4033
}
41-
4234
}
4335
}
44-
4536
}

‎src/styles/_custom_variables.scss‎

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,7 @@
2626
--ds-header-icon-color-hover: #{$ds-header-icon-color-hover};
2727

2828
--ds-navbar-bg: #{$ds-navbar-bg};
29-
--ds-navbar-item-vertical-padding: 0;
30-
--ds-navbar-item-horizontal-padding: 0.25rem;
31-
--ds-navbar-dropdown-item-vertical-padding: 0.5rem;
32-
--ds-navbar-dropdown-item-horizontal-padding: 1rem;
29+
--ds-navbar-item-padding: 0.25rem 0;
3330
--ds-navbar-link-color: #{$ds-navbar-link-color};
3431
--ds-navbar-link-bg: var(--ds-navbar-bg);
3532
--ds-navbar-link-color-hover: #{$ds-navbar-link-color-hover};
@@ -39,16 +36,33 @@
3936
--ds-header-navbar-border-bottom-height: 1px;
4037

4138
--ds-expandable-navbar-bg: #{$ds-expandable-navbar-bg};
39+
--ds-expandable-navbar-padding: 0.5rem .5rem;
4240
--ds-expandable-navbar-link-color: #{$ds-navbar-link-color};
4341
--ds-expandable-navbar-link-bg: var(--ds-expandable-navbar-bg);
4442
--ds-expandable-navbar-link-color-hover: #{$ds-navbar-link-color-hover};
4543
--ds-expandable-navbar-link-bg-hover: var(--ds-expandable-navbar-link-bg);
46-
--ds-expandable-navbar-item-vertical-padding: 0.25rem;
44+
--ds-expandable-navbar-item-padding: 0.25rem 0.5rem;
45+
@include media-breakpoint-up(md) {
46+
--ds-expandable-navbar-padding: 0.5rem 0;
47+
--ds-expandable-navbar-item-padding: 0.25rem 0.75rem;
48+
}
4749

48-
--ds-user-menu-item-vertical-padding: 0.25rem;
49-
--ds-user-menu-dropdown-padding: 1rem;
50-
--ds-user-menu-dropdown-link-color: #{$dark};
51-
--ds-user-menu-dropdown-link-background-hover: #{$gray-200};
50+
--ds-user-menu-bg: var(--ds-expandable-navbar-bg);
51+
--ds-user-menu-item-padding: var(--ds-navbar-item-padding);
52+
--ds-user-menu-username-color: var(--bs-body-color);
53+
--ds-user-menu-email-color: var(--bs-secondary-color);
54+
--ds-user-menu-user-info-bg: var(--ds-user-menu-dropdown-link-bg);
55+
--ds-user-menu-dropdown-link-color: var(--ds-navbar-link-color);
56+
--ds-user-menu-dropdown-link-bg: var(--ds-navbar-link-bg);
57+
--ds-user-menu-dropdown-link-color-hover: var(--ds-navbar-link-color-hover);
58+
--ds-user-menu-dropdown-link-bg-hover: var(--ds-navbar-link-bg-hover);
59+
@include media-breakpoint-up(md) {
60+
--ds-user-menu-item-padding: 0.25rem 1rem;
61+
--ds-user-menu-dropdown-link-color: var(--ds-expandable-navbar-link-color);
62+
--ds-user-menu-dropdown-link-bg: var(--ds-expandable-navbar-link-bg);
63+
--ds-user-menu-dropdown-link-color-hover: var(--ds-expandable-navbar-link-color-hover);
64+
--ds-user-menu-dropdown-link-bg-hover: var(--ds-expandable-navbar-link-bg-hover);
65+
}
5266

5367
@include media-breakpoint-up(md) {
5468
--ds-header-logo-height: 50px;

‎src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss‎

Lines changed: 3 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -20,87 +20,14 @@
2020
min-height: var(--ds-expandable-navbar-height);
2121
height: auto;
2222
border-bottom: var(--ds-header-navbar-border-bottom-style);
23+
background-color: var(--ds-navbar-bg);
2324
}
2425
}
2526
}
2627

27-
/* MENU ITEMS */
28-
29-
::ng-deep {
30-
.ds-menu-item, .ds-menu-toggler-wrapper {
28+
::ng-deep ds-user-menu {
29+
.ds-menu-item {
3130
text-decoration: none;
3231
}
33-
34-
nav#desktop-navbar { // in header component
35-
#main-site-navigation {
36-
/* Desktop menu */
37-
38-
.ds-menu-item-wrapper, .ds-menu-item, .ds-menu-toggler-wrapper {
39-
// fill navbar height (required by dropdown menus) and center content
40-
display: flex;
41-
align-items: center;
42-
height: 100%;
43-
}
44-
.ds-menu-item {
45-
// define here the style for top-level navbar menu items
46-
padding: var(--ds-navbar-item-vertical-padding) var(--ds-navbar-item-horizontal-padding);
47-
}
48-
49-
.ds-menu-item-wrapper {
50-
color: var(--ds-navbar-link-color);
51-
background-color: var(--ds-navbar-link-bg);
52-
53-
.toggle-menu-icon, .ds-menu-item:not(.dropdown-menu .ds-menu-item) {
54-
color: var(--ds-navbar-link-color);
55-
}
56-
57-
&:hover, &:focus {
58-
color: var(--ds-navbar-link-color-hover);
59-
background-color: var(--ds-navbar-link-bg-hover);
60-
61-
.toggle-menu-icon, .ds-menu-item:not(.dropdown-menu .ds-menu-item) {
62-
color: var(--ds-navbar-link-color-hover);
63-
}
64-
65-
.dropdown-menu {
66-
background-color: var(--ds-expandable-navbar-bg);
67-
68-
.ds-menu-item {
69-
color: var(--ds-expandable-navbar-link-color);
70-
background-color: var(--ds-expandable-navbar-link-bg);
71-
72-
&:hover, &:focus {
73-
color: var(--ds-expandable-navbar-link-color-hover);
74-
background-color: var(--ds-expandable-navbar-link-bg-hover);
75-
}
76-
}
77-
}
78-
}
79-
}
80-
81-
/* desktop submenu */
82-
83-
.dropdown-menu {
84-
.ds-menu-item {
85-
// define here the style for second-level navbar menu items
86-
padding: var(--ds-navbar-dropdown-item-vertical-padding) var(--ds-navbar-dropdown-item-horizontal-padding);
87-
}
88-
}
89-
90-
}
91-
}
92-
93-
nav#collapsible-mobile-navbar { // in header-navbar-wrapper component
94-
95-
border-top: var(--ds-expandable-navbar-border-top-style);
96-
padding-top: var(--ds-expandable-navbar-padding-top);
97-
98-
#main-site-navigation {
99-
.ds-menu-item {
100-
padding: var(--ds-expandable-navbar-item-vertical-padding) 0;
101-
}
102-
}
103-
104-
}
10532
}
10633
}

‎src/themes/dspace/app/navbar/navbar.component.scss‎

Lines changed: 52 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,54 @@
1-
:host {
1+
:host-context(#desktop-navbar) ::ng-deep #main-site-navigation {
2+
.ds-menu-item-wrapper, .ds-menu-item, .ds-menu-toggler-wrapper {
3+
// fill navbar height (required by dropdown menus) and center content
4+
display: flex;
5+
align-items: center;
6+
height: 100%;
7+
}
8+
}
9+
10+
#main-site-navigation ::ng-deep {
11+
.ds-menu-toggler-wrapper {
12+
text-decoration: none;
13+
}
14+
15+
.ds-menu-item {
16+
text-decoration: none;
17+
display: block;
18+
width: 100%;
19+
20+
&:not(.dropdown-menu .ds-menu-item) {
21+
padding: var(--ds-navbar-item-padding);
22+
}
23+
}
24+
}
25+
26+
#main-site-navigation ::ng-deep .ds-menu-item-wrapper:not(ds-user-menu .ds-menu-item-wrapper) {
27+
background-color: var(--ds-navbar-link-bg);
28+
29+
.toggle-menu-icon, .ds-menu-item:not(.dropdown-menu .ds-menu-item) {
30+
color: var(--ds-navbar-link-color);
31+
}
32+
33+
&:hover, &:focus {
34+
background-color: var(--ds-navbar-link-bg-hover);
35+
36+
.toggle-menu-icon, .ds-menu-item:not(.dropdown-menu .ds-menu-item) {
37+
color: var(--ds-navbar-link-color-hover);
38+
}
39+
40+
.dropdown-menu {
41+
background-color: var(--ds-expandable-navbar-bg);
42+
43+
.ds-menu-item {
44+
color: var(--ds-expandable-navbar-link-color);
45+
background-color: var(--ds-expandable-navbar-link-bg);
246

47+
&:hover, &:focus {
48+
color: var(--ds-expandable-navbar-link-color-hover);
49+
background-color: var(--ds-expandable-navbar-link-bg-hover);
50+
}
51+
}
52+
}
53+
}
354
}

0 commit comments

Comments
 (0)