src/themes/cgspace: updates to header and navbar

Chase accessibility changes to header and navbar in dspace-angular. See: DSpace#2527
alanorth · Sep 28, 2023 · 12d6a79 · 12d6a79
1 parent d38098f
commit 12d6a79
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 7 deletions.
diff --git a/src/themes/cgspace/app/header/header.component.html b/src/themes/cgspace/app/header/header.component.html
@@ -5,9 +5,9 @@
         <img src="assets/cgspace/images/CGIAR-logo-white.png" [attr.alt]="'menu.header.image.logo' | translate"/>
       </a>
     </div>
-    <div class="d-flex flex-grow-1 ml-auto justify-content-end align-items-center">
+    <div class="navbar-buttons d-flex flex-grow-1 ml-auto justify-content-end align-items-center">
       <ds-themed-search-navbar></ds-themed-search-navbar>
-      <ds-lang-switch></ds-lang-switch>
+      <ds-themed-lang-switch></ds-themed-lang-switch>
       <ds-context-help-toggle></ds-context-help-toggle>
       <ds-themed-auth-nav-menu></ds-themed-auth-nav-menu>
       <ds-impersonate-navbar></ds-impersonate-navbar>

diff --git a/src/themes/cgspace/app/header/header.component.scss b/src/themes/cgspace/app/header/header.component.scss
@@ -26,3 +26,9 @@
     color: var(--ds-header-icon-color-hover);
   }
 }
+
+.navbar-buttons {
+  display: flex;
+  gap: calc(var(--bs-spacer) / 4);
+  align-items: center;
+}
diff --git a/src/themes/cgspace/app/navbar/navbar.component.html b/src/themes/cgspace/app/navbar/navbar.component.html
@@ -15,10 +15,12 @@
         </ng-container>
       </ul>
     </div>
-    <ds-search-navbar class="navbar-collapsed"></ds-search-navbar>
-    <ds-lang-switch class="navbar-collapsed"></ds-lang-switch>
-    <ds-context-help-toggle class="navbar-collapsed"></ds-context-help-toggle>
-    <ds-themed-auth-nav-menu class="navbar-collapsed"></ds-themed-auth-nav-menu>
-    <ds-impersonate-navbar class="navbar-collapsed"></ds-impersonate-navbar>
+    <div class="navbar-buttons">
+      <ds-themed-search-navbar class="navbar-collapsed"></ds-themed-search-navbar>
+      <ds-themed-lang-switch class="navbar-collapsed"></ds-themed-lang-switch>
+      <ds-context-help-toggle class="navbar-collapsed"></ds-context-help-toggle>
+      <ds-themed-auth-nav-menu class="navbar-collapsed"></ds-themed-auth-nav-menu>
+      <ds-impersonate-navbar class="navbar-collapsed"></ds-impersonate-navbar>
+    </div>
   </div>
 </nav>
diff --git a/src/themes/cgspace/app/navbar/navbar.component.scss b/src/themes/cgspace/app/navbar/navbar.component.scss
@@ -65,3 +65,9 @@ a.navbar-brand img {
     text-decoration: underline;
   }
 }
+
+.navbar-buttons {
+  display: flex;
+  gap: calc(var(--bs-spacer) / 4);
+  align-items: center;
+}