Skip to content

Commit fdc6e08

Browse files
jr-rkjr-rk
committed
Fixed navbar visibility
1 parent 1e1be99 commit fdc6e08

7 files changed

Lines changed: 71 additions & 75 deletions

File tree

‎src/app/home-page/home-news/home-news.component.html‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,9 @@
1-
<div class="jumbotron jumbotron-fluid mt-ncs">
1+
<div class="background-image-container mt-ncs">
22
<div class="container">
33
<div class="d-flex flex-wrap">
44
<div>
5-
<h1 class="display-3">DSpace 7</h1>
6-
<p class="lead">DSpace is the world leading open source repository platform that enables organisations to:</p>
5+
<img alt="" [src]="'assets/custom/images/hl1_cs.png'"/><!-- without the []="''" Firefox downloads both the fallback and the resolved image -->
76
</div>
87
</div>
9-
<ul>
10-
<li>easily ingest documents, audio, video, datasets and their corresponding Dublin Core metadata
11-
</li>
12-
<li>open up this content to local and global audiences, thanks to the OAI-PMH interface and Google Scholar optimizations
13-
</li>
14-
<li>issue permanent urls and trustworthy identifiers, including optional integrations with handle.net and DataCite DOI</li>
15-
</ul>
16-
<p>Join an international community of <a href="https://wiki.lyrasis.org/display/DSPACE/DSpace+Positioning"
17-
target="_blank" role="link" tabindex="0">leading institutions using DSpace</a>.
18-
</p>
198
</div>
209
</div>

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

Lines changed: 51 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,67 @@
1-
:host {
2-
--ds-expandable-navbar-height: auto;
1+
nav {
2+
background-color: var(--lt-zcu-pub-blue);
3+
}
34

4-
nav.navbar {
5-
background-color: var(--ds-navbar-bg);
6-
align-items: baseline;
7-
padding: 0;
8-
}
5+
nav.navbar {
6+
align-items: baseline;
7+
}
98

10-
/** Mobile menu styling **/
11-
@media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
12-
.navbar {
13-
width: 100vw;
14-
background-color: var(--bs-white);
15-
position: absolute;
16-
overflow: hidden;
17-
height: 0;
18-
z-index: var(--ds-nav-z-index);
19-
&.open {
20-
height: auto;
21-
min-height: 100vh; //doesn't matter because wrapper is sticky
22-
border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid; // open navbar covers header-navbar-wrapper border
23-
}
9+
.navbar-nav {
10+
background-color: var(--lt-zcu-pub-blue);
11+
}
12+
13+
/** Mobile menu styling **/
14+
@media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
15+
.navbar {
16+
width: 100vw;
17+
background-color: var(--bs-white);
18+
position: absolute;
19+
overflow: hidden;
20+
height: 0;
21+
z-index: var(--ds-nav-z-index);
22+
&.open {
23+
height: 100vh; //doesn't matter because wrapper is sticky
2424
}
2525
}
26+
}
2627

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-
}
28+
@media screen and (min-width: map-get($grid-breakpoints, md)) {
29+
.reset-padding-md {
30+
margin-left: calc(var(--bs-spacer) / -2);
31+
margin-right: calc(var(--bs-spacer) / -2);
3232
}
33+
}
3334

34-
/* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */
35-
.navbar-expand-md.navbar-container {
36-
@media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
37-
> .navbar-inner-container {
38-
padding: 0 var(--bs-spacer);
35+
/* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */
36+
.navbar-expand-md.navbar-container {
37+
@media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
38+
> .navbar-inner-container {
39+
padding: 0 var(--bs-spacer);
40+
a.navbar-brand {
41+
display: none;
42+
}
43+
.navbar-collapsed {
44+
display: none;
3945
}
40-
padding: 0;
4146
}
47+
padding: 0;
4248
}
49+
height: 80px;
50+
}
4351

44-
#main-navbar ::ng-deep {
45-
.ds-menu-item, .ds-menu-toggler-wrapper {
46-
white-space: nowrap;
47-
text-decoration: none;
48-
}
49-
50-
.dropdown-menu {
51-
padding: 0.5rem !important;
52-
}
52+
a.navbar-brand img {
53+
max-height: var(--ds-header-logo-height);
54+
}
5355

54-
.ds-menu-item {
55-
display: block;
56-
color: var(--ds-navbar-link-color);
57-
padding: 0.5rem 0;
56+
.navbar-nav {
57+
::ng-deep a.nav-link {
58+
color: white;
5859

59-
&:hover, &:focus {
60-
color: var(--ds-navbar-link-color-hover);
61-
}
60+
&:hover, &:focus {
61+
background-color: white;
62+
color: var(--lt-zcu-pub-blue);
63+
border-radius: 2px;
64+
transition: background-color 0.2s ease-out;
6265
}
6366
}
6467
}

‎src/themes/custom/app/home-page/home-news/home-news.component.html‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +0,0 @@
1-
<div class="background-image-container mt-ncs">
2-
<div class="container">
3-
<div class="d-flex flex-wrap">
4-
<div>
5-
<img alt="" [src]="'assets/custom/images/hl1_cs.png'"/><!-- without the []="''" Firefox downloads both the fallback and the resolved image -->
6-
</div>
7-
</div>
8-
</div>
9-
</div>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="ds-menu-item-wrapper text-md-center"
1+
<div class="ds-menu-item-wrapper dropdown expandable-navbar-section text-md-center"
22
[id]="'expandable-navbar-section-' + section.id"
33
(mouseenter)="onMouseEnter($event)"
44
(mouseleave)="onMouseLeave($event)"
@@ -13,7 +13,7 @@
1313
data-test="navbar-section-toggler"
1414
[attr.aria-expanded]="(active$ | async).valueOf()"
1515
[attr.aria-controls]="expandableNavbarSectionId()"
16-
class="d-flex flex-row flex-nowrap align-items-center gapx-1 ds-menu-toggler-wrapper"
16+
class="d-flex flex-row flex-nowrap align-items-center gapx-1 ds-menu-toggler-wrapper ds-menu-item"
1717
[class.disabled]="section.model?.disabled">
1818
<span class="flex-fill">
1919
<ng-container

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
}
77

88
.dropdown-menu {
9+
background-color: var(--ds-expandable-navbar-bg);
910
overflow: hidden;
1011
min-width: 100%;
1112
border-top-left-radius: 0;

‎src/themes/custom/app/navbar/navbar.component.html‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
<nav [ngClass]="{'open': !(menuCollapsed | async)}"
22
[@slideMobileNav]="(isMobile$ | async) !== true ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
3-
class="navbar navbar-light navbar-expand-md px-md-0 pt-md-0 pt-3 navbar-container" role="navigation"
3+
class="navbar navbar-expand-md navbar-light p-0 navbar-container" role="navigation"
44
[attr.aria-label]="'nav.main.description' | translate" id="main-navbar">
55
<!-- TODO remove navbar-container class when https://github.com/twbs/bootstrap/issues/24726 is fixed -->
6-
<div class="navbar-inner-container w-100" [class.container]="!(isMobile$ | async)">
6+
<div class="navbar-inner-container w-100 h-100" [class.container]="!(isMobile$ | async)">
7+
<a class="navbar-brand my-2" routerLink="/home">
8+
<img src="assets/images/vsb-cs-logo-w.svg" [attr.alt]="'menu.header.image.logo' | translate" />
9+
</a>
10+
711
<div class="w-100">
812
<div id="collapsingNav">
913
<ng-container *ngIf="(isMobile$ | async) && (isAuthenticated$ | async)">
@@ -17,5 +21,12 @@
1721
</div>
1822
</div>
1923
</div>
24+
<div class="navbar-buttons d-flex align-items-center gapx-1">
25+
<ds-themed-search-navbar class="navbar-collapsed"></ds-themed-search-navbar>
26+
<ds-themed-lang-switch class="navbar-collapsed"></ds-themed-lang-switch>
27+
<ds-context-help-toggle class="navbar-collapsed"></ds-context-help-toggle>
28+
<ds-themed-auth-nav-menu class="navbar-collapsed"></ds-themed-auth-nav-menu>
29+
<ds-impersonate-navbar class="navbar-collapsed"></ds-impersonate-navbar>
30+
</div>
2031
</div>
2132
</nav>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,8 @@ a.navbar-brand img {
5454
}
5555

5656
.navbar-nav {
57-
::ng-deep a.nav-link {
57+
::ng-deep a.ds-menu-item {
58+
width: 100%;
5859
color: white;
5960

6061
&:hover, &:focus {

0 commit comments

Comments
 (0)