From 9518f70b4237c475456e15b6a09a4ef3e3cee710 Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Fri, 2 Feb 2024 13:41:02 +0100
Subject: [PATCH] [DURACOM-195] misc fixes

(cherry picked from commit 87d3383bbaff352cd976d661d56f90d94f8f76a4)
---
 .../admin-sidebar.component.scss              | 16 ++++++++--------
 ...dable-admin-sidebar-section.component.scss |  2 +-
 src/app/header/header.component.html          |  2 +-
 src/app/header/header.component.scss          | 11 ++++++-----
 src/app/navbar/navbar.component.scss          |  2 +-
 .../user-menu/user-menu.component.scss        |  2 +-
 src/styles/_custom_variables.scss             | 19 +++++++++++++++++--
 .../header-navbar-wrapper.component.scss      | 17 ++++++++++-------
 .../dspace/app/header/header.component.html   |  2 +-
 .../dspace/app/header/header.component.scss   |  2 +-
 .../styles/_theme_css_variable_overrides.scss |  6 +++---
 11 files changed, 50 insertions(+), 31 deletions(-)

diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.scss b/src/app/admin/admin-sidebar/admin-sidebar.component.scss
index c2f3279a8e..d3607ca625 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.scss
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.scss
@@ -35,7 +35,7 @@
     }
 
     img#admin-sidebar-logo {
-      width: 20px;
+      height: var(--ds-admin-sidebar-logo-height);
     }
 
     ::ng-deep {
@@ -43,17 +43,17 @@
       // This class must be applied to any nested wrapper containing a sidebar section
       .sidebar-full-width-container {
         width: 100%;
-        padding-left: 0 !important;
-        padding-right: 0 !important;
-        margin-left: 0 !important;
-        margin-right: 0 !important;
+        padding-left: 0;
+        padding-right: 0;
+        margin-left: 0;
+        margin-right: 0;
       }
 
       // This class must be applied to the innermost block element containing a section or subsection link
       // (it can be applied together with `sidebar-collapsible-element-inner-wrapper`)
       .sidebar-item {
-        padding-top: 1rem;
-        padding-bottom: 1rem;
+        padding-top: var(--ds-admin-sidebar-item-padding);
+        padding-bottom: var(--ds-admin-sidebar-item-padding);
       }
 
       // These classes handle the collapsing behavior
@@ -89,7 +89,7 @@
           & > .sidebar-collapsible-element-inner-wrapper {
             min-width: calc(var(--ds-admin-sidebar-collapsible-element-width) - var(--ds-dark-scrollbar-width));
             height: 100%;
-            padding-right: 16px !important;
+            padding-right: var(--ds-admin-sidebar-item-padding);
           }
         }
       }
diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss
index 937d996102..5e76813abb 100644
--- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss
+++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss
@@ -4,7 +4,7 @@
     margin: 0;
     padding: 0;
     ::ng-deep .ds-menu-item {
-      margin-left: 12px;
+      margin-left: var(--ds-admin-sidebar-section-indent);
     }
   }
 
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 8ff76242cd..e98959d162 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -15,7 +15,7 @@
           <button class="navbar-toggler px-0" 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>
+            <span class="fas fa-bars fa-fw toggler-icon" aria-hidden="true"></span>
           </button>
         </div>
       </nav>
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index a37acf4ced..e002e0c347 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -8,11 +8,6 @@
     max-width: 100%;
   }
 
-  .navbar-toggler .navbar-toggler-icon {
-    background-image: none !important;
-    line-height: 1.5;
-  }
-
   .navbar-toggler {
     border: none;
     color: var(--ds-header-icon-color);
@@ -20,6 +15,12 @@
     &:hover, &:focus {
       color: var(--ds-header-icon-color-hover);
     }
+
+    .toggler-icon {
+      width: 1.5em;
+      height: 1.5em;
+      line-height: 1.5;
+    }
   }
 
   .navbar {
diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss
index 23268b145f..b74408f0f5 100644
--- a/src/app/navbar/navbar.component.scss
+++ b/src/app/navbar/navbar.component.scss
@@ -1,5 +1,5 @@
 :host {
-  --ds-collapsible-navbar-height: auto;
+  --ds-expandable-navbar-height: auto;
 
   nav.navbar {
     background-color: var(--ds-navbar-bg);
diff --git a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss
index 1f33a321f0..9409580cd4 100644
--- a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss
+++ b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss
@@ -7,6 +7,6 @@
 
   .ds-menu-item {
     display: inline-block;
-    padding: 0.25rem 0;
+    padding: var(--ds-user-menu-item-vertical-padding) var(--ds-user-menu-item-horizontal-padding);
   }
 }
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index a08b39aa87..82b5fb28e2 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -22,15 +22,27 @@
   --ds-header-bg: #{$ds-header-bg};
   --ds-header-icon-color: #{$ds-header-icon-color};
   --ds-header-icon-color-hover: #{$ds-header-icon-color-hover};
+
   --ds-navbar-bg: #{$ds-navbar-bg};
+  --ds-navbar-item-vertical-padding: 0;
+  --ds-navbar-item-horizontal-padding: 0.25rem;
   --ds-navbar-dropdown-bg: #{$ds-navbar-dropdown-bg};
-  --ds-header-navbar-border-top-color: #{$ds-header-navbar-border-bottom-color};
-  --ds-header-navbar-border-bottom-color: #{$ds-header-navbar-border-bottom-color};
+  --ds-navbar-dropdown-item-vertical-padding: 0.5rem;
+  --ds-navbar-dropdown-item-horizontal-padding: 1rem;
   --ds-navbar-link-color: #{$ds-navbar-link-color};
   --ds-navbar-link-color-hover: #{$ds-navbar-link-color-hover};
+
+  --ds-header-navbar-border-top-color: #{$ds-header-navbar-border-bottom-color};
+  --ds-header-navbar-border-bottom-color: #{$ds-header-navbar-border-bottom-color};
+
   --ds-expandable-navbar-bg: #{$ds-expandable-navbar-bg};
   --ds-expandable-navbar-link-color: #{$ds-navbar-link-color};
   --ds-expandable-navbar-link-color-hover: #{$ds-navbar-link-color-hover};
+  --ds-expandable-navbar-dropdown-item-vertical-padding: 0.25rem;
+  --ds-expandable-navbar-dropdown-item-horizontal-padding: 0;
+
+  --ds-user-menu-item-vertical-padding: 0.25rem;
+  --ds-user-menu-item-horizontal-padding: 0;
 
   @include media-breakpoint-up(md) {
     --ds-header-logo-height: 50px;
@@ -42,12 +54,15 @@
   --ds-admin-sidebar-bg: #{$ds-admin-sidebar-bg};
   --ds-admin-sidebar-active-bg: #{$ds-admin-sidebar-active-bg};
   --ds-admin-sidebar-header-bg: #{darken($ds-admin-sidebar-bg, 7%)};
+  --ds-admin-sidebar-logo-height: 20px;
   --ds-admin-sidebar-fixed-element-width: #{$ds-admin-sidebar-fixed-element-width};
   --ds-admin-sidebar-fixed-element-z-index: 10;
   --ds-admin-sidebar-collapsible-element-width: #{$ds-admin-sidebar-collapsible-element-width};
   --ds-admin-sidebar-total-width: #{$ds-admin-sidebar-total-width};
   --ds-admin-sidebar-link-color: #{$navbar-dark-color};
   --ds-admin-sidebar-link-hover-color: #{$navbar-dark-hover-color};
+  --ds-admin-sidebar-item-padding: 1rem;
+  --ds-admin-sidebar-section-indent: .75rem;
 
   --ds-dark-scrollbar-bg: #{$ds-admin-sidebar-active-bg};
   --ds-dark-scrollbar-alt-bg: #{lighten($ds-admin-sidebar-active-bg, 2%)};
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 5b3ac00077..379b1234d7 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
@@ -1,7 +1,7 @@
 :host {
   --ds-header-navbar-border-bottom-style: solid var(--ds-header-navbar-border-bottom-height) var(--ds-header-navbar-border-bottom-color);
-  --ds-mobile-navbar-border-top-style: solid var(--ds-mobile-navbar-border-top-height) var(--ds-mobile-navbar-border-top-color);
-  --ds-collapsible-navbar-height: calc(100vh - var(--ds-header-height));
+  --ds-expandable-navbar-border-top-style: solid var(--ds-expandable-navbar-border-top-height) var(--ds-expandable-navbar-border-top-color);
+  --ds-expandable-navbar-height: calc(100vh - var(--ds-header-height));
 
   div#header-navbar-wrapper {
     // The header-navbar-wrapper should not have a z-index, otherwise it would cover the media viewer despite its higher z-index
@@ -17,7 +17,7 @@
 
       nav#collapsible-mobile-navbar {
         // Following parameters are changed by slideMobileNav animation
-        min-height: var(--ds-collapsible-navbar-height);
+        min-height: var(--ds-expandable-navbar-height);
         height: auto;
         border-bottom: var(--ds-header-navbar-border-bottom-style);
       }
@@ -42,7 +42,8 @@
         height: 100%;
       }
       .ds-menu-item {
-        padding: 0.5rem;
+        // define here the style for top-level navbar menu items
+        padding: var(--ds-navbar-item-vertical-padding) var(--ds-navbar-item-horizontal-padding);
       }
       .ds-menu-item, .ds-menu-toggler-wrapper {
         color: var(--ds-navbar-link-color) !important;
@@ -54,6 +55,8 @@
       // desktop submenu
       .dropdown-menu {
         .ds-menu-item {
+          // define here the style for second-level navbar menu items
+          padding: var(--ds-navbar-dropdown-item-vertical-padding) var(--ds-navbar-dropdown-item-horizontal-padding);
         }
       }
 
@@ -61,14 +64,14 @@
 
     nav#collapsible-mobile-navbar {
 
-      border-top: var(--ds-mobile-navbar-border-top-style);
-      padding-top: var(--ds-mobile-navbar-padding-top);
+      border-top: var(--ds-expandable-navbar-border-top-style);
+      padding-top: var(--ds-expandable-navbar-padding-top);
 
       ::ng-deep {
 
         // mobile menu
         .ds-menu-item {
-          padding: 0.25rem 0;
+          padding: var(--ds-expandable-navbar-dropdown-item-vertical-padding) var(--ds-expandable-navbar-dropdown-item-horizontal-padding);
         }
 
         .ds-menu-item, .ds-menu-toggler-wrapper {
diff --git a/src/themes/dspace/app/header/header.component.html b/src/themes/dspace/app/header/header.component.html
index 656a076e37..1ea91bc460 100644
--- a/src/themes/dspace/app/header/header.component.html
+++ b/src/themes/dspace/app/header/header.component.html
@@ -25,7 +25,7 @@
       <div id="mobile-navbar-toggler" class="d-block d-lg-none ml-3" *ngIf="(isMobile$ | async)">
         <button id="navbar-toggler" class="btn" type="button" (click)="toggleNavbar()"
                 [attr.aria-label]="'nav.toggle' | translate" aria-controls="collapsible-mobile-navbar" [attr.aria-expanded]="!(isNavBarCollapsed$ | async)">
-          <span class="fas fa-bars fa-fw fa-xl" aria-hidden="true"></span>
+          <span class="fas fa-bars fa-fw fa-xl toggler-icon" aria-hidden="true"></span>
         </button>
       </div>
 
diff --git a/src/themes/dspace/app/header/header.component.scss b/src/themes/dspace/app/header/header.component.scss
index 2e1064b75c..f61c442ff5 100644
--- a/src/themes/dspace/app/header/header.component.scss
+++ b/src/themes/dspace/app/header/header.component.scss
@@ -5,7 +5,7 @@
   }
 
   img#header-logo {
-    height: 40px;
+    height: var(--ds-header-logo-height);
   }
 
   button#navbar-toggler {
diff --git a/src/themes/dspace/styles/_theme_css_variable_overrides.scss b/src/themes/dspace/styles/_theme_css_variable_overrides.scss
index b8e0b3e2e9..d016ff4032 100644
--- a/src/themes/dspace/styles/_theme_css_variable_overrides.scss
+++ b/src/themes/dspace/styles/_theme_css_variable_overrides.scss
@@ -18,7 +18,7 @@
 
   /* set the next two properties as `--ds-header-navbar-border-bottom-*`
   in order to keep the bottom border of the header when navbar is expanded */
-  --ds-mobile-navbar-border-top-color: #{$white};
-  --ds-mobile-navbar-border-top-height: 0;
-  --ds-mobile-navbar-padding-top: 0;
+  --ds-expandable-navbar-border-top-color: #{$white};
+  --ds-expandable-navbar-border-top-height: 0;
+  --ds-expandable-navbar-padding-top: 0;
 }