[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

@@ -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">

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'">

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>
 
 
 

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">

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="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>
-        </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>
     `
 
 })