hazza/yel-dspace-angular
1
0
Fork 0
forked from hazza/dspace-angular
Code Pull Requests Activity

Merge pull request #1221 from atmire/move-header-changes-to-dspace-theme

Browse Source 
Move header changes to dspace theme
This commit is contained in:
Tim Donohue
2021-06-22 09:15:22 -05:00
committed by GitHub
parent e546a4f0b5 b556234207
commit 3d4f493f9f
37 changed files with 381 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
e2e/protractor.conf.js
View File

@@ -69,7 +69,6 @@ exports.config = {
plugins: [{
path: '../node_modules/protractor-istanbul-plugin'
}],
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
@@ -85,7 +84,7 @@ exports.config = {
onPrepare: function () {
jasmine.getEnv().addReporter(new SpecReporter({
spec: {
displayStacktrace: true
displayStacktrace: 'pretty'
}
}));
}

1
src/app/+home-page/home-page-routing.module.ts
View File

@@ -20,6 +20,7 @@ import { ThemedHomePageComponent } from './themed-home-page.component';
id: 'statistics_site',
active: true,
visible: true,
index: 2,
model: {
type: MenuItemType.LINK,
text: 'menu.section.statistics',

2
src/app/app.module.ts
View File

@@ -46,6 +46,7 @@ import { ThemedForbiddenComponent } from './forbidden/themed-forbidden.component
import { ThemedHeaderComponent } from './header/themed-header.component';
import { ThemedFooterComponent } from './footer/themed-footer.component';
import { ThemedBreadcrumbsComponent } from './breadcrumbs/themed-breadcrumbs.component';
import { ThemedHeaderNavbarWrapperComponent } from './header-nav-wrapper/themed-header-navbar-wrapper.component';
export function getBase() {
return environment.ui.nameSpace;
@@ -129,6 +130,7 @@ const DECLARATIONS = [
HeaderComponent,
ThemedHeaderComponent,
HeaderNavbarWrapperComponent,
ThemedHeaderNavbarWrapperComponent,
AdminSidebarComponent,
AdminSidebarSectionComponent,
ExpandableAdminSidebarSectionComponent,

23
src/app/footer/footer.component.html
View File

@@ -1,6 +1,7 @@
<footer class="top-footer text-lg-start">
<footer class="text-lg-start">
<div *ngIf="showTopFooter" class="top-footer">
<!-- Grid container -->
<div *ngIf="showTopFooter" class="container p-4">
<div class=" container p-4">
<!--Grid row-->
<div class="row">
@@ -48,25 +49,31 @@
</div>
<!--Grid row-->
</div>
</div>
<!-- Grid container -->
<!-- Copyright -->
<div class="footer p-1 d-flex justify-content-center align-items-center text-white">
<div class="bottom-footer p-1 d-flex justify-content-center align-items-center text-white">
<div class="content-container">
<p class="m-0">
<a class="text-white" href="http://www.dspace.org/">{{ 'footer.link.dspace' | translate}}</a>
<a class="text-white"
href="http://www.dspace.org/">{{ 'footer.link.dspace' | translate}}</a>
{{ 'footer.copyright' | translate:{year: dateObj | date:'y'} }}
<a class="text-white" href="https://www.lyrasis.org/">{{ 'footer.link.lyrasis' | translate}}</a>
<a class="text-white"
href="https://www.lyrasis.org/">{{ 'footer.link.lyrasis' | translate}}</a>
</p>
<ul class="footer-info list-unstyled small d-flex justify-content-center mb-0">
<li>
<a class="text-white" href="#" (click)="showCookieSettings()">{{ 'footer.link.cookies' | translate}}</a>
<a class="text-white" href="#"
(click)="showCookieSettings()">{{ 'footer.link.cookies' | translate}}</a>
</li>
<li>
<a class="text-white" routerLink="info/privacy">{{ 'footer.link.privacy-policy' | translate}}</a>
<a class="text-white"
routerLink="info/privacy">{{ 'footer.link.privacy-policy' | translate}}</a>
</li>
<li>
<a class="text-white" routerLink="info/end-user-agreement">{{ 'footer.link.end-user-agreement' | translate}}</a>
<a class="text-white"
routerLink="info/end-user-agreement">{{ 'footer.link.end-user-agreement' | translate}}</a>
</li>
</ul>
</div>

19
src/app/footer/footer.component.scss
View File

@@ -1,11 +1,10 @@
:host {
.top-footer {
background-color: var(--ds-top-footer-bg);
border-top: var(--ds-footer-border);
footer {
background-color: var(--ds-footer-bg);
text-align: center;
padding: var(--ds-footer-padding);
z-index: var(--ds-footer-z-index);
border-top: var(--ds-footer-border);
padding: var(--ds-footer-padding);
p {
margin: 0;
@@ -15,12 +14,18 @@
height: var(--ds-footer-logo-height);
}
.footer {
background-color: var(--ds-footer-bg);
.top-footer {
background-color: var(--ds-top-footer-bg);
padding: var(--ds-footer-padding);
margin: calc(var(--ds-footer-padding) * -1);
}
.bottom-footer {
ul {
li {
display: inline-flex;
a {
padding: 0 calc(var(--bs-spacer) / 2);
color: inherit

1
src/app/header-nav-wrapper/header-navbar-wrapper.component.html
View File

@@ -1,3 +1,4 @@
<div [ngClass]="{'open': !(isNavBarCollapsed | async)}">
<ds-themed-header></ds-themed-header>
<ds-themed-navbar></ds-themed-navbar>
</div>

4
src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
View File

@@ -5,7 +5,3 @@
position: sticky;
}
}
:host {
z-index: var(--ds-nav-z-index);
}

3
src/app/header-nav-wrapper/themed-header-navbar-wrapper.component.scss Normal file
View File

@@ -0,0 +1,3 @@
:host {
z-index: var(--ds-nav-z-index);
}

25
src/app/header-nav-wrapper/themed-header-navbar-wrapper.component.ts Normal file
View File

@@ -0,0 +1,25 @@
import { Component } from '@angular/core';
import { ThemedComponent } from '../shared/theme-support/themed.component';
import { HeaderNavbarWrapperComponent } from './header-navbar-wrapper.component';
/**
* Themed wrapper for BreadcrumbsComponent
*/
@Component({
selector: 'ds-themed-header-navbar-wrapper',
styleUrls: ['./themed-header-navbar-wrapper.component.scss'],
templateUrl: '../shared/theme-support/themed.component.html',
})
export class ThemedHeaderNavbarWrapperComponent extends ThemedComponent<HeaderNavbarWrapperComponent> {
protected getComponentName(): string {
return 'HeaderNavbarWrapperComponent';
}
protected importThemedComponent(themeName: string): Promise<any> {
return import(`../../themes/${themeName}/app/header-nav-wrapper/header-navbar-wrapper.component`);
}
protected importUnthemedComponent(): Promise<any> {
return import(`./header-navbar-wrapper.component`);
}
}

23
src/app/header/header.component.html
View File

@@ -1,24 +1,23 @@
<header class="header">
<nav role="navigation" [attr.aria-label]="'nav.user.description' |translate" class="container navbar navbar-expand-md px-0">
<div class="d-flex flex-grow-1">
<a class="navbar-brand m-2" routerLink="/home">
<img src="assets/images/dspace-logo.svg" alt="logo"/>
<header>
<div class="container">
<div class="d-flex flex-row justify-content-between">
<a class="navbar-brand my-2" routerLink="/home">
<img src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate"/>
</a>
</div>
<div class="d-flex flex-grow-1 ml-auto justify-content-end align-items-center">
<ds-search-navbar class="navbar-search"></ds-search-navbar>
<nav role="navigation" [attr.aria-label]="'nav.user.description' | translate" class="navbar navbar-light navbar-expand-md flex-shrink-0 px-0">
<ds-search-navbar></ds-search-navbar>
<ds-lang-switch></ds-lang-switch>
<ds-auth-nav-menu></ds-auth-nav-menu>
<ds-impersonate-navbar></ds-impersonate-navbar>
<div class="pl-2">
<button class="navbar-toggler" type="button" (click)="toggleNavbar()"
aria-controls="collapsingNav"
aria-expanded="false" aria-label="Toggle navigation">
aria-expanded="false" [attr.aria-label]="'nav.toggle' | translate">
<span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
</button>
</div>
</div>
</nav>
<ds-themed-navbar></ds-themed-navbar>
</div>
</div>
</header>

28
src/app/header/header.component.scss
View File

@@ -1,19 +1,23 @@
@media screen and (min-width: map-get($grid-breakpoints, md)) {
nav.navbar {
display: none;
}
.header {
background-color: var(--ds-header-bg);
.navbar-brand img {
max-height: var(--ds-header-logo-height);
max-width: 100%;
@media screen and (max-width: map-get($grid-breakpoints, sm)) {
max-height: var(--ds-header-logo-height-xs);
}
}
.navbar-brand img {
@media screen and (max-width: map-get($grid-breakpoints, md)) {
height: var(--ds-header-logo-height-xs);
}
}
.navbar-toggler .navbar-toggler-icon {
background-image: none !important;
line-height: 1.5;
color: var(--bs-link-color);
}
.navbar ::ng-deep {
a {
color: var(--ds-header-icon-color);
&:hover, &focus {
color: var(--ds-header-icon-color-hover);
}
}
}

2
src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
View File

@@ -1,4 +1,4 @@
<li class="nav-item dropdown h-100 d-flex flex-column justify-content-center"
<li class="nav-item dropdown"
(mouseenter)="activateSection($event)"
(mouseleave)="deactivateSection($event)">
<a href="#" class="nav-link dropdown-toggle" routerLinkActive="active"

2
src/app/navbar/navbar-section/navbar-section.component.html
View File

@@ -1,4 +1,4 @@
<li class="nav-item h-100 d-flex flex-column justify-content-center">
<li class="nav-item">
<ng-container
*ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
</li>

20
src/app/navbar/navbar.component.html
View File

@@ -1,24 +1,18 @@
<nav [ngClass]="{'open': !(menuCollapsed | async)}"
[@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
class="navbar navbar-expand-md navbar-light p-0 navbar-container"
role="navigation" role="navigation" [attr.aria-label]="'nav.main.description' |translate">
<div class="container h-100">
<a class="navbar-brand my-2" routerLink="/home">
<img src="assets/images/dspace-logo.svg" alt="logo"/>
</a>
<div id="collapsingNav" class="w-100 h-100">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 h-100">
class="navbar navbar-light navbar-expand-md p-md-0 navbar-container"
role="navigation" [attr.aria-label]="'nav.main.description' | translate"> <!-- TODO remove navbar-container class when https://github.com/twbs/bootstrap/issues/24726 is fixed -->
<div class="container">
<div class="reset-padding-md w-100">
<div id="collapsingNav">
<ul class="navbar-nav mr-auto shadow-none">
<ng-container *ngFor="let section of (sections | async)">
<ng-container
*ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
</ng-container>
</ul>
</div>
<ds-search-navbar class="navbar-collapsed"></ds-search-navbar>
<ds-lang-switch class="navbar-collapsed"></ds-lang-switch>
<ds-auth-nav-menu class="navbar-collapsed"></ds-auth-nav-menu>
<ds-impersonate-navbar class="navbar-collapsed"></ds-impersonate-navbar>
</div>
</div>
</nav>

17
src/app/navbar/navbar.component.scss
View File

@@ -1,14 +1,12 @@
nav.navbar {
border-top: 1px var(--ds-header-navbar-border-top-color) solid;
border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid;
border-bottom: 1px var(--bs-gray-400) solid;
align-items: baseline;
color: var(--ds-header-icon-color);
}
/** Mobile menu styling **/
@media screen and (max-width: map-get($grid-breakpoints, md)) {
.navbar {
width: 100%;
width: 100vw;
background-color: var(--bs-white);
position: absolute;
overflow: hidden;
@@ -31,20 +29,9 @@ nav.navbar {
@media screen and (max-width: map-get($grid-breakpoints, md)) {
> .container {
padding: 0 var(--bs-spacer);
a.navbar-brand {
display: none;
}
.navbar-collapsed {
display: none;
}
}
padding: 0;
}
height: 80px;
}
a.navbar-brand img {
max-height: var(--ds-header-logo-height);
}
.navbar-nav {

3
src/app/navbar/navbar.component.ts
View File

@@ -46,6 +46,7 @@ export class NavbarComponent extends MenuComponent {
id: `browse_global_communities_and_collections`,
active: false,
visible: true,
index: 0,
model: {
type: MenuItemType.LINK,
text: `menu.section.browse_global_communities_and_collections`,
@@ -57,11 +58,11 @@ export class NavbarComponent extends MenuComponent {
id: 'browse_global',
active: false,
visible: true,
index: 1,
model: {
type: MenuItemType.TEXT,
text: 'menu.section.browse_global'
} as TextMenuItemModel,
index: 0
},
];
// Read the different Browse-By types from config and add them to the browse menu

2
src/app/root/root.component.html
View File

@@ -4,7 +4,7 @@
value: (!(sidebarVisible | async) ? 'hidden' : (slideSidebarOver | async) ? 'shown' : 'expanded'),
params: {collapsedSidebarWidth: (collapsedSidebarWidth | async), totalSidebarWidth: (totalSidebarWidth | async)}
}">
<ds-header-navbar-wrapper></ds-header-navbar-wrapper>
<ds-themed-header-navbar-wrapper></ds-themed-header-navbar-wrapper>
<ds-notifications-board
[options]="notificationOptions">

2
src/assets/i18n/en.json5
View File

@@ -2353,6 +2353,8 @@
"nav.stop-impersonating": "Stop impersonating EPerson",
"nav.toggle" : "Toggle navigation",
"nav.user.description" : "User profile bar",

12
src/styles/_custom_variables.scss
View File

@@ -20,7 +20,7 @@
--ds-sidebar-z-index: 20;
--ds-header-bg: #{$white};
--ds-header-logo-height: 40px;
--ds-header-logo-height: 50px;
--ds-header-logo-height-xs: 50px;
--ds-header-icon-color: #{$cyan};
--ds-header-icon-color-hover: #{darken($white, 15%)};
@@ -61,12 +61,12 @@
--ds-sidebar-items-width: #{$sidebar-items-width};
--ds-total-sidebar-width: #{$total-sidebar-width};
--ds-top-footer-bg: #{$gray-200} !important;
--ds-footer-bg: #{theme-color('primary')} !important;
--ds-top-footer-bg: #{$gray-200};
--ds-footer-bg: #{theme-color('primary')};
--ds-footer-border: 1px solid var(--bs-gray-400);
--ds-footer-padding: 0 !important;
--ds-footer-padding-bottom: 0 !important;
--ds-footer-logo-height: 50px !important;
--ds-footer-padding: 0;
--ds-footer-padding-bottom: 0;
--ds-footer-logo-height: 50px;
$home-news-link-color: $cyan;
--ds-home-news-link-color: #{$home-news-link-color};

0
src/themes/custom/app/header-nav-wrapper/header-navbar-wrapper.component.html Normal file
View File

0
src/themes/custom/app/header-nav-wrapper/header-navbar-wrapper.component.scss Normal file
View File

15
src/themes/custom/app/header-nav-wrapper/header-navbar-wrapper.component.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Component } from '@angular/core';
import { HeaderNavbarWrapperComponent as BaseComponent } from '../../../../app/header-nav-wrapper/header-navbar-wrapper.component';
/**
* This component represents a wrapper for the horizontal navbar and the header
*/
@Component({
selector: 'ds-header-navbar-wrapper',
// styleUrls: ['header-navbar-wrapper.component.scss'],
styleUrls: ['../../../../app/header-nav-wrapper/header-navbar-wrapper.component.scss'],
// templateUrl: 'header-navbar-wrapper.component.html',
templateUrl: '../../../../app/header-nav-wrapper/header-navbar-wrapper.component.html',
})
export class HeaderNavbarWrapperComponent extends BaseComponent {
}

39
src/themes/custom/styles/_theme_sass_variable_overrides.scss
View File

@@ -3,14 +3,31 @@
// still uses Sass variables internally. So if you want to override bootstrap (or other sass
// variables) you can do so here. Their CSS counterparts will include the changes you make here
// $blue: #007bff !default;
// $indigo: #6610f2 !default;
// $purple: #6f42c1 !default;
// $pink: #e83e8c !default;
// $red: #dc3545 !default;
// $orange: #fd7e14 !default;
// $yellow: #ffc107 !default;
// $green: #28a745 !default;
// $teal: #20c997 !default;
// $cyan: #17a2b8 !default;
// $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
//
// $gray-base: #000 !default;
// $gray-900: lighten($gray-base, 13.5%) !default; // #222
// $gray-800: lighten($gray-base, 26.6%) !default; // #444
// $gray-700: lighten($gray-base, 46.6%) !default; // #777
// $gray-600: lighten($gray-base, 73.3%) !default; // #bbb
// $gray-100: lighten($gray-base, 93.5%) !default; // #eee
//
// $blue: #2B4E72 !default;
// $green: #94BA65 !default;
// $cyan: #006666 !default;
// $yellow: #ec9433 !default;
// $red: #CF4444 !default;
// $dark: darken($blue, 17%) !default;
//
// $theme-colors: (
// primary: $blue,
// secondary: $gray-700,
// success: $green,
// info: $cyan,
// warning: $yellow,
// danger: $red,
// light: $gray-100,
// dark: $dark
// ) !default;
//
// $link-color: map-get($theme-colors, info) !default;

2
src/themes/custom/theme.module.ts
View File

@@ -78,6 +78,7 @@ import { NavbarComponent } from './app/navbar/navbar.component';
import { HeaderComponent } from './app/header/header.component';
import { FooterComponent } from './app/footer/footer.component';
import { BreadcrumbsComponent } from './app/breadcrumbs/breadcrumbs.component';
import { HeaderNavbarWrapperComponent } from './app/header-nav-wrapper/header-navbar-wrapper.component';
const DECLARATIONS = [
HomePageComponent,
@@ -117,6 +118,7 @@ const DECLARATIONS = [
FooterComponent,
HeaderComponent,
NavbarComponent,
HeaderNavbarWrapperComponent,
BreadcrumbsComponent
];

4
src/themes/dspace/app/+home-page/home-news/home-news.component.scss
View File

@@ -6,12 +6,8 @@
color: white;
background-color: var(--bs-info);
position: relative;
background-position-y: -200px;
background-image: url('/assets/dspace/images/banner.jpg');
background-size: cover;
@media screen and (max-width: map-get($grid-breakpoints, lg)) {
background-position-y: 0;
}
.container {
position: relative;

3
src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.html Normal file
View File

@@ -0,0 +1,3 @@
<div [ngClass]="{'open': !(isNavBarCollapsed | async)}">
<ds-themed-header></ds-themed-header>
</div>

0
src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss Normal file
View File

13
src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts Normal file
View File

@@ -0,0 +1,13 @@
import { Component } from '@angular/core';
import { HeaderNavbarWrapperComponent as BaseComponent } from '../../../../app/header-nav-wrapper/header-navbar-wrapper.component';
/**
* This component represents a wrapper for the horizontal navbar and the header
*/
@Component({
selector: 'ds-header-navbar-wrapper',
styleUrls: ['header-navbar-wrapper.component.scss'],
templateUrl: 'header-navbar-wrapper.component.html',
})
export class HeaderNavbarWrapperComponent extends BaseComponent {
}

24
src/themes/dspace/app/header/header.component.html Normal file
View File

@@ -0,0 +1,24 @@
<header class="header">
<nav role="navigation" [attr.aria-label]="'nav.user.description' | translate" class="container navbar navbar-expand-md px-0">
<div class="d-flex flex-grow-1">
<a class="navbar-brand m-2" routerLink="/home">
<img src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate"/>
</a>
</div>
<div class="d-flex flex-grow-1 ml-auto justify-content-end align-items-center">
<ds-search-navbar class="navbar-search"></ds-search-navbar>
<ds-lang-switch></ds-lang-switch>
<ds-auth-nav-menu></ds-auth-nav-menu>
<ds-impersonate-navbar></ds-impersonate-navbar>
<div class="pl-2">
<button class="navbar-toggler" type="button" (click)="toggleNavbar()"
aria-controls="collapsingNav"
aria-expanded="false" [attr.aria-label]="'nav.toggle' | translate">
<span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
</button>
</div>
</div>
</nav>
<ds-themed-navbar></ds-themed-navbar>
</header>

19
src/themes/dspace/app/header/header.component.scss Normal file
View File

@@ -0,0 +1,19 @@
@media screen and (min-width: map-get($grid-breakpoints, md)) {
nav.navbar {
display: none;
}
.header {
background-color: var(--ds-header-bg);
}
}
.navbar-brand img {
@media screen and (max-width: map-get($grid-breakpoints, md)) {
height: var(--ds-header-logo-height-xs);
}
}
.navbar-toggler .navbar-toggler-icon {
background-image: none !important;
line-height: 1.5;
color: var(--bs-link-color);
}

13
src/themes/dspace/app/header/header.component.ts Normal file
View File

@@ -0,0 +1,13 @@
import { Component } from '@angular/core';
import { HeaderComponent as BaseComponent } from '../../../../app/header/header.component';
/**
* Represents the header with the logo and simple navigation
*/
@Component({
selector: 'ds-header',
styleUrls: ['header.component.scss'],
templateUrl: 'header.component.html',
})
export class HeaderComponent extends BaseComponent {
}

24
src/themes/dspace/app/navbar/navbar.component.html Normal file
View File

@@ -0,0 +1,24 @@
<nav [ngClass]="{'open': !(menuCollapsed | async)}"
[@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
class="navbar navbar-expand-md navbar-light p-0 navbar-container"
role="navigation" [attr.aria-label]="'nav.main.description' | translate">
<div class="container h-100">
<a class="navbar-brand my-2" routerLink="/home">
<img src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate"/>
</a>
<div id="collapsingNav" class="w-100 h-100">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 h-100">
<ng-container *ngFor="let section of (sections | async)">
<ng-container
*ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
</ng-container>
</ul>
</div>
<ds-search-navbar class="navbar-collapsed"></ds-search-navbar>
<ds-lang-switch class="navbar-collapsed"></ds-lang-switch>
<ds-auth-nav-menu class="navbar-collapsed"></ds-auth-nav-menu>
<ds-impersonate-navbar class="navbar-collapsed"></ds-impersonate-navbar>
</div>
</nav>

56
src/themes/dspace/app/navbar/navbar.component.scss
View File

@@ -1,5 +1,57 @@
@import 'src/app/navbar/navbar.component.scss';
nav.navbar {
border-top: 1px var(--ds-header-navbar-border-top-color) solid;
border-bottom: 5px var(--bs-green) solid;
align-items: baseline;
color: var(--ds-header-icon-color);
}
/** Mobile menu styling **/
@media screen and (max-width: map-get($grid-breakpoints, md)) {
.navbar {
width: 100%;
background-color: var(--bs-white);
position: absolute;
overflow: hidden;
height: 0;
&.open {
height: 100vh; //doesn't matter because wrapper is sticky
}
}
}
@media screen and (min-width: map-get($grid-breakpoints, md)) {
.reset-padding-md {
margin-left: calc(var(--bs-spacer) / -2);
margin-right: calc(var(--bs-spacer) / -2);
}
}
/* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */
.navbar-expand-md.navbar-container {
@media screen and (max-width: map-get($grid-breakpoints, md)) {
> .container {
padding: 0 var(--bs-spacer);
a.navbar-brand {
display: none;
}
.navbar-collapsed {
display: none;
}
}
padding: 0;
}
height: 80px;
}
a.navbar-brand img {
max-height: var(--ds-header-logo-height);
}
.navbar-nav {
::ng-deep a.nav-link {
color: var(--ds-navbar-link-color);
}
::ng-deep a.nav-link:hover {
color: var(--ds-navbar-link-color-hover);
}
}

2
src/themes/dspace/app/navbar/navbar.component.ts
View File

@@ -8,7 +8,7 @@ import { slideMobileNav } from '../../../../app/shared/animations/slide';
@Component({
selector: 'ds-navbar',
styleUrls: ['./navbar.component.scss'],
templateUrl: '../../../../app/navbar/navbar.component.html',
templateUrl: './navbar.component.html',
animations: [slideMobileNav]
})
export class NavbarComponent extends BaseComponent {

10
src/themes/dspace/styles/_global-styles.scss
View File

@@ -21,3 +21,13 @@
font-size: 1.1rem
}
}
header {
ds-navbar-section > li,
ds-expandable-navbar-section > li {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
}

1
src/themes/dspace/styles/_theme_css_variable_overrides.scss
View File

@@ -1,6 +1,7 @@
// Override or add CSS variables for your theme here
:root {
--ds-header-logo-height: 40px;
--ds-banner-text-background: rgba(0, 0, 0, 0.45);
--ds-banner-background-gradient-width: 300px;
--ds-home-news-link-color: #{$green};

4
src/themes/dspace/theme.module.ts
View File

@@ -41,9 +41,13 @@ import { CollectionPageModule } from '../../app/+collection-page/collection-page
import { SubmissionModule } from '../../app/submission/submission.module';
import { MyDSpacePageModule } from '../../app/+my-dspace-page/my-dspace-page.module';
import { NavbarComponent } from './app/navbar/navbar.component';
import { HeaderComponent } from './app/header/header.component';
import { HeaderNavbarWrapperComponent } from './app/header-nav-wrapper/header-navbar-wrapper.component';
const DECLARATIONS = [
HomeNewsComponent,
HeaderComponent,
HeaderNavbarWrapperComponent,
NavbarComponent
];