Applied same gap between header icons in the dspace theme and made th…

…e search field non-focusable when collapsed
DSpace · Sep 26, 2023 · 89480d6 · 89480d6
1 parent c4f5466
commit 89480d6
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 8 deletions.
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
@@ -22,5 +22,6 @@
 
 .navbar {
   display: flex;
-  gap: 0.25rem;
+  gap: calc(var(--bs-spacer) / 4);
+  align-items: center;
 }
diff --git a/src/app/search-navbar/search-navbar.component.html b/src/app/search-navbar/search-navbar.component.html
@@ -3,7 +3,10 @@
     <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" autocomplete="on">
       <input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query"
              formControlName="query" type="text" placeholder="{{searchExpanded ? ('nav.search' | translate) : ''}}"
-             class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-right pl-1" [attr.data-test]="'header-search-box' | dsBrowserOnly">
+             class="bg-transparent position-absolute form-control dropdown-menu-right pl-1 pr-4"
+             [class.display]="searchExpanded ? 'inline-block' : 'none'"
+             [tabIndex]="searchExpanded ? 0 : -1"
+             [attr.data-test]="'header-search-box' | dsBrowserOnly">
       <button class="submit-icon btn btn-link btn-link-inline" [attr.aria-label]="'nav.search.button' | translate" type="button" (click)="searchExpanded ? onSubmit(searchForm.value) : expand()" [attr.data-test]="'header-search-icon' | dsBrowserOnly">
         <em class="fas fa-search fa-lg fa-fw"></em>
       </button>

diff --git a/src/themes/dspace/app/header/header.component.html b/src/themes/dspace/app/header/header.component.html
@@ -5,7 +5,7 @@
         <img src="assets/images/dspace-logo.svg" [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-themed-lang-switch></ds-themed-lang-switch>
       <ds-context-help-toggle></ds-context-help-toggle>

diff --git a/src/themes/dspace/app/header/header.component.scss b/src/themes/dspace/app/header/header.component.scss
@@ -24,3 +24,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/dspace/app/navbar/navbar.component.html b/src/themes/dspace/app/navbar/navbar.component.html
@@ -15,10 +15,12 @@
         </ng-container>
       </ul>
     </div>
-    <ds-search-navbar class="navbar-collapsed"></ds-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 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/dspace/app/navbar/navbar.component.scss b/src/themes/dspace/app/navbar/navbar.component.scss
@@ -54,3 +54,9 @@ a.navbar-brand img {
     color: var(--ds-navbar-link-color-hover);
   }
 }
+
+.navbar-buttons {
+  display: flex;
+  gap: calc(var(--bs-spacer) / 4);
+  align-items: center;
+}