[DURACOM-195] Simplify vertical spacing in header and breadcrumbs

DSpace · Nov 9, 2023 · a3e6d9b · a3e6d9b
1 parent 3cb623d
commit a3e6d9b
Show file tree

Hide file tree

Showing 9 changed files with 16 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,6 +1,5 @@
 :host {
   display: block;
-  margin-top: calc(var(--ds-content-spacing) * -1);
 
   div.background-image-container {
     color: white;