search all: add slider/arrows in the tabs

This commit is contained in:
Alex Martzios 2022-05-23 12:52:41 +03:00
parent 703dfd39a8
commit a0ff8d03c3
1 changed files with 69 additions and 43 deletions

View File

@ -26,50 +26,76 @@
</div>
</div>
<schema2jsonld *ngIf="name && logoURL" [URL]="properties.domain+ properties.baseLink +'/search/find'"
[logoURL]="properties.domain + properties.baseLink+logoURL" type="search" [name]=name
description="Search for {{openaireEntities.RESULTS}} ({{openaireEntities.PUBLICATIONS}}, {{openaireEntities.DATASETS}}, {{openaireEntities.SOFTWARE}}, {{openaireEntities.OTHER}}), {{openaireEntities.PROJECTS}}, {{openaireEntities.ORGANIZATIONS}}, {{openaireEntities.DATASOURCES}} in the OpenAIRE Research Graph. "></schema2jsonld>
[logoURL]="properties.domain + properties.baseLink+logoURL" type="search" [name]=name
description="Search for {{openaireEntities.RESULTS}} ({{openaireEntities.PUBLICATIONS}}, {{openaireEntities.DATASETS}}, {{openaireEntities.SOFTWARE}}, {{openaireEntities.OTHER}}), {{openaireEntities.PROJECTS}}, {{openaireEntities.ORGANIZATIONS}}, {{openaireEntities.DATASOURCES}} in the OpenAIRE Research Graph. "></schema2jsonld>
<div class="uk-container-large uk-container uk-margin-large-top uk-flex uk-flex-center">
<ul class="uk-tab" uk-tab="animation: uk-animation-fade">
<li *ngIf="showPublications || showDatasets || showOrps || showSoftware" (click)="entityChanged('result')"
[class]="activeEntity == 'result'?'uk-active':''">
<a class="uk-text-uppercase">
{{resultsName}}
<span *ngIf=" fetchPublications.searchUtils.totalResults!=null">
({{fetchPublications.searchUtils.totalResults | number}})</span>
</a>
</li>
<li *ngIf="showProjects" (click)="entityChanged('projects')" [class]="activeEntity == 'projects'?'uk-active':''">
<a class="uk-text-uppercase">
{{projectName}}
<span *ngIf="fetchProjects.searchUtils.totalResults!=null">
({{fetchProjects.searchUtils.totalResults | number}})</span>
</a>
</li>
<li *ngIf="showDataProviders" (click)="entityChanged('datasources')"
[class]="activeEntity == 'datasources'?'uk-active':''">
<a class="uk-text-uppercase">
{{dataSourcesName}}
<span *ngIf="fetchDataproviders.searchUtils.totalResults!=null">
({{fetchDataproviders.searchUtils.totalResults | number}})</span>
</a>
</li>
<li *ngIf="showServices" (click)="entityChanged('services')"
[class]="activeEntity == 'services'?'uk-active':''">
<a class="uk-text-uppercase">
{{servicesName}}
<span *ngIf="fetchServices.searchUtils.totalResults!=null">
({{fetchServices.searchUtils.totalResults | number}})</span>
</a>
</li>
<li *ngIf="showOrganizations" (click)="entityChanged('organizations')"
[class]="activeEntity == 'organizations'?'uk-active':''">
<a class="uk-text-uppercase">
{{organizationsName}}
<span *ngIf="fetchOrganizations.searchUtils.totalResults!=null">
({{fetchOrganizations.searchUtils.totalResults | number}})</span>
</a>
</li>
</ul>
<div uk-slider="finite: true">
<div class="uk-position-relative">
<div class="uk-slider-container">
<ul class="uk-slider-items" style="flex-wrap: nowrap !important;">
<li *ngIf="showPublications || showDatasets || showOrps || showSoftware" (click)="entityChanged('result')">
<ul class="uk-tab">
<li [class.uk-active]="activeEntity == 'result'">
<a class="uk-text-uppercase">
{{resultsName}}
<span *ngIf=" fetchPublications.searchUtils.totalResults!=null">
({{fetchPublications.searchUtils.totalResults | number}})</span>
</a>
</li>
</ul>
</li>
<li *ngIf="showProjects" (click)="entityChanged('projects')">
<ul class="uk-tab">
<li [class.uk-active]="activeEntity == 'projects'">
<a class="uk-text-uppercase">
{{projectName}}
<span *ngIf="fetchProjects.searchUtils.totalResults!=null">
({{fetchProjects.searchUtils.totalResults | number}})</span>
</a>
</li>
</ul>
</li>
<li *ngIf="showDataProviders" (click)="entityChanged('datasources')">
<ul class="uk-tab">
<li [class.uk-active]="activeEntity == 'datasources'">
<a class="uk-text-uppercase">
{{dataSourcesName}}
<span *ngIf="fetchDataproviders.searchUtils.totalResults!=null">
({{fetchDataproviders.searchUtils.totalResults | number}})</span>
</a>
</li>
</ul>
</li>
<li *ngIf="showServices" (click)="entityChanged('services')">
<ul class="uk-tab">
<li [class.uk-active]="activeEntity == 'services'">
<a class="uk-text-uppercase">
{{servicesName}}
<span *ngIf="fetchServices.searchUtils.totalResults!=null">
({{fetchServices.searchUtils.totalResults | number}})</span>
</a>
</li>
</ul>
</li>
<li *ngIf="showOrganizations" (click)="entityChanged('organizations')">
<ul class="uk-tab">
<li [class.uk-active]="activeEntity == 'organizations'">
<a class="uk-text-uppercase">
{{organizationsName}}
<span *ngIf="fetchOrganizations.searchUtils.totalResults!=null">
({{fetchOrganizations.searchUtils.totalResults | number}})</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
<div>
<a class="uk-position-center-left blur-background" uk-slider-item="previous"><span uk-icon="chevron-left"></span></a>
<a class="uk-position-center-right blur-background" uk-slider-item="next"><span uk-icon="chevron-right"></span></a>
</div>
</div>
</div>
</div>
<search-research-results *ngIf="activeEntity == 'result'" resultType="result" [includeOnlyResultsAndFilter]="true"