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

108595: fix for overflowing search filter badge selection

Browse Source
This commit is contained in:
lotte
2023-11-28 19:17:23 +01:00
committed by Tim Donohue
parent 679702bb5a
commit 65860b81b1
6 changed files with 21 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/shared/search/search-labels/search-label/search-label.component.html
View File

@@ -1,7 +1,9 @@
<a class="badge badge-primary mr-1 mb-1" <a class="badge badge-primary mb-1"
[attr.aria-label]="'search.filters.remove' | translate:{ type: ('search.filters.applied.' + key) | translate, value: normalizeFilterValue(value) }" [attr.aria-label]="'search.filters.remove' | translate:{ type: ('search.filters.applied.' + key) | translate, value: normalizeFilterValue(value) }"
[routerLink]="searchLink" [routerLink]="searchLink"
[queryParams]="(removeParameters | async)" queryParamsHandling="merge"> [queryParams]="(removeParameters | async)" queryParamsHandling="merge">
{{('search.filters.applied.' + key) | translate}}: {{'search.filters.' + filterName + '.' + value | translate: {default: normalizeFilterValue(value)} }} <span class="d-flex">
<span aria-hidden="true"> ×</span> <span class="flex-grow-1 text-left">{{('search.filters.applied.' + key) | translate}}: {{'search.filters.' + filterName + '.' + value | translate: {default: normalizeFilterValue(value)} }}</span>
<span class="pl-1">×</span>
</span>
</a> </a>

3
src/app/shared/search/search-labels/search-label/search-label.component.scss Normal file
View File

@@ -0,0 +1,3 @@
.badge {
white-space: inherit;
}

1
src/app/shared/search/search-labels/search-label/search-label.component.ts
View File

@@ -12,6 +12,7 @@ import { stripOperatorFromFilterValue } from '../../search.utils';
@Component({ @Component({
selector: 'ds-search-label', selector: 'ds-search-label',
templateUrl: './search-label.component.html', templateUrl: './search-label.component.html',
styleUrls: ['./search-label.component.scss'] ,
}) })
/** /**

4
src/app/shared/search/search-labels/search-labels.component.html
View File

@@ -1,5 +1,5 @@
<div class="labels"> <div class="labels">
<ng-container *ngFor="let key of ((appliedFilters | async) | dsObjectKeys)"> <ng-container *ngFor="let key of ((appliedFilters | async) | dsObjectKeys); let lastType = last">
<ds-search-label *ngFor="let value of (appliedFilters | async)[key]" [inPlaceSearch]="inPlaceSearch" [key]="key" [value]="value" [appliedFilters]="appliedFilters"></ds-search-label> <ds-search-label *ngFor="let value of (appliedFilters | async)[key]; let lastOfType = last" [inPlaceSearch]="inPlaceSearch" [key]="key" [value]="value" [appliedFilters]="appliedFilters"></ds-search-label>
</ng-container> </ng-container>
</div> </div>

9
src/app/shared/search/search-labels/search-labels.component.scss
View File

@@ -1,3 +1,10 @@
:host { :host {
line-height: 1; line-height: 1;
} .labels {
margin: 0 calc(-1 * var(--bs-spacer)/8);
ds-search-label {
display: inline-block;
padding: 0 calc(var(--bs-spacer)/8);
}
}
}

4
src/app/shared/search/search.component.html
View File

@@ -90,8 +90,8 @@
[inPlaceSearch]="inPlaceSearch" [inPlaceSearch]="inPlaceSearch"
[searchPlaceholder]="searchFormPlaceholder | translate"> [searchPlaceholder]="searchFormPlaceholder | translate">
</ds-themed-search-form> </ds-themed-search-form>
<div class="row mb-3 mb-md-1"> <div class="mb-3 mb-md-1">
<div class="labels col-sm-9"> <div class="labels">
<ds-search-labels *ngIf="searchEnabled" [inPlaceSearch]="inPlaceSearch"></ds-search-labels> <ds-search-labels *ngIf="searchEnabled" [inPlaceSearch]="inPlaceSearch"></ds-search-labels>
</div> </div>
</div> </div>