MaDgIK
/
connect
13
0
Fork 0
Code Issues Pull Requests Projects Releases 14 Wiki Activity

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

This commit is contained in:
Alex Martzios 2022-06-22 14:08:38 +03:00
parent e3af56c95e
commit 9572597c5e
3 changed files with 81 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/app/curators/curators.component.html
View File

@ -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 class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert">
<span class="loading-gif uk-align-center"></span>
</div>
<div *ngIf="showLoading" class="uk-margin-large uk-padding-large uk-padding-remove-horizontal">
<loading></loading>
</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>

22
src/app/curators/curators.component.ts
View File

@ -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'");

5
src/app/curators/curators.module.ts
View File

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