From 6af7ae4797f79a6655aff523708d4145fb9909c6 Mon Sep 17 00:00:00 2001
From: "konstantina.galouni"
 <konstantina.galouni@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Fri, 8 May 2020 13:02:11 +0000
Subject: [PATCH] [Trunk | Connect]: 1. community.component: 	a. [Bug fix]
 Add 'uk-tab' and 'uk-active' class to load css without javascript enabled. 
 b. In tab 'Summary', reorder information - description goes on top. 	c. Cut
 description in first 500 characters, if length > 600, otherwise do not cut
 it. 2. curators.component: Add 'view all/ less' functionality.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@58653 d315682c-612b-4755-9ff5-7f18f6832af3
---
 src/app/community/community.component.html | 50 +++++++++++-----------
 src/app/community/community.component.ts   |  7 ++-
 src/app/curators/curators.component.html   | 27 ++++++++----
 src/app/curators/curators.component.ts     |  3 ++
 4 files changed, 54 insertions(+), 33 deletions(-)

diff --git a/src/app/community/community.component.html b/src/app/community/community.component.html
index 0dd58c8..90cfed1 100644
--- a/src/app/community/community.component.html
+++ b/src/app/community/community.component.html
@@ -253,8 +253,8 @@
 <!--        </div>-->
         <div>
           <div class="main-tabs-div">
-          <ul uk-tab class="uk-text-truncate main-tabs uk-margin-remove uk-child-width-expand uk-width-3-4" uk-switcher="connect: .main-tabs-content">
-            <li class="uk-padding-remove">
+          <ul uk-tab class="uk-tab uk-text-truncate main-tabs uk-margin-remove uk-child-width-expand uk-width-3-4" uk-switcher="connect: .main-tabs-content">
+            <li class="uk-padding-remove uk-active">
               <a class="uk-width-1-1 uk-height-1-1">
                 <div class="tab-header">Summary</div>
               </a>
@@ -297,9 +297,32 @@
           </ul>
           </div>
           <ul class="uk-switcher main-tabs-content">
-            <li>
+            <li class="uk-active">
               <div *ngIf="community" class="uk-grid uk-margin-remove">
                 <div class="uk-width-expand uk-padding uk-inline">
+                  <div *ngIf="community.description"
+                        class="uk-margin-bottom ">
+<!--                        [class]="'uk-margin-bottom '+ ((subscribeComponent && subscribeComponent.subscribers > 0) || community.date ? 'uk-margin-top' : '')">-->
+                    <div *ngIf="!showAllDescription" class="">
+                      {{community.description.substring(0, thresholdDescription)}}{{community.description.length > thresholdDescription ? '...' : ''}}</div>
+                    <div *ngIf="showAllDescription" class="uk-overflow-auto">
+                      <div class="uk-height-max-medium">{{community.description}}</div>
+                    </div>
+<!--                    uk-padding uk-padding-remove-top uk-position-bottom-right-->
+                    <div *ngIf="!showAllDescription && community.description.length > thresholdDescription "
+                         class="uk-animation-fade uk-margin-small-top uk-text-right">
+                      <a (click)="showAllDescription = !showAllDescription;">Read more
+                      </a>
+                    </div>
+<!--                    uk-padding uk-padding-remove-top uk-position-bottom-right-->
+                    <div *ngIf="showAllDescription"
+                         class="uk-animation-fade uk-margin-small-top uk-text-right">
+                      <a (click)="showAllDescription = !showAllDescription;">
+                        Read less
+                      </a>
+                    </div>
+                  </div>
+
                   <div *ngIf="isRouteEnabled('/curators')" [class]="community.managers ? 'uk-margin-small-bottom' : ''">
                     <curators [longView]="false" [managers]="community.managers" [communityId]="communityId"></curators>
                   </div>
@@ -358,27 +381,6 @@
                       </svg>
                     </span>
                   </div>
-
-                  <div *ngIf="community.description"
-                       [class]="'uk-margin-bottom '+ ((subscribeComponent && subscribeComponent.subscribers > 0) || community.date ? 'uk-margin-top' : '')">
-                    <div class="uk-text-muted">Description</div>
-                    <div *ngIf="!showAllDescription" class="">
-                      {{community.description.substring(0, thresholdDescription)}}{{community.description.length > thresholdDescription ? '...' : ''}}</div>
-                    <div *ngIf="showAllDescription" class="uk-overflow-auto">
-                      <div class="uk-height-max-medium">{{community.description}}</div>
-                    </div>
-                    <div *ngIf="!showAllDescription && community.description.length > thresholdDescription "
-                         class="uk-animation-fade uk-margin-small-top uk-padding uk-padding-remove-top uk-position-bottom-right">
-                      <a (click)="showAllDescription = !showAllDescription;">Read more
-                      </a>
-                    </div>
-                    <div *ngIf="showAllDescription"
-                         class="uk-animation-fade uk-margin-small-top uk-padding uk-padding-remove-top uk-position-bottom-right">
-                      <a (click)="showAllDescription = !showAllDescription;">
-                        Read less
-                      </a>
-                    </div>
-                  </div>
                 </div>
                 <div *ngIf="isRouteEnabled('/subjects') && community.subjects && community.subjects.length > 0"
                      class="uk-width-1-3 uk-padding right-column uk-inline">
diff --git a/src/app/community/community.component.ts b/src/app/community/community.component.ts
index 0129d1a..71298dc 100644
--- a/src/app/community/community.component.ts
+++ b/src/app/community/community.component.ts
@@ -65,7 +65,8 @@ export class CommunityComponent {
   zenodoCommunityIdS = [];
   showAllSubjects = false;
   showAllDescription = false;
-  public thresholdDescription: number = 550;
+  public thresholdDescription: number = 500;
+  public descriptionDiff: number = 100;
 
   subscribers: number = 0;
 
@@ -146,6 +147,10 @@ export class CommunityComponent {
                 HelperFunctions.scroll();
               }
               this.community = community;
+              if(community.description != null && (community.description.length - this.thresholdDescription <= this.descriptionDiff)) {
+                this.thresholdDescription = community.description.length;
+              }
+
               if (this.properties.environment == "development") {
                 this.params = {communityId: community.communityId};
               }
diff --git a/src/app/curators/curators.component.html b/src/app/curators/curators.component.html
index f18df71..c7e912c 100644
--- a/src/app/curators/curators.component.html
+++ b/src/app/curators/curators.component.html
@@ -84,12 +84,13 @@
   <!--  </div>-->
 </ng-container>
 <ng-template #shortView>
-  <div class="uk-grid">
-    <span *ngIf=" curators && curators.length > 0" class="lowOpacityColor uk-text-muted uk-width-auto">
+  <div *ngIf=" curators && curators.length > 0" class="uk-grid">
+    <span class="lowOpacityColor uk-text-muted uk-width-auto">
       Curated by:
     </span>
-    <span class="uk-width-expand uk-padding-remove space">
-      <span *ngFor="let curator of curators let i=index;">
+    <div class="uk-width-expand uk-padding-remove uk-overflow-auto">
+      <div class="uk-height-max-medium">
+      <span *ngFor="let curator of curators.slice(0,numberOfCurators) let i=index;" class="space uk-inline-block uk-text-top">
 <!--      <span>-->
         <!--        <img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo"-->
         <!--             src="{{downloadUrl + curator.photo}}" alt="Curator Photo">-->
@@ -97,7 +98,7 @@
         <!--             src="../../assets/common-assets/curator-default.png" alt="Curator Photo">-->
         <!--      </span>-->
 
-        <a class="uk-inline-block">
+        <a class="">
           <span class="user-circle-background">
             <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
               <path
@@ -105,7 +106,7 @@
               <path d="M0 0h24v24H0z" fill="none"></path>
             </svg>
           </span>
-          {{curator.name}}
+          <span class="space">{{curator.name}}</span>
         </a>
         <span class="default-dropdown uk-margin-remove-top uk-padding-medium uk-width-medium"
               uk-dropdown="pos: bottom-left; mode:click; ">
@@ -141,8 +142,18 @@
             </span>
           </span>
         </span>
-        <span *ngIf="i < curators.length-1">, </span>
+        <span *ngIf="i < curators.length-1 && i < numberOfCurators-1">, </span>
       </span>
-    </span>
+      <span *ngIf="numberOfCurators == curatorsLimit && curators.length > curatorsLimit">	... </span>
+      </div>
+    </div>
+    <div *ngIf="numberOfCurators == curatorsLimit && curators.length > curatorsLimit" class="uk-width-1-1 uk-text-right uk-margin-small-top">
+      <a (click)="numberOfCurators = curators.length;">
+        View all {{curators.length | number}} curators
+      </a>
+    </div>
+    <div *ngIf="numberOfCurators > curatorsLimit" class="uk-width-1-1 uk-text-right uk-margin-small-top">
+      <a (click)="numberOfCurators = curatorsLimit;">View less curators</a>
+    </div>
   </div>
 </ng-template>
diff --git a/src/app/curators/curators.component.ts b/src/app/curators/curators.component.ts
index 1dc3dec..6bc5e35 100644
--- a/src/app/curators/curators.component.ts
+++ b/src/app/curators/curators.component.ts
@@ -29,6 +29,9 @@ export class CuratorsComponent {
 
   public curators: Curator[];
 
+  public curatorsLimit: number = 5;
+  public numberOfCurators: number = 5;
+
   public showMore = [];
   public maxCharacters = 500;