[Trunk | Library]:

publication.component & dataset.component & orp.component & software.component (Landing) & showAuthors.component: Add authors and description in scrollable containers if too long.


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@56074 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2019-06-13 14:14:11 +00:00
parent f1a97a93a4
commit b74ccacf03
5 changed files with 41 additions and 31 deletions

View File

@ -55,13 +55,8 @@
</li> </li>
</ul> </ul>
<hr *ngIf="datasetInfo.description" > <hr *ngIf="datasetInfo.description" >
<div *ngIf="datasetInfo.description" class="uk-margin-bottom uk-text-justify descriptionText"> <div *ngIf="datasetInfo.description" class="uk-text-justify descriptionText uk-height-max-medium uk-overflow-auto">
<span>{{datasetInfo.description.substring(0, showNumDescription)}}</span <span>{{datasetInfo.description.substring(0, showNumDescription)}}</span
><span *ngIf="showNumDescription > thresholdDescription">
<a (click)="showNumDescription = thresholdDescription; scroll()">
View less
</a>
</span
><span *ngIf="showNumDescription == thresholdDescription && datasetInfo.description.length > thresholdDescription">...</span ><span *ngIf="showNumDescription == thresholdDescription && datasetInfo.description.length > thresholdDescription">...</span
><span *ngIf="showNumDescription == thresholdDescription && datasetInfo.description.length > thresholdDescription" class="uk-text-right"> ><span *ngIf="showNumDescription == thresholdDescription && datasetInfo.description.length > thresholdDescription" class="uk-text-right">
<a (click)="showNumDescription = datasetInfo.description.length;"> <a (click)="showNumDescription = datasetInfo.description.length;">
@ -69,6 +64,11 @@
</a> </a>
</span> </span>
</div> </div>
<div *ngIf="datasetInfo.description && showNumDescription > thresholdDescription" class="uk-width-1-1 uk-text-right">
<a (click)="showNumDescription = thresholdDescription;">
View less
</a>
</div>
<!-- <div class="uk-clearfix"><div class="uk-float-right uk-margin-top"> <!-- <div class="uk-clearfix"><div class="uk-float-right uk-margin-top">
<div class="uk-inline"> <div class="uk-inline">

View File

@ -42,13 +42,8 @@
</li> </li>
</ul> </ul>
<hr *ngIf="orpInfo.description"> <hr *ngIf="orpInfo.description">
<div *ngIf="orpInfo.description" class="uk-margin-bottom uk-text-justify descriptionText"> <div *ngIf="orpInfo.description" class="uk-text-justify descriptionText uk-height-max-medium uk-overflow-auto">
<span>{{orpInfo.description.substring(0, showNumDescription)}}</span <span>{{orpInfo.description.substring(0, showNumDescription)}}</span
><span *ngIf="showNumDescription > thresholdDescription">
<a (click)="showNumDescription = thresholdDescription; scroll()">
View less
</a>
</span
><span *ngIf="showNumDescription == thresholdDescription && orpInfo.description.length > thresholdDescription">...</span ><span *ngIf="showNumDescription == thresholdDescription && orpInfo.description.length > thresholdDescription">...</span
><span *ngIf="showNumDescription == thresholdDescription && orpInfo.description.length > thresholdDescription" class="uk-text-right"> ><span *ngIf="showNumDescription == thresholdDescription && orpInfo.description.length > thresholdDescription" class="uk-text-right">
<a (click)="showNumDescription = orpInfo.description.length;"> <a (click)="showNumDescription = orpInfo.description.length;">
@ -56,6 +51,11 @@
</a> </a>
</span> </span>
</div> </div>
<div *ngIf="orpInfo.description && showNumDescription > thresholdDescription" class="uk-width-1-1 uk-text-right">
<a (click)="showNumDescription = thresholdDescription;">
View less
</a>
</div>
<ul class="custom-accordion" uk-accordion> <ul class="custom-accordion" uk-accordion>
<li *ngIf="orpInfo.references" (click)="activeTab='References'"> <li *ngIf="orpInfo.references" (click)="activeTab='References'">

View File

@ -46,20 +46,26 @@
</li> </li>
</ul> </ul>
<hr *ngIf="publicationInfo.description"> <hr *ngIf="publicationInfo.description">
<div *ngIf="publicationInfo.description" class="uk-margin-bottom uk-text-justify descriptionText"> <div *ngIf="publicationInfo.description" class="uk-text-justify descriptionText uk-height-max-medium uk-overflow-auto">
<span>{{publicationInfo.description.substring(0, showNumDescription)}}</span <span>{{publicationInfo.description.substring(0, showNumDescription)}}</span
><span *ngIf="showNumDescription > thresholdDescription"> ><!--span *ngIf="showNumDescription > thresholdDescription">
<a (click)="showNumDescription = thresholdDescription; scroll()"> <a (click)="showNumDescription = thresholdDescription; scroll()">
View less View less
</a> </a>
</span </span
><span *ngIf="showNumDescription == thresholdDescription && publicationInfo.description.length > thresholdDescription">...</span --><span *ngIf="showNumDescription == thresholdDescription && publicationInfo.description.length > thresholdDescription">...</span
><span *ngIf="showNumDescription == thresholdDescription && publicationInfo.description.length > thresholdDescription" class="uk-text-right"> ><span *ngIf="showNumDescription == thresholdDescription && publicationInfo.description.length > thresholdDescription" class="uk-text-right">
<a (click)="showNumDescription = publicationInfo.description.length;"> <a (click)="showNumDescription = publicationInfo.description.length;">
View more View more
</a> </a>
</span> </span>
</div> </div>
<div *ngIf="publicationInfo.description && showNumDescription > thresholdDescription" class="uk-width-1-1 uk-text-right">
<!-- scroll() -->
<a (click)="showNumDescription = thresholdDescription;">
View less
</a>
</div>

View File

@ -53,13 +53,8 @@
</li> </li>
</ul> </ul>
<hr *ngIf="softwareInfo.description" > <hr *ngIf="softwareInfo.description" >
<div *ngIf="softwareInfo.description" class="uk-margin-bottom uk-text-justify descriptionText"> <div *ngIf="softwareInfo.description" class="uk-text-justify descriptionText uk-height-max-medium uk-overflow-auto">
<span>{{softwareInfo.description.substring(0, showNumDescription)}}</span <span>{{softwareInfo.description.substring(0, showNumDescription)}}</span
><span *ngIf="showNumDescription > thresholdDescription">
<a (click)="showNumDescription = thresholdDescription; scroll()">
View less
</a>
</span
><span *ngIf="showNumDescription == thresholdDescription && softwareInfo.description.length > thresholdDescription">...</span ><span *ngIf="showNumDescription == thresholdDescription && softwareInfo.description.length > thresholdDescription">...</span
><span *ngIf="showNumDescription == thresholdDescription && softwareInfo.description.length > thresholdDescription" class="uk-text-right"> ><span *ngIf="showNumDescription == thresholdDescription && softwareInfo.description.length > thresholdDescription" class="uk-text-right">
<a (click)="showNumDescription = softwareInfo.description.length;"> <a (click)="showNumDescription = softwareInfo.description.length;">
@ -67,6 +62,11 @@
</a> </a>
</span> </span>
</div> </div>
<div *ngIf="softwareInfo.description && showNumDescription > thresholdDescription" class="uk-width-1-1 uk-text-right">
<a (click)="showNumDescription = thresholdDescription;">
View less
</a>
</div>
<!-- <div class="uk-clearfix"><div class="uk-button-group uk-float-right uk-margin-top"> <!-- <div class="uk-clearfix"><div class="uk-button-group uk-float-right uk-margin-top">
<button class="uk-button uk-button-small uk-button-action"> <button class="uk-button uk-button-small uk-button-action">

View File

@ -7,18 +7,18 @@ import {EnvProperties} from '../properties/env-properties';
@Component({ @Component({
selector: 'showAuthors', selector: 'showAuthors',
template: ` template: `
<span *ngIf="authors != undefined"> <div *ngIf="authors != undefined" class="uk-height-max-medium uk-overflow-auto">
<div *ngIf="showAll && numberOfAuthors > authorsLimit"> <!--div *ngIf="showAll && numberOfAuthors > authorsLimit">
<a (click)="numberOfAuthors = authorsLimit;">View less authors</a> <a (click)="numberOfAuthors = authorsLimit;">View less authors</a>
</div> </div-->
<span *ngFor="let author of authors.slice(0,numberOfAuthors) let i=index"> <span *ngFor="let author of authors.slice(0,numberOfAuthors) let i=index">
<i *ngIf="!author.orcid || (properties.environment == 'production')">{{author.fullName}}</i <i *ngIf="!author.orcid || (properties.environment == 'production')">{{author.fullName}}</i
><a *ngIf="author.orcid && (properties.environment != 'production')"> <img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="">{{" "}}<i>{{author.fullName}}</i></a ><a *ngIf="author.orcid && (properties.environment != 'production')"> <img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="">{{" "}}<i>{{author.fullName}}</i></a
><div *ngIf="author.orcid && (properties.environment != 'production')" class=" default-dropdown uk-margin-remove-top uk-padding-medium" ><div *ngIf="author.orcid && (properties.environment != 'production')" class=" default-dropdown uk-margin-remove-top uk-padding-medium"
uk-dropdown="pos: bottom-left; mode:click" style="min-width: 70px !important;"> uk-dropdown="pos: bottom-left; mode:click" style="min-width: 70px !important;">
<b class="uk-margin-top">{{author.fullName}}</b> <b class="uk-margin-top">{{author.fullName}}</b>
<div> <div>
<div class="uk-text-muted">ORCID</div> <div class="uk-text-muted">ORCID</div>
<span><code class="uk-padding-small" [id]="'orcid_clipboard_auhtor_'+i">{{author.orcid}}</code></span>{{" "}} <span><code class="uk-padding-small" [id]="'orcid_clipboard_auhtor_'+i">{{author.orcid}}</code></span>{{" "}}
@ -33,7 +33,7 @@ import {EnvProperties} from '../properties/env-properties';
</a> </a>
</span> </span>
</div> </div>
<hr> <hr>
<div class="uk-margin-top"> <div class="uk-margin-top">
Search <b>{{author.fullName}}</b> by <b>ORCID</b> in OpenAIRE's Search <b>{{author.fullName}}</b> by <b>ORCID</b> in OpenAIRE's
@ -71,10 +71,14 @@ import {EnvProperties} from '../properties/env-properties';
view all {{authors.length | number}} authors view all {{authors.length | number}} authors
</a> </a>
</span> </span>
<span *ngIf="showAll && numberOfAuthors > authorsLimit"> <!--span *ngIf="showAll && numberOfAuthors > authorsLimit">
<a (click)="numberOfAuthors = authorsLimit; scroll()">View less authors</a> <a (click)="numberOfAuthors = authorsLimit; scroll()">View less authors</a>
</span> </span-->
</span> </div>
<div *ngIf="authors != undefined && showAll && numberOfAuthors > authorsLimit" class="uk-width-1-1 uk-text-right">
<!--scroll()-->
<a (click)="numberOfAuthors = authorsLimit;">View less authors</a>
</div>
` `
}) })