From b74ccacf034bdf14c66bb352b83783d8de2307b3 Mon Sep 17 00:00:00 2001
From: "konstantina.galouni"
 <konstantina.galouni@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Thu, 13 Jun 2019 14:14:11 +0000
Subject: [PATCH] [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
---
 landingPages/dataset/dataset.component.html   | 12 +++++-----
 landingPages/orp/orp.component.html           | 12 +++++-----
 .../publication/publication.component.html    | 12 +++++++---
 landingPages/software/software.component.html | 12 +++++-----
 utils/authors/showAuthors.component.ts        | 24 +++++++++++--------
 5 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/landingPages/dataset/dataset.component.html b/landingPages/dataset/dataset.component.html
index 837941e5..2d443b86 100644
--- a/landingPages/dataset/dataset.component.html
+++ b/landingPages/dataset/dataset.component.html
@@ -55,13 +55,8 @@
                 </li>
             </ul>
             <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 *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" class="uk-text-right">
                 <a (click)="showNumDescription = datasetInfo.description.length;">
@@ -69,6 +64,11 @@
                 </a>
               </span>
             </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-inline">
diff --git a/landingPages/orp/orp.component.html b/landingPages/orp/orp.component.html
index e1a59958..8c24e01b 100644
--- a/landingPages/orp/orp.component.html
+++ b/landingPages/orp/orp.component.html
@@ -42,13 +42,8 @@
               </li>
             </ul>
             <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 *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" class="uk-text-right">
                 <a (click)="showNumDescription = orpInfo.description.length;">
@@ -56,6 +51,11 @@
                 </a>
               </span>
             </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>
               <li *ngIf="orpInfo.references" (click)="activeTab='References'">
diff --git a/landingPages/publication/publication.component.html b/landingPages/publication/publication.component.html
index 6d5ea332..a2c7ba92 100644
--- a/landingPages/publication/publication.component.html
+++ b/landingPages/publication/publication.component.html
@@ -46,20 +46,26 @@
                 </li>
               </ul>
               <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 *ngIf="showNumDescription > thresholdDescription">
+                ><!--span *ngIf="showNumDescription > thresholdDescription">
                   <a (click)="showNumDescription = thresholdDescription; scroll()">
                     View less
                   </a>
                 </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">
                   <a (click)="showNumDescription = publicationInfo.description.length;">
                     View more
                   </a>
                 </span>
               </div>
+              <div *ngIf="publicationInfo.description && showNumDescription > thresholdDescription" class="uk-width-1-1 uk-text-right">
+                <!-- scroll() -->
+                <a (click)="showNumDescription = thresholdDescription;">
+                  View less
+                </a>
+              </div>
 
 
 
diff --git a/landingPages/software/software.component.html b/landingPages/software/software.component.html
index 50dfb46c..f18fe3f7 100644
--- a/landingPages/software/software.component.html
+++ b/landingPages/software/software.component.html
@@ -53,13 +53,8 @@
                 </li>
             </ul>
             <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 *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" class="uk-text-right">
                 <a (click)="showNumDescription = softwareInfo.description.length;">
@@ -67,6 +62,11 @@
                 </a>
               </span>
             </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">
                 <button class="uk-button uk-button-small uk-button-action">
diff --git a/utils/authors/showAuthors.component.ts b/utils/authors/showAuthors.component.ts
index 9d15ac25..1289cee8 100644
--- a/utils/authors/showAuthors.component.ts
+++ b/utils/authors/showAuthors.component.ts
@@ -7,18 +7,18 @@ import {EnvProperties}    from '../properties/env-properties';
 @Component({
   selector: 'showAuthors',
   template: `
-      <span *ngIf="authors != undefined">
-        <div *ngIf="showAll && numberOfAuthors > authorsLimit">
+      <div *ngIf="authors != undefined" class="uk-height-max-medium uk-overflow-auto">
+        <!--div *ngIf="showAll && numberOfAuthors > authorsLimit">
           <a (click)="numberOfAuthors = authorsLimit;">View less authors</a>
-        </div>
-        
+        </div-->
+
         <span *ngFor="let author of authors.slice(0,numberOfAuthors) let i=index">
           <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
-          ><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;">
             <b class="uk-margin-top">{{author.fullName}}</b>
-          
+
             <div>
               <div class="uk-text-muted">ORCID</div>
               <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>
               </span>
             </div>
-            
+
             <hr>
             <div class="uk-margin-top">
               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
           </a>
         </span>
-        <span *ngIf="showAll && numberOfAuthors > authorsLimit">
+        <!--span *ngIf="showAll && numberOfAuthors > authorsLimit">
           <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>
     `
 
 })