hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 01:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Applied same gap between header icons in the dspace theme and made the search field non-focusable when collapsed

Browse Source
This commit is contained in:
Alexandre Vryghem
2023-09-26 22:16:25 +02:00
parent f9b4460e70
commit 58d31dd73f
6 changed files with 26 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/header/header.component.scss
View File

@@ -22,5 +22,6 @@
.navbar {
display: flex;
gap: 0.25rem;
gap: calc(var(--bs-spacer) / 3);
align-items: center;
}

5
src/app/search-navbar/search-navbar.component.html
View File

@@ -3,7 +3,10 @@
<form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" autocomplete="on" class="d-flex">
<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>

2
src/themes/dspace/app/header/header.component.html
View File

@@ -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>

6
src/themes/dspace/app/header/header.component.scss
View File

@@ -24,3 +24,9 @@
color: var(--ds-header-icon-color-hover);
}
}
.navbar-buttons {
display: flex;
gap: calc(var(--bs-spacer) / 3);
align-items: center;
}

12
src/themes/dspace/app/navbar/navbar.component.html
View File

@@ -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>

6
src/themes/dspace/app/navbar/navbar.component.scss
View File

@@ -54,3 +54,9 @@ a.navbar-brand img {
color: var(--ds-navbar-link-color-hover);
}
}
.navbar-buttons {
display: flex;
gap: calc(var(--bs-spacer) / 3);
align-items: center;
}