[Library | explore-redesign]: Added/ updated how filters appear in mobile screens | Updated search forms.
1. general.less: Added fixed position for .filters-toggle-button. 2. newSearchPage.component.html: Added floating button for filters in mobile screens. 3. advancedSearchForm.component.html: Re-introduced commented out <entities-selection> inside <advanced-search-input> | Removed iconPosition and commented button for filters inside search form. 4. home.module.ts: Imported SearchInputModule. 5. home.component.html: Replaced <advanced-search-input> with <div search-input> 6. searchDataProviders.component.ts: Set entitiesSelection to false for <new-search-page> 7. newSearchPage.component.ts & searchAll.component.html: Set entitiesSelection to false for <advanced-search-form>
This commit is contained in:
parent
2963589359
commit
ef742be1b2
|
@ -15,7 +15,7 @@
|
||||||
[isDisabled]="disableForms"
|
[isDisabled]="disableForms"
|
||||||
[simpleView]="true" [formPlaceholderText]="formPlaceholderText"
|
[simpleView]="true" [formPlaceholderText]="formPlaceholderText"
|
||||||
[selectedFields]="selectedFields" [showSwitchSearchLink]="true" [dark]="searchForm.dark"
|
[selectedFields]="selectedFields" [showSwitchSearchLink]="true" [dark]="searchForm.dark"
|
||||||
[fieldIdsMap]="fieldIdsMap" [fieldIds]="fieldIds" [entitiesSelection]="true" [customFilter]="customFilter"
|
[fieldIdsMap]="fieldIdsMap" [fieldIds]="fieldIds" [entitiesSelection]="false" [customFilter]="customFilter"
|
||||||
>
|
>
|
||||||
</advanced-search-form>
|
</advanced-search-form>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -35,7 +35,7 @@ import {properties} from "../../../environments/environment";
|
||||||
[includeOnlyResultsAndFilter]="includeOnlyResultsAndFilter"
|
[includeOnlyResultsAndFilter]="includeOnlyResultsAndFilter"
|
||||||
[piwikSiteId]=piwikSiteId [hasPrefix]="hasPrefix"
|
[piwikSiteId]=piwikSiteId [hasPrefix]="hasPrefix"
|
||||||
[searchForm]="searchForm"
|
[searchForm]="searchForm"
|
||||||
[entitiesSelection]="type=='all' || type == 'services'" [showSwitchSearchLink]="showSwitchSearchLink"
|
[entitiesSelection]="false" [showSwitchSearchLink]="showSwitchSearchLink"
|
||||||
[filters]="filters"
|
[filters]="filters"
|
||||||
[simpleView]="simpleView" formPlaceholderText="Search by name, description, subject..."
|
[simpleView]="simpleView" formPlaceholderText="Search by name, description, subject..."
|
||||||
[showResultCount]="true" [showIndexInfo]="type!='deposit'"
|
[showResultCount]="true" [showIndexInfo]="type!='deposit'"
|
||||||
|
|
|
@ -164,28 +164,28 @@
|
||||||
<div class="uk-flex uk-flex-center uk-child-width-1-1">
|
<div class="uk-flex uk-flex-center uk-child-width-1-1">
|
||||||
<ng-container *ngIf="entitiesSelection">
|
<ng-container *ngIf="entitiesSelection">
|
||||||
<!-- [class.uk-hidden]="disableSelect" -->
|
<!-- [class.uk-hidden]="disableSelect" -->
|
||||||
<advanced-search-input [dark]="dark" [iconPosition]="isMobile?'left':'right'" [disabled]="isDisabled" (searchEmitter)="simpleKeywordChanged()">
|
<advanced-search-input [dark]="dark" [disabled]="isDisabled" (searchEmitter)="simpleKeywordChanged()">
|
||||||
<!-- <entities-selection [simpleView]="true" [currentEntity]="entityType"
|
<entities-selection [simpleView]="true" [currentEntity]="entityType"
|
||||||
(selectionChange)="simpleEntityChanged($event)" (disableSelectEmitter)="disableSelectChange($event)"
|
(selectionChange)="simpleEntityChanged($event)" (disableSelectEmitter)="disableSelectChange($event)"
|
||||||
[onChangeNavigate]="true" [customFilter]="customFilter" class="uk-width-2-5"></entities-selection> -->
|
[onChangeNavigate]="true" [customFilter]="customFilter" class="uk-width-2-5"></entities-selection> -->
|
||||||
<div class="uk-width-expand" input placeholder="Search in Explore" [searchable]="true" [hint]="formPlaceholderText"
|
<div class="uk-width-expand" input placeholder="Search in Explore" [searchable]="true" [hint]="formPlaceholderText"
|
||||||
[(value)]="selectedFields[0].value" tooltip="true"></div>
|
[(value)]="selectedFields[0].value" tooltip="true"></div>
|
||||||
<a *ngIf="isMobile" href="#mobile-filters" filters-toggle (click)="filtersClicked.emit(true)" uk-toggle>
|
<!-- <a *ngIf="isMobile" href="#mobile-filters" filters-toggle (click)="filtersClicked.emit(true)" uk-toggle>-->
|
||||||
<icon name="filters"></icon>
|
<!-- <icon name="filters"></icon>-->
|
||||||
</a>
|
<!-- </a>-->
|
||||||
</advanced-search-input>
|
</advanced-search-input>
|
||||||
<div *ngIf="selectedFields[0] && disableSelect" search-input [disabled]="isDisabled" [(value)]="selectedFields[0].value"
|
<div *ngIf="selectedFields[0] && disableSelect" search-input [disabled]="isDisabled" [(value)]="selectedFields[0].value"
|
||||||
[placeholder]="formPlaceholderText" (searchEmitter)="simpleKeywordChanged()" [iconPosition]="isMobile?'left':'right'">
|
[placeholder]="formPlaceholderText" (searchEmitter)="simpleKeywordChanged()">
|
||||||
<a *ngIf="isMobile" href="#mobile-filters" filters-toggle (click)="filtersClicked.emit(true)" uk-toggle>
|
<!-- <a *ngIf="isMobile" href="#mobile-filters" filters-toggle (click)="filtersClicked.emit(true)" uk-toggle>-->
|
||||||
<icon name="filters"></icon>
|
<!-- <icon name="filters"></icon>-->
|
||||||
</a>
|
<!-- </a>-->
|
||||||
</div>
|
</div>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<div *ngIf="selectedFields[0] && !entitiesSelection" search-input [disabled]="isDisabled" [(value)]="selectedFields[0].value"
|
<div *ngIf="selectedFields[0] && !entitiesSelection" search-input [disabled]="isDisabled" [(value)]="selectedFields[0].value"
|
||||||
[placeholder]="formPlaceholderText" (searchEmitter)="simpleKeywordChanged()" [iconPosition]="isMobile?'left':'right'">
|
[placeholder]="formPlaceholderText" (searchEmitter)="simpleKeywordChanged()">
|
||||||
<a *ngIf="isMobile" href="#mobile-filters" filters-toggle (click)="filtersClicked.emit(true)" uk-toggle>
|
<!-- <a *ngIf="isMobile" href="#mobile-filters" filters-toggle (click)="filtersClicked.emit(true)" uk-toggle>-->
|
||||||
<icon name="filters"></icon>
|
<!-- <icon name="filters"></icon>-->
|
||||||
</a>
|
<!-- </a>-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -139,6 +139,14 @@
|
||||||
</div>
|
</div>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
<ng-template #main let-mobile="mobile">
|
<ng-template #main let-mobile="mobile">
|
||||||
|
<div *ngIf="mobile" class="filters-toggle-button">
|
||||||
|
<button href="#mobile-filters" uk-toggle="target: #mobile-filters"
|
||||||
|
class="uk-icon-button uk-button-secondary uk-flex uk-flex-middle"
|
||||||
|
(click)="showOffCanvas = true" [disabled]="disabled" [class.uk-disabled]="disabled">
|
||||||
|
<icon name="filters" [flex]="true" ratio="1.2" visuallyHidden="filters"></icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- TODO - Clean up -->
|
<!-- TODO - Clean up -->
|
||||||
<div *ngIf="!includeOnlyResultsAndFilter" [class]="usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') ?
|
<div *ngIf="!includeOnlyResultsAndFilter" [class]="usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') ?
|
||||||
(stickyForm?'':' ') :
|
(stickyForm?'':' ') :
|
||||||
|
@ -171,7 +179,7 @@
|
||||||
[advancedSearchLinkParameters]="this.routerHelper.createQueryParams(this.parameterNames, this.parameterValues)"
|
[advancedSearchLinkParameters]="this.routerHelper.createQueryParams(this.parameterNames, this.parameterValues)"
|
||||||
[simpleView]="simpleView" [formPlaceholderText]="formPlaceholderText" [isMobile]="mobile"
|
[simpleView]="simpleView" [formPlaceholderText]="formPlaceholderText" [isMobile]="mobile"
|
||||||
[resultTypes]="resultTypes" [quickFilter]="quickFilter" [entitiesSelection]="entitiesSelection"
|
[resultTypes]="resultTypes" [quickFilter]="quickFilter" [entitiesSelection]="entitiesSelection"
|
||||||
[showSwitchSearchLink]="showSwitchSearchLink" [customFilter]="customFilter" (filtersClicked)="showOffCanvas = $event"
|
[showSwitchSearchLink]="showSwitchSearchLink" [customFilter]="customFilter"
|
||||||
>
|
>
|
||||||
</advanced-search-form>
|
</advanced-search-form>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -132,7 +132,7 @@ export class NewSearchPageComponent implements OnInit, OnDestroy, OnChanges {
|
||||||
public pageOptions: number[] = [5, 10, 20, 50];
|
public pageOptions: number[] = [5, 10, 20, 50];
|
||||||
@Input() basicMetaDescription = [];
|
@Input() basicMetaDescription = [];
|
||||||
|
|
||||||
@Input() entitiesSelection: boolean = true;
|
@Input() entitiesSelection: boolean = false;
|
||||||
@Input() showSwitchSearchLink: boolean = true;
|
@Input() showSwitchSearchLink: boolean = true;
|
||||||
|
|
||||||
// on 1st load, do not show filters until results query returns.
|
// on 1st load, do not show filters until results query returns.
|
||||||
|
|
Loading…
Reference in New Issue