From a3e6d9b09a2d6e529dc28f7d1a1924b2830077e6 Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Mon, 30 Oct 2023 18:27:00 +0100
Subject: [PATCH 1/3] [DURACOM-195] Simplify vertical spacing in header and
 breadcrumbs

---
 src/app/breadcrumbs/breadcrumbs.component.html         |  2 +-
 src/app/breadcrumbs/breadcrumbs.component.scss         |  5 ++---
 src/app/home-page/home-news/home-news.component.html   |  2 +-
 src/app/home-page/home-news/home-news.component.scss   |  2 --
 src/app/root/root.component.html                       |  4 ++--
 src/styles/_custom_variables.scss                      |  2 +-
 src/styles/_global-styles.scss                         | 10 ++++++++--
 .../app/home-page/home-news/home-news.component.html   |  2 +-
 .../app/home-page/home-news/home-news.component.scss   |  1 -
 9 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/app/breadcrumbs/breadcrumbs.component.html b/src/app/breadcrumbs/breadcrumbs.component.html
index bff792eeff..3bba89622f 100644
--- a/src/app/breadcrumbs/breadcrumbs.component.html
+++ b/src/app/breadcrumbs/breadcrumbs.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngVar="(breadcrumbs$ | async) as breadcrumbs">
     <nav *ngIf="(showBreadcrumbs$ | async)" aria-label="breadcrumb" class="nav-breadcrumb">
-        <ol class="container breadcrumb">
+        <ol class="container breadcrumb my-0">
             <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;">
diff --git a/src/app/breadcrumbs/breadcrumbs.component.scss b/src/app/breadcrumbs/breadcrumbs.component.scss
index 52634f2a5b..ac9cb42ce5 100644
--- a/src/app/breadcrumbs/breadcrumbs.component.scss
+++ b/src/app/breadcrumbs/breadcrumbs.component.scss
@@ -4,9 +4,8 @@
 
 .breadcrumb {
   border-radius: 0;
-  margin-top: calc(-1 * var(--ds-content-spacing));
-  padding-bottom: calc(var(--ds-content-spacing) / 3);
-  padding-top: calc(var(--ds-content-spacing) / 3);
+  padding-bottom: calc(var(--ds-content-spacing) / 2);
+  padding-top: calc(var(--ds-content-spacing) / 2);
   background-color: var(--ds-breadcrumb-bg);
 }
 
diff --git a/src/app/home-page/home-news/home-news.component.html b/src/app/home-page/home-news/home-news.component.html
index 6bee3cd76f..8d3f99b60d 100644
--- a/src/app/home-page/home-news/home-news.component.html
+++ b/src/app/home-page/home-news/home-news.component.html
@@ -1,4 +1,4 @@
-<div class="jumbotron jumbotron-fluid">
+<div class="jumbotron jumbotron-fluid mt-ncs">
   <div class="container">
     <div class="d-flex flex-wrap">
       <div>
diff --git a/src/app/home-page/home-news/home-news.component.scss b/src/app/home-page/home-news/home-news.component.scss
index 9ab24daa25..911a2fafc5 100644
--- a/src/app/home-page/home-news/home-news.component.scss
+++ b/src/app/home-page/home-news/home-news.component.scss
@@ -1,7 +1,5 @@
 :host {
     display: block;
-    margin-top: calc(-1 * var(--ds-content-spacing));
-    margin-bottom: calc(-1 * var(--ds-content-spacing));
 }
 
 .display-3 {
diff --git a/src/app/root/root.component.html b/src/app/root/root.component.html
index bf49e507c0..ef8e33704f 100644
--- a/src/app/root/root.component.html
+++ b/src/app/root/root.component.html
@@ -6,8 +6,8 @@
   <div class="inner-wrapper">
     <ds-system-wide-alert-banner></ds-system-wide-alert-banner>
     <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">
         <ds-themed-loading [showMessage]="false"></ds-themed-loading>
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index 778ef6e9e3..ad9a074e1b 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -1,5 +1,5 @@
 :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)};
 
diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss
index 81d4fe0787..57a8455a19 100644
--- a/src/styles/_global-styles.scss
+++ b/src/styles/_global-styles.scss
@@ -26,8 +26,6 @@ body {
 .main-content {
     z-index: var(--ds-main-z-index);
     flex: 1 1 100%;
-    margin-top: var(--ds-content-spacing);
-    margin-bottom: var(--ds-content-spacing);
 }
 
 .alert.hide {
@@ -317,3 +315,11 @@ ul.dso-edit-menu-dropdown > li .nav-item.nav-link {
   padding-top: 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); }
diff --git a/src/themes/dspace/app/home-page/home-news/home-news.component.html b/src/themes/dspace/app/home-page/home-news/home-news.component.html
index ef576ed99c..29711c1bf6 100644
--- a/src/themes/dspace/app/home-page/home-news/home-news.component.html
+++ b/src/themes/dspace/app/home-page/home-news/home-news.component.html
@@ -1,4 +1,4 @@
-<div class="background-image-container">
+<div class="background-image-container mt-ncs">
   <div class="container">
     <div class="jumbotron jumbotron-fluid">
       <div class="d-flex flex-wrap">
diff --git a/src/themes/dspace/app/home-page/home-news/home-news.component.scss b/src/themes/dspace/app/home-page/home-news/home-news.component.scss
index 93ec1763f3..3c3aa8b445 100644
--- a/src/themes/dspace/app/home-page/home-news/home-news.component.scss
+++ b/src/themes/dspace/app/home-page/home-news/home-news.component.scss
@@ -1,6 +1,5 @@
 :host {
   display: block;
-  margin-top: calc(var(--ds-content-spacing) * -1);
 
   div.background-image-container {
     color: white;

From 0208a784378bf3f6226e6d9020523ae0fd38f9b4 Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Tue, 31 Oct 2023 15:32:41 +0100
Subject: [PATCH 2/3] [DURACOM-180] Prevent header from covering media viewer
 controls (dspace theme)

---
 .../header-navbar-wrapper.component.html                  | 2 +-
 .../header-navbar-wrapper.component.scss                  | 7 +++++++
 .../header-nav-wrapper/header-navbar-wrapper.component.ts | 2 +-
 src/themes/dspace/app/navbar/navbar.component.scss        | 8 ++++++--
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.html b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.html
index 091d152258..8c10efcb42 100644
--- a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.html
+++ b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.html
@@ -1,3 +1,3 @@
-<div [ngClass]="{'open': !(isNavBarCollapsed | async)}">
+<div [class.open]="!(isNavBarCollapsed | async)" id="header-navbar-wrapper">
   <ds-themed-header></ds-themed-header>
 </div>
diff --git a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
index e69de29bb2..1daf4ebdbc 100644
--- a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
+++ b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
@@ -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;
+  }
+}
diff --git a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts
index 57ade022ae..36e23e174a 100644
--- a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts
+++ b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts
@@ -6,7 +6,7 @@ import { HeaderNavbarWrapperComponent as BaseComponent } from '../../../../app/h
  */
 @Component({
   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',
 })
 export class HeaderNavbarWrapperComponent extends BaseComponent {
diff --git a/src/themes/dspace/app/navbar/navbar.component.scss b/src/themes/dspace/app/navbar/navbar.component.scss
index 300d1f419a..28ead2f1de 100644
--- a/src/themes/dspace/app/navbar/navbar.component.scss
+++ b/src/themes/dspace/app/navbar/navbar.component.scss
@@ -1,7 +1,9 @@
 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;
+
+  .navbar-inner-container {
+    border-top: 1px var(--ds-header-navbar-border-top-color) solid;
+  }
 }
 
 .navbar-nav {
@@ -16,8 +18,10 @@ nav.navbar {
     position: absolute;
     overflow: hidden;
     height: 0;
+    z-index: var(--ds-nav-z-index);
     &.open {
       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
     }
   }
 }

From c042cd8d1154af59310b162c9a97e7d3820a1592 Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Thu, 9 Nov 2023 15:24:22 +0100
Subject: [PATCH 3/3] [DURACOM-180] Prevent header from covering media viewer
 controls (base theme)

---
 .../header-nav-wrapper/header-navbar-wrapper.component.html   | 2 +-
 .../header-nav-wrapper/header-navbar-wrapper.component.scss   | 4 +++-
 src/app/navbar/navbar.component.scss                          | 3 ++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/app/header-nav-wrapper/header-navbar-wrapper.component.html b/src/app/header-nav-wrapper/header-navbar-wrapper.component.html
index f99070b738..5756ad32b0 100644
--- a/src/app/header-nav-wrapper/header-navbar-wrapper.component.html
+++ b/src/app/header-nav-wrapper/header-navbar-wrapper.component.html
@@ -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-navbar></ds-themed-navbar>
 </div>
diff --git a/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss b/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
index b02b3c378c..c1bc9c7e90 100644
--- a/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
+++ b/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
@@ -1,4 +1,6 @@
 :host {
   position: relative;
-  z-index: var(--ds-nav-z-index);
+  div#header-navbar-wrapper {
+    border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid;
+  }
 }
diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss
index 42e72aaffd..dac8c0927f 100644
--- a/src/app/navbar/navbar.component.scss
+++ b/src/app/navbar/navbar.component.scss
@@ -1,6 +1,5 @@
 nav.navbar {
     background-color: var(--ds-navbar-bg);
-    border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid;
     align-items: baseline;
 }
 
@@ -12,9 +11,11 @@ nav.navbar {
         position: absolute;
         overflow: hidden;
         height: 0;
+        z-index: var(--ds-nav-z-index);
         &.open {
           height: auto;
           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
         }
     }
 }