hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 18:14:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2617 from DSpace/backport-2594-to-dspace-7_x

Browse Source 
[Port dspace-7_x] Media viewer controls rendered behind DSpace header
This commit is contained in:
Tim Donohue
2023-11-10 06:49:12 -06:00
committed by GitHub
parent 203dcbebda c6ade09e4a
commit 34b91a7dea
16 changed files with 37 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
<ng-container *ngVar="(breadcrumbs$ | async) as breadcrumbs"> <ng-container *ngVar="(breadcrumbs$ | async) as breadcrumbs">
<nav *ngIf="(showBreadcrumbs$ | async)" aria-label="breadcrumb" class="nav-breadcrumb"> <nav *ngIf="(showBreadcrumbs$ | async)" aria-label="breadcrumb" class="nav-breadcrumb">
<ol class="container breadcrumb"> <ol class="container breadcrumb my-0">
<ng-container <ng-container
*ngTemplateOutlet="breadcrumbs?.length > 0 ? breadcrumb : activeBreadcrumb; context: {text: 'home.breadcrumbs', url: '/'}"></ng-container> *ngTemplateOutlet="breadcrumbs?.length > 0 ? breadcrumb : activeBreadcrumb; context: {text: 'home.breadcrumbs', url: '/'}"></ng-container>
<ng-container *ngFor="let bc of breadcrumbs; let last = last;"> <ng-container *ngFor="let bc of breadcrumbs; let last = last;">

5
src/app/breadcrumbs/breadcrumbs.component.scss
View File

@@ -4,9 +4,8 @@
.breadcrumb { .breadcrumb {
border-radius: 0; border-radius: 0;
margin-top: calc(-1 * var(--ds-content-spacing)); padding-bottom: calc(var(--ds-content-spacing) / 2);
padding-bottom: calc(var(--ds-content-spacing) / 3); padding-top: calc(var(--ds-content-spacing) / 2);
padding-top: calc(var(--ds-content-spacing) / 3);
background-color: var(--ds-breadcrumb-bg); background-color: var(--ds-breadcrumb-bg);
} }

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

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

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

@@ -1,4 +1,6 @@
:host { :host {
position: relative; position: relative;
z-index: var(--ds-nav-z-index); div#header-navbar-wrapper {
border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid;
}
} }

2
src/app/home-page/home-news/home-news.component.html
View File

@@ -1,4 +1,4 @@
<div class="jumbotron jumbotron-fluid"> <div class="jumbotron jumbotron-fluid mt-ncs">
<div class="container"> <div class="container">
<div class="d-flex flex-wrap"> <div class="d-flex flex-wrap">
<div> <div>

2
src/app/home-page/home-news/home-news.component.scss
View File

@@ -1,7 +1,5 @@
:host { :host {
display: block; display: block;
margin-top: calc(-1 * var(--ds-content-spacing));
margin-bottom: calc(-1 * var(--ds-content-spacing));
} }
.display-3 { .display-3 {

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

@@ -1,6 +1,5 @@
nav.navbar { nav.navbar {
background-color: var(--ds-navbar-bg); background-color: var(--ds-navbar-bg);
border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid;
align-items: baseline; align-items: baseline;
} }
@@ -12,9 +11,11 @@ nav.navbar {
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
height: 0; height: 0;
z-index: var(--ds-nav-z-index);
&.open { &.open {
height: auto; height: auto;
min-height: 100vh; //doesn't matter because wrapper is sticky min-height: 100vh; //doesn't matter because wrapper is sticky
border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid; // open navbar covers header-navbar-wrapper border
} }
} }
} }

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

@@ -6,8 +6,8 @@
<div class="inner-wrapper"> <div class="inner-wrapper">
<ds-system-wide-alert-banner></ds-system-wide-alert-banner> <ds-system-wide-alert-banner></ds-system-wide-alert-banner>
<ds-themed-header-navbar-wrapper></ds-themed-header-navbar-wrapper> <ds-themed-header-navbar-wrapper></ds-themed-header-navbar-wrapper>
<main class="main-content">
<ds-themed-breadcrumbs></ds-themed-breadcrumbs> <ds-themed-breadcrumbs></ds-themed-breadcrumbs>
<main class="main-content my-cs">
<div class="container d-flex justify-content-center align-items-center h-100" *ngIf="shouldShowRouteLoader"> <div class="container d-flex justify-content-center align-items-center h-100" *ngIf="shouldShowRouteLoader">
<ds-themed-loading [showMessage]="false"></ds-themed-loading> <ds-themed-loading [showMessage]="false"></ds-themed-loading>

2
src/styles/_custom_variables.scss
View File

@@ -1,5 +1,5 @@
:root { :root {
--ds-content-spacing: #{$spacer * 1.5}; --ds-content-spacing: #{$spacer}; // equivalent to Bootstrap spaces of size 3
--ds-button-height: #{$input-btn-padding-y * 2 + $input-btn-line-height + calculateRem($input-btn-border-width*2)}; --ds-button-height: #{$input-btn-padding-y * 2 + $input-btn-line-height + calculateRem($input-btn-border-width*2)};

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

@@ -26,8 +26,6 @@ body {
.main-content { .main-content {
z-index: var(--ds-main-z-index); z-index: var(--ds-main-z-index);
flex: 1 1 100%; flex: 1 1 100%;
margin-top: var(--ds-content-spacing);
margin-bottom: var(--ds-content-spacing);
} }
.alert.hide { .alert.hide {
@@ -317,3 +315,11 @@ ul.dso-edit-menu-dropdown > li .nav-item.nav-link {
padding-top: 0.125rem !important; padding-top: 0.125rem !important;
padding-bottom: 0.125rem !important; padding-bottom: 0.125rem !important;
} }
// Margin utility classes based on DSpace content spacing
.mt-cs { margin-top: var(--ds-content-spacing); }
.mb-cs { margin-bottom: var(--ds-content-spacing); }
.my-cs { margin-top: var(--ds-content-spacing); margin-bottom: var(--ds-content-spacing); }
.mt-ncs { margin-top: calc(var(--ds-content-spacing) * -1); }
.mb-ncs { margin-bottom: calc(var(--ds-content-spacing) * -1); }
.my-ncs { margin-top: calc(var(--ds-content-spacing) * -1); margin-bottom: calc(var(--ds-content-spacing) * -1); }

2
src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.html
View File

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

7
src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
View File

@@ -0,0 +1,7 @@
:host {
// The header-navbar-wrapper should not have a z-index, otherwise it would cover the media viewer despite its higher z-index
position: relative;
div#header-navbar-wrapper {
border-bottom: 5px var(--ds-header-navbar-border-bottom-color) solid;
}
}

2
src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts
View File

@@ -6,7 +6,7 @@ import { HeaderNavbarWrapperComponent as BaseComponent } from '../../../../app/h
*/ */
@Component({ @Component({
selector: 'ds-header-navbar-wrapper', selector: 'ds-header-navbar-wrapper',
styleUrls: ['../../../../app/header-nav-wrapper/header-navbar-wrapper.component.scss'], styleUrls: ['header-navbar-wrapper.component.scss'],
templateUrl: 'header-navbar-wrapper.component.html', templateUrl: 'header-navbar-wrapper.component.html',
}) })
export class HeaderNavbarWrapperComponent extends BaseComponent { export class HeaderNavbarWrapperComponent extends BaseComponent {

2
src/themes/dspace/app/home-page/home-news/home-news.component.html
View File

@@ -1,4 +1,4 @@
<div class="background-image-container"> <div class="background-image-container mt-ncs">
<div class="container"> <div class="container">
<div class="jumbotron jumbotron-fluid"> <div class="jumbotron jumbotron-fluid">
<div class="d-flex flex-wrap"> <div class="d-flex flex-wrap">

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

@@ -1,6 +1,5 @@
:host { :host {
display: block; display: block;
margin-top: calc(var(--ds-content-spacing) * -1);
div.background-image-container { div.background-image-container {
color: white; color: white;

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

@@ -1,7 +1,9 @@
nav.navbar { nav.navbar {
border-top: 1px var(--ds-header-navbar-border-top-color) solid;
border-bottom: 5px var(--ds-header-navbar-border-bottom-color) solid;
align-items: baseline; align-items: baseline;
.navbar-inner-container {
border-top: 1px var(--ds-header-navbar-border-top-color) solid;
}
} }
.navbar-nav { .navbar-nav {
@@ -16,8 +18,10 @@ nav.navbar {
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
height: 0; height: 0;
z-index: var(--ds-nav-z-index);
&.open { &.open {
height: 100vh; //doesn't matter because wrapper is sticky height: 100vh; //doesn't matter because wrapper is sticky
border-bottom: 5px var(--ds-header-navbar-border-bottom-color) solid; // open navbar covers header-navbar-wrapper border
} }
} }
} }