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

Adjust results of search pages to expand when there is no csv or table-view or list-view on the right side or filters on the left side 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@49249 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2017-10-05 11:01:10 +00:00
parent fb90478c89
commit f3866f424a
5 changed files with 111 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,29 +20,37 @@
<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 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">
<helper class="helper-left-right uk-visible@m" position="left"></helper>
<div class="uk-width-expand@m uk-with-1-1@s">
<div class="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 *ngIf="searchUtils.totalResults <= 10000" class="uk-width-1-1@s uk-hidden@m" [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults" ></search-download>
<div class="uk-margin-top">
<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">
<div class="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>
<helper class="uk-hidden@m" position="left" styleName="uk-width-1-1@s"></helper>
<helper class="uk-hidden@m" position="right" styleName="uk-width-1-1@s"></helper>
</div>
<div *ngIf="searchUtils.totalResults <= 10000" class="uk-visible@m helper-left-right">
<search-download [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults" ></search-download>
<helper position="right"></helper>
</div>
<helper *ngIf="searchUtils.totalResults > 10000" class="helper-left-right uk-visible@m" position="right"></helper>
</div>
<div class="uk-width-1-1">
<helper position="bottom"></helper>
</div>

46
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-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>
@ -56,9 +56,20 @@
</div>
</div>
</div>
<div class="uk-grid uk-width-1-1">
<div *ngIf="showRefine" class="helper-left-right search-filters 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>
<helper *ngIf="!showRefine" class="helper-left-right uk-visible@m" position="left"></helper>
<div class="uk-width-expand@m uk-width-1-1@s uk-first-column">
<!-- <div [class]="(showRefine)?'uk-width-expand@m uk-first-column':''" > -->
<div class="uk-align-center uk-margin-remove-bottom">
<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">
@ -70,32 +81,26 @@
<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="uk-margin-top">
<search-result *ngIf="!tableView"
[results]="results"
[status]="searchUtils.status"
[type]="entityType" [urlParam]="urlParam"
[showLoading]="true">
</search-result>
</div>
<div class="uk-width-1-5@l uk-width-1-5@m uk-width-1-1@s uk-visible@m">
<div class="uk-align-center uk-margin-remove-bottom">
<search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils" [(results)] = "results" [(baseUrl)] = "baseUrl" [(parameterNames)] = "parameterNames" [(parameterValues)] = "parameterValues" ></search-paging>
</div>
<helper class="uk-hidden@m" position="left" styleName="uk-width-1-1@s"></helper>
<helper class="uk-hidden@m" position="right" styleName="uk-width-1-1@s"></helper>
</div>
<div *ngIf="tableViewLink || searchUtils.totalResults <=10000" class="helper-left-right 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>
@ -106,10 +111,11 @@
<search-download [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults"></search-download>
<helper position="right"></helper>
</div>
<helper *ngIf="!tableViewLink && searchUtils.totalResults > 10000" class="helper-left-right uk-visible@m" position="right"></helper>
</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> -->
<div class="uk-width-1-1">
<helper position="bottom"></helper>
</div>

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

@ -34,7 +34,7 @@
<helper position="top"></helper>
<errorMessages [status]="[searchUtils.status]" [type]="'results'"></errorMessages>
<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="uk-width-2-3@m uk-width-2-3@l uk-width-1-1@s">
<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>
@ -48,8 +48,17 @@
</div>
</div>
</div>
<div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom uk-padding uk-padding-remove-vertical uk-padding-remove-left">
<div class="uk-grid uk-width-1-1">
<div *ngIf="searchUtils.totalResults > 0" class="helper-left-right 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 class="uk-width-expand@m uk-width-1-1@s uk-first-column" >
<div class="uk-align-center uk-margin-remove-bottom">
<div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom">
<span class="uk-h6 uk-width-1-1@s uk-width-1-2@m">
{{searchUtils.totalResults}} content providers, page {{searchUtils.page}} of {{(totalPages())}}
</span>
@ -61,24 +70,14 @@
<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 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]">
@ -160,10 +159,24 @@
</thead> -->
</table>
</div>
</div>
<div *ngIf="searchViewLink" class="uk-width-1-6@m uk-visible@m">
<p>
<div class="uk-align-center uk-margin-remove-bottom">
<div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom">
<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>
<helper class="uk-hidden@m" position="left" styleName="uk-width-1-1@s"></helper>
<helper class="uk-hidden@m" position="right" styleName="uk-width-1-1@s"></helper>
</div>
<div *ngIf="searchViewLink" class="helper-left-right uk-width-1-6@m uk-visible@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 >
@ -174,16 +187,7 @@
<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>
<modal-search-filter [filter]="currentFilter" [showResultCount]=showResultCount (modalChange)="filterChanged($event)"></modal-search-filter>

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

@ -5,7 +5,7 @@ import {ErrorCodes} from '../../utils/properties/openaireProperties';
@Component({
selector: 'search-paging',
template: `
<div class= "searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom uk-padding uk-padding-remove-vertical uk-padding-remove-left">
<div class= "searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom">
<div class="uk-h6 uk-width-1-1@s uk-width-1-2@m" *ngIf="results && searchUtils.totalResults > 0">
{{searchUtils.totalResults}} {{type}}, page {{searchUtils.page}} of {{(totalPages(searchUtils.totalResults))}}
</div>

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

@ -89,6 +89,10 @@ h2 .custom-external {
.searchPaging {
min-height: 46px;
}
.helper-left-right {
margin-top: 75px;
max-width: 20%;
}
@media (min-width: 960px) {
.float-children-right-at-medium > * {