start on curators' modal info - awaiting finalization of the designs

src/app/curators/curators.component.html

@@ -7,10 +7,8 @@
 			</div>
 		</div>
 		<div class="uk-container uk-container-large uk-section uk-section-small">
-			<div *ngIf="showLoading" class="uk-margin-large">
+			<div *ngIf="showLoading" class="uk-margin-large uk-padding-large uk-padding-remove-horizontal">
-				<div class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert">
+				<loading></loading>
-					<span class="loading-gif uk-align-center"></span>
-				</div>
 			</div>
 			<div *ngIf="!showLoading">
 				<h1 class="uk-margin-top">
@@ -36,9 +34,23 @@
 										<h4 class="uk-margin-remove">{{curator.name}}</h4>
 										<div *ngIf="curator.bio" class="uk-margin-top uk-height-max-large uk-overflow-auto">
 											<div class="uk-text-muted uk-margin-small-bottom">
-												Biography
+												Biography <!-- {{curator.bio.length}} -->
 											</div>
-											<div *ngIf="showMore[i]">{{curator.bio}}}</div>
+											<div>
+												<div *ngIf="!viewingMore">{{_format(curator.bio)}}</div>
+												<div *ngIf="viewingMore">{{curator.bio}}</div>
+												<div *ngIf="curator.bio.length >= maxCharacters" class="uk-text-right uk-margin-small-top">
+													<a *ngIf="curator.bio.length >= maxCharacters && curator.bio.length <= 750"
+														(click)="viewMore()">
+														View {{viewingMore ? 'less' : 'more'}}
+													</a>
+													<a *ngIf="curator.bio.length >= 751"
+														(click)="openFsModal(curator)">
+														View details
+													</a>
+												</div>
+											</div>
+											<!-- <div *ngIf="showMore[i]">{{curator.bio}}}</div>
 											<div *ngIf="!showMore[i]">{{_format(curator.bio)}}</div>
 											<div class="uk-margin-top uk-text-right">
 												<a *ngIf="curator.bio.length > maxCharacters && !showMore[i]" class="uk-text-bold"
@@ -49,7 +61,7 @@
 														(click)="toggle(i)">
 													Show less
 												</a>
-											</div>
+											</div> -->
 										</div>
 									</div>
 								</div>
@@ -147,3 +159,38 @@
     </div>
   </div>
 </ng-template>
+<fs-modal #fsModal>
+	<div *ngIf="curatorInModal" class="uk-container uk-section uk-flex uk-flex-column uk-flex-middle">
+		<div class="uk-text-center">
+			<img *ngIf="curatorInModal.photo && curatorInModal.photo !== ''" class="uk-border-circle uk-margin-bottom" style="width: 160px; height: 160px;"
+				src="{{downloadUrl + curatorInModal.photo}}" alt="Curator Photo">
+			<img *ngIf="!curatorInModal.photo || curatorInModal.photo == ''" class="uk-border-circle uk-margin-bottom" style="width: 160px; height: 160px;"
+				src="../../assets/common-assets/curator-default.png" alt="Curator Photo">
+			<h4 class="uk-margin-remove">{{curatorInModal.name}}</h4>
+		</div>
+		<div class="uk-margin-medium-top uk-margin-medium-bottom">
+			<div class="uk-text-muted uk-margin-small-bottom">
+				Biography
+			</div>
+			<div>
+				{{curatorInModal.bio}}
+			</div>
+		</div>
+		<div *ngIf="curatorInModal.affiliations && curatorInModal.affiliations.length > 0">
+			<div class="uk-text-muted uk-margin-small-bottom uk-text-center">
+				Affiliations
+			</div>
+			<div class="uk-flex uk-flex-wrap uk-flex-middle uk-flex-center">
+				<ng-container *ngFor="let affiliation of curatorInModal.affiliations">
+					<span *ngIf="!affiliation.website_url">
+						<img [src]="affiliation.logo_url | urlPrefix" [alt]="affiliation.name">
+					</span>
+					<a *ngIf="affiliation.website_url"
+						target="_blank" [href]="affiliation.website_url | urlPrefix">
+						<img [src]="affiliation.logo_url | urlPrefix" [alt]="affiliation.name">
+					</a>
+				</ng-container>
+			</div>
+		</div>
+	</div>
+</fs-modal>

src/app/curators/curators.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, ViewChild} from '@angular/core';
 import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
 import {CuratorService} from "../openaireLibrary/connect/curators/curator.service";
 import {Curator} from "../openaireLibrary/utils/entities/CuratorInfo";
@@ -13,6 +13,7 @@ import {Breadcrumb} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.compo
 import {Subscription} from "rxjs";
 import {properties} from "../../environments/environment";
 import {UserRegistryService} from "../openaireLibrary/services/user-registry.service";
+import {FullScreenModalComponent} from '../openaireLibrary/utils/modal/full-screen-modal/full-screen-modal.component';
 
 @Component({
   selector: 'curators',
@@ -31,7 +32,9 @@ export class CuratorsComponent {
   public numberOfCurators: number = 5;
   
   public showMore = [];
-  public maxCharacters = 500;
+  public maxCharacters = 450;
+	public viewingMore: boolean = false;
+  public curatorInModal;
 
   public properties: EnvProperties;
   public pageContents = null;
@@ -44,6 +47,8 @@ export class CuratorsComponent {
   
   subs: Subscription[] = [];
 
+	@ViewChild('fsModal', { static: true }) fsModal: FullScreenModalComponent;
+  
   constructor(private route: ActivatedRoute,
               private curatorsService: CuratorService,
               private communityService: CommunityService,
@@ -128,6 +133,19 @@ export class CuratorsComponent {
     }
   }
 
+	public viewMore() {
+		this.viewingMore = !this.viewingMore;
+	}
+
+	public openFsModal(curator) {
+		this.curatorInModal = curator;
+		this.fsModal.open();
+	}
+
+	public closeFsModal() {
+		this.fsModal.close();
+	}
+  
   private updateDescription(description: string) {
     this._meta.updateTag({content: description}, "name='description'");
     this._meta.updateTag({content: description}, "property='og:description'");

src/app/curators/curators.module.ts

@@ -13,13 +13,16 @@ import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOServi
 import {PiwikServiceModule} from "../openaireLibrary/utils/piwik/piwikService.module";
 import {BreadcrumbsModule} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.module";
 import {UrlPrefixModule} from "../openaireLibrary/utils/pipes/url-prefix.module";
+import {LoadingModule} from '../openaireLibrary/utils/loading/loading.module';
+import {FullScreenModalModule} from '../openaireLibrary/utils/modal/full-screen-modal/full-screen-modal.module';
 
 @NgModule({
   imports: [
     CommonModule, FormsModule, RouterModule,
     CuratorsRoutingModule, AffiliationsModule, HelperModule,
     Schema2jsonldModule, SEOServiceModule, PiwikServiceModule,
-    BreadcrumbsModule, UrlPrefixModule
+    BreadcrumbsModule, UrlPrefixModule, LoadingModule,
+		FullScreenModalModule
   ],
   declarations: [
     CuratorsComponent