MaDgIK
/
explore-services
13
0
Fork 0
Code Issues Pull Requests Projects Releases 22 Wiki Activity

Align elements of search pages properly for all device sizes | paging added at the bottom of search page table-view and advanced search page 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@49217 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2017-10-03 15:43:49 +00:00
parent 4bb3dc98fb
commit fb90478c89
6 changed files with 265 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
portal-2/src/app/landingPages/dataProvider/dataProvider.service.ts
View File

@ -17,7 +17,7 @@ export class DataProviderService {
getDataproviderInfo (id: string):any {
console.info("getDataProviderInfo in service");
let url = OpenaireProperties.getSearchAPIURLLast() + 'datasources/' +id +"?formatt=json";
let url = OpenaireProperties.getSearchAPIURLLast() + 'datasources/' +id +"?format=json";
let key = url;
if (this._cache.has(key)) {
return Observable.of(this._cache.get(key)).map(res => this.parseDataProviderInfo(res));

97
portal-2/src/app/searchPages/searchUtils/advancedSearchPage.component.html
View File

@ -1,49 +1,54 @@
<div id="tm-main" class=" uk-section uk-margin-small-top tm-middle">
<div uk-grid uk-grid>
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first ">
<div class="uk-container uk-margin-top">
<div class="uk-article-title">
{{pageTitle}}
</div>
<div>
<a *ngIf = "simpleSearchLink && simpleSearchLink.length > 0" routerLinkActive="router-link-active" [routerLink]=simpleSearchLink [class]="(disableForms)?'uk-float-right uk-disabled uk-link-muted':'uk-float-right'" >Simple search <span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg>
</span></a>
<advanced-search-form
[entityType] = "entityType"
[(fieldIds)]="fieldIds"
[(fieldIdsMap)]="fieldIdsMap"
[(selectedFields)]="selectedFields"
(queryChange)="queryChanged($event)"
[isDisabled]="disableForms">
</advanced-search-form>
<div class="uk-width-1-1">
<helper position="top"></helper>
</div>
<div class="uk-width-2-3@m uk-width-1-1@s uk-align-center uk-margin-remove-bottom">
<search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils" [(results)] = "results" [(baseUrl)] = "searchUtils.baseUrl" [(parameterNames)] = "parameterNames" [(parameterValues)] = "parameterValues" ></search-paging>
</div>
<search-download class="uk-width-1-1@s uk-hidden@m" [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults" ></search-download>
<div id="tm-main" class=" uk-section uk-margin-small-top tm-middle" >
<div uk-grid uk-grid>
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first ">
<div class="uk-container uk-margin-top">
<div class="uk-article-title">
{{pageTitle}}
</div>
<div>
<a *ngIf = "simpleSearchLink && simpleSearchLink.length > 0" routerLinkActive="router-link-active" [routerLink]=simpleSearchLink [class]="(disableForms)?'uk-float-right uk-disabled uk-link-muted':'uk-float-right'" >Simple search <span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg>
</span></a>
<advanced-search-form
[entityType] = "entityType"
[(fieldIds)]="fieldIds"
[(fieldIdsMap)]="fieldIdsMap"
[(selectedFields)]="selectedFields"
(queryChange)="queryChanged($event)"
[isDisabled]="disableForms">
</advanced-search-form>
<div class="uk-width-1-1">
<helper position="top"></helper>
</div>
<search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils" [(results)] = "results" [(baseUrl)] = "searchUtils.baseUrl" [(parameterNames)] = "parameterNames" [(parameterValues)] = "parameterValues" ></search-paging>
<search-download [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults" ></search-download>
<div class="uk-width-1-1 uk-grid helper-grid" >
<helper position="left" styleName=" uk-width-1-5 uk-padding-left"></helper>
<div class="uk-width-expand uk-padding-remove-left">
<search-result [results]="results"
[status]=searchUtils.status
[type]="entityType" [urlParam]="urlParam"
[showLoading]="true">
</search-result>
</div>
<helper position="right" styleName=" uk-width-1-5"></helper>
</div>
<div class="uk-width-1-1">
<helper position="bottom"></helper>
</div>
</div>
</div>
<div class="uk-width-1-1 uk-grid helper-grid" >
<helper class="uk-width-1-6@m uk-width-1-1@s" position="left" styleName=" uk-width-1-5 uk-padding-left"></helper>
<div class="uk-width-2-3@m uk-with-1-1@s">
<search-result [results]="results"
[status]=searchUtils.status
[type]="entityType" [urlParam]="urlParam"
[showLoading]="true">
</search-result>
</div>
<div class="uk-width-1-6@m uk-visible@m">
<search-download [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults" ></search-download>
<helper position="right" styleName=" uk-width-1-5"></helper>
</div>
<helper class="uk-width-1-1@s uk-hidden@m" position="right" styleName=" uk-width-1-5"></helper>
</div>
<div class="uk-width-2-3@m uk-width-1-1@s uk-align-center uk-margin-remove-bottom">
<search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils" [(results)] = "results" [(baseUrl)] = "searchUtils.baseUrl" [(parameterNames)] = "parameterNames" [(parameterValues)] = "parameterValues" ></search-paging>
</div>
<div class="uk-width-1-1">
<helper position="bottom"></helper>
</div>
</div>
</div>
<!--modal-loading [message]= "'Loading results...'"></modal-loading-->
</div>
</div>
</div>
</div>
</div>

31
portal-2/src/app/searchPages/searchUtils/searchPage.component.html
View File

@ -42,7 +42,7 @@
</div>
<div class="uk-container">
<helper position="top"></helper>
<div [class]="(showRefine)?'uk-width-3-5@m uk-width-3-5@l uk-width-1-1@s uk-align-center uk-margin-remove-bottom':'uk-width-1-1'">
<div [class]="(showRefine)? 'uk-width-3-5@m uk-width-3-5@l uk-width-1-1@s uk-align-center uk-margin-remove-bottom' :'uk-width-1-1'">
<div *ngIf="showRefine" class="uk-offcanvas-content uk-hidden@m">
<a href="#offcanvas-usage" uk-toggle><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><rect x="6" y="4" width="12" height="1"></rect><rect x="6" y="9" width="12" height="1"></rect><rect x="6" y="14" width="12" height="1"></rect><rect x="2" y="4" width="2" height="1"></rect><rect x="2" y="9" width="2" height="1"></rect><rect x="2" y="14" width="2" height="1"></rect></svg></a>
@ -60,14 +60,31 @@
<search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils" [(results)] = "results" [(baseUrl)] = "baseUrl" [(parameterNames)] = "parameterNames" [(parameterValues)] = "parameterValues" ></search-paging>
</div>
<div *ngIf="tableViewLink || searchUtils.totalResults <=10000" class="uk-width-1-1@s uk-hidden@m">
<span *ngIf="tableViewLink" class="uk-margin-medium-right">
<a routerLinkActive="router-link-active" [class]="(disableForms)?'uk-disabled uk-link-muted':''" [routerLink]=tableViewLink >
<span class="uk-margin-small-right uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><rect x="2" y="2" width="3" height="3"></rect><rect x="8" y="2" width="3" height="3"></rect><rect x="14" y="2" width="3" height="3"></rect><rect x="2" y="8" width="3" height="3"></rect><rect x="8" y="8" width="3" height="3"></rect><rect x="14" y="8" width="3" height="3"></rect><rect x="2" y="14" width="3" height="3"></rect><rect x="8" y="14" width="3" height="3"></rect><rect x="14" y="14" width="3" height="3"></rect></svg></span>
</a>
<span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="table" ratio="1"><rect x="1" y="3" width="18" height="1"></rect><rect x="1" y="7" width="18" height="1"></rect><rect x="1" y="11" width="18" height="1"></rect><rect x="1" y="15" width="18" height="1"></rect></svg></span>
</span>
<search-download [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults"></search-download>
<helper position="right"></helper>
</div>
<div *ngIf="!(tableViewLink || searchUtils.totalResults <=10000)" class="uk-width-1-1@s uk-hidden@m">
<helper position="right"></helper>
</div>
<div class="uk-grid uk-width-1-1 uk-margin">
<div *ngIf="showRefine" class=" search-filters uk-width-1-5@l uk-width-1-5@m uk-width-1-1@s uk-visible@m">
<helper position="left"></helper>
<search-filter *ngFor="let filter of filters " [isDisabled]="disableForms" [filter]="filter" [showResultCount]=showResultCount (change)="filterChanged($event)" (toggleModal)="toggleModal($event)"></search-filter>
</div>
<!--div [class]="(showRefine)?'uk-width-3-5@m uk-width-3-5@l uk-width-1-1@s uk-first-column':''" -->
<div [class]="(showRefine)?'uk-width-expand@m uk-first-column':''" >
<div [class]="(showRefine)? 'uk-width-3-5@m uk-width-3-5@l uk-width-1-1@s uk-first-column' : ''">
<!-- <div [class]="(showRefine)?'uk-width-expand@m uk-first-column':''" > -->
<search-result *ngIf="!tableView"
[results]="results"
@ -78,7 +95,7 @@
</div>
<div *ngIf="tableViewLink || searchUtils.totalResults <=10000" class="uk-width-1-5@l uk-width-1-5@m uk-width-1-1@s uk-visible@m">
<div class="uk-width-1-5@l uk-width-1-5@m uk-width-1-1@s uk-visible@m">
<span *ngIf="tableViewLink" class="uk-margin-medium-right">
<a routerLinkActive="router-link-active" [class]="(disableForms)?'uk-disabled uk-link-muted':''" [routerLink]=tableViewLink >
<span class="uk-margin-small-right uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><rect x="2" y="2" width="3" height="3"></rect><rect x="8" y="2" width="3" height="3"></rect><rect x="14" y="2" width="3" height="3"></rect><rect x="2" y="8" width="3" height="3"></rect><rect x="8" y="8" width="3" height="3"></rect><rect x="14" y="8" width="3" height="3"></rect><rect x="2" y="14" width="3" height="3"></rect><rect x="8" y="14" width="3" height="3"></rect><rect x="14" y="14" width="3" height="3"></rect></svg></span>
@ -88,13 +105,9 @@
</span>
<search-download [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults"></search-download>
<helper position="right"></helper>
</div>
<div *ngIf="!(tableViewLink || searchUtils.totalResults <=10000)" class=" search-filters uk-width-1-5@l uk-width-1-5@m uk-width-1-1@s uk-visible@m">
<helper position="right"></helper>
</div>
</div>
<div [class]="(showRefine)?'uk-width-3-5@m uk-width-3-5@l uk-width-1-1@s uk-align-center uk-margin-remove-bottom':'uk-width-1-1'">
<div [class]="(showRefine)? 'uk-width-3-5@m uk-width-3-5@l uk-width-1-1@s uk-align-center uk-margin-remove-bottom' : 'uk-width-1-1'">
<search-paging [loadPaging]="loadPaging" [type]="type" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils" [(results)] = "results" [(baseUrl)] = "baseUrl" [(parameterNames)] = "parameterNames" [(parameterValues)] = "parameterValues" ></search-paging>
</div>
<div class="uk-width-1-1">

324
portal-2/src/app/searchPages/searchUtils/searchPageTableView.component.html
View File

@ -1,168 +1,192 @@
<div id="tm-main" class=" uk-section uk-margin-small-top tm-middle" >
<div uk-grid uk-grid>
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first ">
<div uk-grid uk-grid>
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first ">
<div [class]="'uk-background-norepeat uk-background-cover uk-section uk-flex uk-flex-middle '+searchFormClass" >
<div class="uk-width-1-1">
<div class="uk-width-1-1">
<search-form [isDisabled]="disableForms" [(keyword)]="searchUtils.keyword" (keywordChange)="keywordChanged($event)" [placeholderText]="formPlaceholderText"></search-form>
</div>
<div class="uk-width-1-1 uk-light">
<div *ngIf="isFiltered()" class = "uk-container uk-text-center ">
<span *ngIf = "searchUtils.keyword.length > 0">Keywords: <span>{{searchUtils.keyword}}<a (click) = "clearKeywords() " [class]="(disableForms)?'uk-icon-button uk-disabled':'uk-icon-button'"><span class=" clickable " aria-hidden="true"><span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg>
</span></span></a></span>
</span>
<span *ngFor="let filter of filters " >
<span *ngIf = "filter.countSelectedValues > 0"> {{filter.title}}:
<span *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; " >{{value.name}}<a (click) = "removeFilter(value, filter) " [class]="(disableForms)?'uk-icon-button uk-disabled':'uk-icon-button'"><span class=" clickable" aria-hidden="true"><span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg>
</span></span></a>
<span *ngIf="!end">, </span>
</span>
</span>
</span>
<div [class]="'uk-background-norepeat uk-background-cover uk-section uk-flex uk-flex-middle '+searchFormClass" >
<div class="uk-width-1-1">
<div class="uk-width-1-1">
<search-form [isDisabled]="disableForms" [(keyword)]="searchUtils.keyword" (keywordChange)="keywordChanged($event)" [placeholderText]="formPlaceholderText"></search-form>
</div>
<div class="uk-width-1-1 uk-light">
<div *ngIf="isFiltered()" class = "uk-container uk-text-center ">
<span *ngIf = "searchUtils.keyword.length > 0">Keywords: <span>{{searchUtils.keyword}}<a (click) = "clearKeywords() " [class]="(disableForms)?'uk-icon-button uk-disabled':'uk-icon-button'"><span class=" clickable " aria-hidden="true"><span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg>
</span></span></a></span>
</span>
<span *ngFor="let filter of filters " >
<span *ngIf = "filter.countSelectedValues > 0"> {{filter.title}}:
<span *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; " >{{value.name}}<a (click) = "removeFilter(value, filter) " [class]="(disableForms)?'uk-icon-button uk-disabled':'uk-icon-button'"><span class=" clickable" aria-hidden="true"><span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg>
</span></span></a>
<span *ngIf="!end">, </span>
</span>
</span>
</span>
<a (click)="clearFilters()" [class]="(disableForms)?'uk-disabled uk-link-muted':''">
Clear All
</a>
</div>
</div>
</div>
</div>
<div class="uk-container">
<!--div *ngIf="searchUtils.status == errorCodes.NONE" class="uk-alert uk-alert-primary uk-animation-fade uk-margin-top" role="alert">No Results found</div>
<div *ngIf="searchUtils.status == errorCodes.ERROR" class="uk-alert uk-alert-warning uk-animation-fade uk-margin-top" role="alert">An Error Occured</div>
<div *ngIf="searchUtils.status == errorCodes.NOT_AVAILABLE" class="uk-alert uk-alert-danger uk-animation-fade uk-margin-top" role="alert">Service not available</div>
<div *ngIf="searchUtils.status == errorCodes.LOADING" class="uk-alert uk-alert-primary uk-animation-fade uk-margin-top" role="alert"
class="uk-animation-fade uk-margin-large-top uk-width-1-1" role="alert"><img src="./assets/loading.gif" class="uk-align-center" alt="Loading">
</div-->
<errorMessages [status]="[searchUtils.status]" [type]="'results'"></errorMessages>
<a (click)="clearFilters()" [class]="(disableForms)?'uk-disabled uk-link-muted':''">
Clear All
</a>
</div>
</div>
</div>
</div>
<div class="uk-container">
<helper position="top"></helper>
<errorMessages [status]="[searchUtils.status]" [type]="'results'"></errorMessages>
<div class="uk-grid uk-width-1-1 uk-margin">
<div class="uk-width-1-1">
<helper position="top"></helper>
</div>
<div *ngIf="searchUtils.totalResults > 0" class="uk-offcanvas-content uk-hidden@m">
<div class="uk-width-2-3@m uk-width-2-3@l uk-width-1-1@s uk-align-center uk-margin-remove-bottom">
<a href="#offcanvas-usage" uk-toggle><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><rect x="6" y="4" width="12" height="1"></rect><rect x="6" y="9" width="12" height="1"></rect><rect x="6" y="14" width="12" height="1"></rect><rect x="2" y="4" width="2" height="1"></rect><rect x="2" y="9" width="2" height="1"></rect><rect x="2" y="14" width="2" height="1"></rect></svg></a>
<div *ngIf="searchUtils.totalResults > 0" class="uk-offcanvas-content uk-hidden@m">
<a href="#offcanvas-usage" uk-toggle><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><rect x="6" y="4" width="12" height="1"></rect><rect x="6" y="9" width="12" height="1"></rect><rect x="6" y="14" width="12" height="1"></rect><rect x="2" y="4" width="2" height="1"></rect><rect x="2" y="9" width="2" height="1"></rect><rect x="2" y="14" width="2" height="1"></rect></svg></a>
<div id="offcanvas-usage" uk-offcanvas>
<div class="uk-offcanvas-bar">
<button class="uk-offcanvas-close" type="button" uk-close></button>
<div class="uk-text-large">Filter By:</div>
<search-filter *ngFor="let filter of filters " [addShowMore]=false [isDisabled]="disableForms" [filter]="filter" [showResultCount]=showResultCount (change)="filterChanged($event)" (toggleModal)="toggleModal($event)"></search-filter>
</div>
</div>
<div id="offcanvas-usage" uk-offcanvas>
<div class="uk-offcanvas-bar">
<button class="uk-offcanvas-close" type="button" uk-close></button>
<div class="uk-text-large">Filter By:</div>
<search-filter *ngFor="let filter of filters " [addShowMore]=false [isDisabled]="disableForms" [filter]="filter" [showResultCount]=showResultCount (change)="filterChanged($event)" (toggleModal)="toggleModal($event)"></search-filter>
</div>
</div>
</div>
<div *ngIf="searchUtils.totalResults > 0" class=" search-filters uk-width-1-5@l uk-width-1-5@m uk-width-1-1@s uk-margin-large-top uk-visible@m">
</div>
<div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom uk-padding uk-padding-remove-vertical uk-padding-remove-left">
<span class="uk-h6 uk-width-1-1@s uk-width-1-2@m">
{{searchUtils.totalResults}} content providers, page {{searchUtils.page}} of {{(totalPages())}}
</span>
<span class="float-children-right-at-medium margin-small-top-at-small uk-width-1-1@s uk-width-1-2@m">
<paging-no-load [currentPage]="searchUtils.page" [totalResults]="searchUtils.totalResults" [size]="rowsOnPage" (pageChange)="goTo($event.value, false)"></paging-no-load>
</span>
</div>
</div>
<div *ngIf="searchViewLink" class="uk-width-1-1@s uk-hidden@m">
<p>
<span class="uk-margin-small-right uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><rect x="2" y="2" width="3" height="3"></rect><rect x="8" y="2" width="3" height="3"></rect><rect x="14" y="2" width="3" height="3"></rect><rect x="2" y="8" width="3" height="3"></rect><rect x="8" y="8" width="3" height="3"></rect><rect x="14" y="8" width="3" height="3"></rect><rect x="2" y="14" width="3" height="3"></rect><rect x="8" y="14" width="3" height="3"></rect><rect x="14" y="14" width="3" height="3"></rect></svg></span>
<a routerLinkActive="router-link-active" [class]="(disableForms)?'uk-disabled uk-link-muted':''" [routerLink]=searchViewLink >
<span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="table" ratio="1"><rect x="1" y="3" width="18" height="1"></rect><rect x="1" y="7" width="18" height="1"></rect><rect x="1" y="11" width="18" height="1"></rect><rect x="1" y="15" width="18" height="1"></rect></svg></span>
</a>
</p>
<helper position="right"></helper>
</div>
<div class="uk-grid uk-width-1-1 uk-margin">
<div *ngIf="searchUtils.totalResults > 0" class=" search-filters uk-width-1-6@m uk-visible@m">
<helper position="left"></helper>
<search-filter *ngFor="let filter of filters " [isDisabled]="disableForms" [filter]="filter" [showResultCount]=showResultCount (change)="filterChanged($event)" (toggleModal)="toggleModal($event)"></search-filter>
</div>
</div>
<div class="uk-width-expand@m uk-width-1-1@s uk-first-column" >
<div class="uk-overflow-container custom-dataTable-content">
<table class="uk-table uk-table-striped divider-table" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage"
[mfData]="results | contentProvidersDatatable : [searchUtils, filters, triggerPipe]">
<thead *ngIf="searchUtils.totalResults > 0">
<tr><td colspan="5" class="uk-padding-remove">
<span class="uk-h6">
{{searchUtils.totalResults}} content providers, page {{searchUtils.page}} of {{(totalPages())}}
</span>
<paging-no-load class="uk-float-right" [currentPage]="searchUtils.page" [totalResults]="searchUtils.totalResults" [size]="rowsOnPage" (pageChange)="goTo($event.value, false)"></paging-no-load>
</td></tr>
<!--tr><td colspan="5" class="uk-padding-remove">
<search-download [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults" (downloadClick)="downloadClicked($event)"></search-download>
</td></tr-->
<div class="uk-width-2-3@m uk-width-1-1@s uk-first-column" >
<div class="uk-overflow-container custom-dataTable-content">
<table class="uk-table uk-table-striped divider-table" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage"
[mfData]="results | contentProvidersDatatable : [searchUtils, filters, triggerPipe]">
<thead *ngIf="searchUtils.totalResults > 0">
<tr>
<!-- Name Type Country Institution Compatibility -->
<th class="uk-text-left"><mfDefaultSorter by="title.name">Name</mfDefaultSorter>
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<polygon fill="#767779" points="4 1 1 6 7 6"></polygon>
<polygon fill="#767779" points="4 13 1 8 7 8"></polygon>
</svg>
</th>
<th class="uk-text-center"><mfDefaultSorter by="type">Type</mfDefaultSorter>
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<polygon fill="#767779" points="4 1 1 6 7 6"></polygon>
<polygon fill="#767779" points="4 13 1 8 7 8"></polygon>
</svg>
</th>
<th class="uk-text-center"><mfDefaultSorter by="countries">Country</mfDefaultSorter>
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<polygon fill="#767779" points="4 1 1 6 7 6"></polygon>
<polygon fill="#767779" points="4 13 1 8 7 8"></polygon>
</svg>
</th>
<th class="uk-text-center"><mfDefaultSorter [by]="sortByOrganization">Institution</mfDefaultSorter>
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<polygon fill="#767779" points="4 1 1 6 7 6"></polygon>
<polygon fill="#767779" points="4 13 1 8 7 8"></polygon>
</svg>
</th>
<th class="uk-text-center"><mfDefaultSorter by="compatibility">Compatibility</mfDefaultSorter>
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<polygon fill="#767779" points="4 1 1 6 7 6"></polygon>
<polygon fill="#767779" points="4 13 1 8 7 8"></polygon>
</svg>
</th>
<!-- Name Type Country Institution Compatibility -->
<th class="uk-text-left"><mfDefaultSorter by="title.name">Name</mfDefaultSorter>
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<polygon fill="#767779" points="4 1 1 6 7 6"></polygon>
<polygon fill="#767779" points="4 13 1 8 7 8"></polygon>
</svg>
</th>
<th class="uk-text-center"><mfDefaultSorter by="type">Type</mfDefaultSorter>
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<polygon fill="#767779" points="4 1 1 6 7 6"></polygon>
<polygon fill="#767779" points="4 13 1 8 7 8"></polygon>
</svg>
</th>
<th class="uk-text-center"><mfDefaultSorter by="countries">Country</mfDefaultSorter>
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<polygon fill="#767779" points="4 1 1 6 7 6"></polygon>
<polygon fill="#767779" points="4 13 1 8 7 8"></polygon>
</svg>
</th>
<th class="uk-text-center"><mfDefaultSorter [by]="sortByOrganization">Institution</mfDefaultSorter>
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<polygon fill="#767779" points="4 1 1 6 7 6"></polygon>
<polygon fill="#767779" points="4 13 1 8 7 8"></polygon>
</svg>
</th>
<th class="uk-text-center"><mfDefaultSorter by="compatibility">Compatibility</mfDefaultSorter>
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<polygon fill="#767779" points="4 1 1 6 7 6"></polygon>
<polygon fill="#767779" points="4 13 1 8 7 8"></polygon>
</svg>
</th>
</tr>
</thead>
<tbody *ngIf="searchUtils.totalResults > 0">
<tr class="uk-table-middle" *ngFor="let dataprovider of mf.data">
<td class="uk-width-1-5 uk-text-left">
<a [queryParams]="{datasourceId: dataprovider.id}" routerLinkActive="router-link-active" routerLink="/search/dataprovider">
<span *ngIf="dataprovider.title.name"
[innerHTML]="dataprovider.title.name">
</span>
<span *ngIf="!dataprovider.title.name">
[no title available]
</span>
</a>
</td>
<td class="uk-width-1-5 uk-text-center">
<span *ngIf="dataprovider.type">{{dataprovider.type}}</span>
<span *ngIf="!dataprovider.type">-</span>
</td>
<td class="uk-width-1-5 uk-text-center">
<span *ngFor="let country of dataprovider['countries'].slice(0,5) let i = index">{{country}}{{(i < ( dataprovider['countries'].slice(0,5).length-1))?", ":""}}{{(i == dataprovider['countries'].slice(0,5).length-1 && dataprovider['countries'].length > 5)?"...":""}}</span>
<span *ngIf="dataprovider.countries.length == 0">-</span>
</td>
<td class="uk-width-1-5 uk-text-center">
<span *ngFor="let org of dataprovider['organizations'].slice(0,5) let i = index">
<a *ngIf="org.id" [queryParams]="{organizationId: org.id}" routerLinkActive="router-link-active" routerLink="/search/organization">{{org.name}}</a><span *ngIf="!org.id">{{org.name}}</span>{{(i < ( dataprovider['organizations'].slice(0,5).length-1))?", ":""}}{{(i == dataprovider['organizations'].slice(0,5).length-1 && dataprovider['organizations'].length > 5)?"...":""}}
</span>
<span *ngIf="dataprovider.organizations.length == 0">-</span>
</td>
<td class="uk-width-1-5 uk-text-center">
<span *ngIf="dataprovider.compatibility">{{dataprovider.compatibility}}</span>
<span *ngIf="!dataprovider.compatibility">-</span>
</td>
</tr>
</tbody>
<!-- <thead *ngIf="searchUtils.totalResults > 0">
<tr><td colspan="5" class="uk-padding-remove-horizontal">
<span class="uk-h6">
{{searchUtils.totalResults}} content providers, page {{searchUtils.page}} of {{(totalPages())}}
</span>
<paging-no-load class="uk-float-right" [currentPage]="searchUtils.page" [totalResults]="searchUtils.totalResults" [size]="rowsOnPage" (pageChange)="goTo($event.value, false)"></paging-no-load>
</td></tr>
</thead> -->
</table>
</div>
</div>
<div *ngIf="searchViewLink" class="uk-width-1-6@m uk-visible@m">
<p>
</thead>
<tbody *ngIf="searchUtils.totalResults > 0">
<tr class="uk-table-middle" *ngFor="let dataprovider of mf.data">
<td class="uk-width-1-5 uk-text-left">
<a [queryParams]="{datasourceId: dataprovider.id}" routerLinkActive="router-link-active" routerLink="/search/dataprovider">
<span *ngIf="dataprovider.title.name"
[innerHTML]="dataprovider.title.name">
</span>
<span *ngIf="!dataprovider.title.name">
[no title available]
</span>
</a>
</td>
<td class="uk-width-1-5 uk-text-center">
<span *ngIf="dataprovider.type">{{dataprovider.type}}</span>
<span *ngIf="!dataprovider.type">-</span>
</td>
<td class="uk-width-1-5 uk-text-center">
<span *ngFor="let country of dataprovider['countries'].slice(0,5) let i = index">{{country}}{{(i < ( dataprovider['countries'].slice(0,5).length-1))?", ":""}}{{(i == dataprovider['countries'].slice(0,5).length-1 && dataprovider['countries'].length > 5)?"...":""}}</span>
<span *ngIf="dataprovider.countries.length == 0">-</span>
</td>
<td class="uk-width-1-5 uk-text-center">
<span *ngFor="let org of dataprovider['organizations'].slice(0,5) let i = index">
<a *ngIf="org.id" [queryParams]="{organizationId: org.id}" routerLinkActive="router-link-active" routerLink="/search/organization">{{org.name}}</a><span *ngIf="!org.id">{{org.name}}</span>{{(i < ( dataprovider['organizations'].slice(0,5).length-1))?", ":""}}{{(i == dataprovider['organizations'].slice(0,5).length-1 && dataprovider['organizations'].length > 5)?"...":""}}
</span>
<span *ngIf="dataprovider.organizations.length == 0">-</span>
</td>
<td class="uk-width-1-5 uk-text-center">
<span *ngIf="dataprovider.compatibility">{{dataprovider.compatibility}}</span>
<span *ngIf="!dataprovider.compatibility">-</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div *ngIf="searchViewLink" class="uk-margin-large-top uk-padding-remove-top uk-padding-remove-right uk-text-right">
<p>
<span class="uk-margin-small-right uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><rect x="2" y="2" width="3" height="3"></rect><rect x="8" y="2" width="3" height="3"></rect><rect x="14" y="2" width="3" height="3"></rect><rect x="2" y="8" width="3" height="3"></rect><rect x="8" y="8" width="3" height="3"></rect><rect x="14" y="8" width="3" height="3"></rect><rect x="2" y="14" width="3" height="3"></rect><rect x="8" y="14" width="3" height="3"></rect><rect x="14" y="14" width="3" height="3"></rect></svg></span>
<span class="uk-margin-small-right uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><rect x="2" y="2" width="3" height="3"></rect><rect x="8" y="2" width="3" height="3"></rect><rect x="14" y="2" width="3" height="3"></rect><rect x="2" y="8" width="3" height="3"></rect><rect x="8" y="8" width="3" height="3"></rect><rect x="14" y="8" width="3" height="3"></rect><rect x="2" y="14" width="3" height="3"></rect><rect x="8" y="14" width="3" height="3"></rect><rect x="14" y="14" width="3" height="3"></rect></svg></span>
<a routerLinkActive="router-link-active" [class]="(disableForms)?'uk-disabled uk-link-muted':''" [routerLink]=searchViewLink >
<span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="table" ratio="1"><rect x="1" y="3" width="18" height="1"></rect><rect x="1" y="7" width="18" height="1"></rect><rect x="1" y="11" width="18" height="1"></rect><rect x="1" y="15" width="18" height="1"></rect></svg></span>
</a>
</p>
<a routerLinkActive="router-link-active" [class]="(disableForms)?'uk-disabled uk-link-muted':''" [routerLink]=searchViewLink >
<span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="table" ratio="1"><rect x="1" y="3" width="18" height="1"></rect><rect x="1" y="7" width="18" height="1"></rect><rect x="1" y="11" width="18" height="1"></rect><rect x="1" y="15" width="18" height="1"></rect></svg></span>
</a>
</p>
<helper position="right"></helper>
</div>
</div>
<div class="uk-width-2-3@m uk-width-2-3@l uk-width-1-1@s uk-align-center uk-margin-remove-bottom">
<div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom uk-padding uk-padding-remove-vertical uk-padding-remove-left">
<span class="uk-h6 uk-width-1-1@s uk-width-1-2@m">
{{searchUtils.totalResults}} content providers, page {{searchUtils.page}} of {{(totalPages())}}
</span>
<span class="float-children-right-at-medium uk-width-1-1@s uk-width-1-2@m">
<paging-no-load [currentPage]="searchUtils.page" [totalResults]="searchUtils.totalResults" [size]="rowsOnPage" (pageChange)="goTo($event.value, false)"></paging-no-load>
</span>
</div>
</div>
<helper position="bottom"></helper>
</div>
</div>
<helper position="bottom"></helper>
</div>
<modal-search-filter [filter]="currentFilter" [showResultCount]=showResultCount (modalChange)="filterChanged($event)"></modal-search-filter>
</div>
</div>
<modal-search-filter [filter]="currentFilter" [showResultCount]=showResultCount (modalChange)="filterChanged($event)"></modal-search-filter>
</div>
</div>
</div>

8
portal-2/src/app/searchPages/searchUtils/searchPaging.component.ts
View File

@ -12,11 +12,11 @@ import {ErrorCodes} from '../../utils/properties/openaireProperties';
<div class="uk-h6 uk-width-1-1@s uk-width-1-2@m" *ngIf="!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING">
{{oldTotalResults}} {{type}}, page {{searchUtils.page}} of {{(totalPages(oldTotalResults))}}
</div>
<div class="uk-width-1-1@s uk-width-1-2@m" *ngIf="results && searchUtils.totalResults > searchUtils.size">
<paging class="uk-float-right" [currentPage]="searchUtils.page" [totalResults]="searchUtils.totalResults" [baseUrl]="baseUrl" [size]="searchUtils.size" [parameterNames] = "parameterNames" [parameterValues] = "parameterValues" > </paging>
<div class="float-children-right-at-medium margin-small-top-at-small uk-width-1-1@s uk-width-1-2@m" *ngIf="results && searchUtils.totalResults > searchUtils.size">
<paging [currentPage]="searchUtils.page" [totalResults]="searchUtils.totalResults" [baseUrl]="baseUrl" [size]="searchUtils.size" [parameterNames] = "parameterNames" [parameterValues] = "parameterValues" > </paging>
</div>
<div class="uk-width-1-1@s uk-width-1-2@m" *ngIf="!loadPaging && oldTotalResults > searchUtils.size && searchUtils.status == errorCodes.LOADING">
<paging class="uk-float-right" [currentPage]="searchUtils.page" [totalResults]="oldTotalResults" [baseUrl]="baseUrl" [size]="searchUtils.size" [parameterNames] = "parameterNames" [parameterValues] = "parameterValues" > </paging>
<div class="float-children-right-at-medium margin-small-top-at-small uk-width-1-1@s uk-width-1-2@m" *ngIf="!loadPaging && oldTotalResults > searchUtils.size && searchUtils.status == errorCodes.LOADING">
<paging [currentPage]="searchUtils.page" [totalResults]="oldTotalResults" [baseUrl]="baseUrl" [size]="searchUtils.size" [parameterNames] = "parameterNames" [parameterValues] = "parameterValues" > </paging>
</div>
</div>
`

13
portal-2/src/assets/discover-custom.css
View File

@ -89,6 +89,19 @@ h2 .custom-external {
.searchPaging {
min-height: 46px;
}
@media (min-width: 960px) {
.float-children-right-at-medium > * {
float: right;
}
}
@media (max-width: 959px) {
.margin-small-top-at-small {
margin-top: 10px !important;
}
}
.other-results {
min-height: 300px;
}