start on curators, organizations, subjects pages - waiting for some details from Aristotelis

This commit is contained in:
Alex Martzios 2022-06-14 13:28:45 +03:00
parent 21f523fa9b
commit 1d5b995518
6 changed files with 96 additions and 79 deletions

View File

@ -1,77 +1,83 @@
<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld> <schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>
<ng-container *ngIf="longView else shortView"> <ng-container *ngIf="longView else shortView">
<div style=" min-height: 650px;" <div style=" min-height: 650px;">
class="uk-section uk-padding-remove-top"> <div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
<div class="uk-align-center"> <div class="uk-padding-small uk-padding-remove-horizontal">
<breadcrumbs addClass="uk-margin-large-left uk-margin-remove-bottom uk-margin-small-top" <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
[breadcrumbs]="breadcrumbs"></breadcrumbs> </div>
<div class="uk-container"> </div>
<div *ngIf="showLoading" class="uk-margin-large"> <div class="uk-container uk-container-large uk-section uk-section-small">
<div class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert"><span <div *ngIf="showLoading" class="uk-margin-large">
class="loading-gif uk-align-center"></span></div> <div class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert">
</div> <span class="loading-gif uk-align-center"></span>
<div *ngIf="!showLoading"> </div>
<h4 class="uk-margin-medium-top"> </div>
<span class="">Curators</span> <div *ngIf="!showLoading">
</h4> <h1 class="uk-margin-top">
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0" Curators
[texts]="pageContents['top']"></helper> </h1>
<div *ngIf="curators"> <div *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0" class="uk-margin-medium">
<div *ngFor="let curator of curators let i=index;" <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
class="white-box-with-border uk-margin-top uk-margin-remove-left uk-animation-fade" uk-grid> [texts]="pageContents['top']">
<div class="uk-width-expand uk-padding uk-first-column"> </helper>
<div class="uk-flex uk-flex-middle"> </div>
<div> <div *ngIf="curators" class="uk-margin-large-top">
<img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo" <div *ngFor="let curator of curators let i=index;" class="uk-card uk-card-default uk-padding">
src="{{downloadUrl + curator.photo}}" alt="Curator Photo"> <div class="uk-grid" uk-grid>
<img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo" <div class="uk-width-2-3 uk-flex uk-flex-middle">
src="../../assets/common-assets/curator-default.png" alt="Curator Photo"> <div class="uk-width-auto">
</div> <img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle" style="width: 160px; height: 160px;"
<div class="uk-width-expand uk-text-large uk-margin-left uk-text-bold"> src="{{downloadUrl + curator.photo}}" alt="Curator Photo">
{{curator.name}} <img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle" style="width: 160px; height: 160px;"
</div> src="../../assets/common-assets/curator-default.png" alt="Curator Photo">
</div> </div>
<div *ngIf="curator.bio" class="uk-margin-medium-top uk-height-max-large uk-overflow-auto"> <div class="uk-width-expand">
<div class="uk-text-muted"> <div class="uk-padding">
Biography <h4 class="uk-margin-remove">{{curator.name}}</h4>
</div> <div *ngIf="curator.bio" class="uk-margin-top uk-height-max-large uk-overflow-auto">
<div *ngIf="showMore[i]"> {{curator.bio}}}</div> <div class="uk-text-muted uk-margin-small-bottom">
<div *ngIf="!showMore[i]">{{_format(curator.bio)}}</div> Biography
<div class="uk-margin-top uk-text-right"> </div>
<a *ngIf="curator.bio.length > maxCharacters && !showMore[i]" class="uk-text-bold" <div *ngIf="showMore[i]">{{curator.bio}}}</div>
(click)="toggle(i)"> <div *ngIf="!showMore[i]">{{_format(curator.bio)}}</div>
Show more <div class="uk-margin-top uk-text-right">
</a> <a *ngIf="curator.bio.length > maxCharacters && !showMore[i]" class="uk-text-bold"
<a *ngIf="curator.bio.length > maxCharacters && showMore[i]" class="uk-text-bold" (click)="toggle(i)">
(click)="toggle(i)"> Show more
Show less </a>
</a> <a *ngIf="curator.bio.length > maxCharacters && showMore[i]" class="uk-text-bold"
</div> (click)="toggle(i)">
</div> Show less
</div> </a>
<div *ngIf="curator.affiliations && curator.affiliations.length > 0" class="uk-width-1-3@m uk-width-1-2@s uk-width-1-1 uk-padding"> </div>
<div class="uk-child-width-1-2 uk-flex uk-flex-middle" uk-grid> </div>
<div class="uk-text-muted uk-width-1-1"> </div>
Affiliations </div>
</div> </div>
<div *ngFor="let affiliation of curator.affiliations"> <div *ngIf="curator.affiliations && curator.affiliations.length > 0" class="uk-width-1-3 uk-padding" style="border-left: 1px solid #eaeaea">
<span *ngIf="!affiliation.website_url"> <div class="uk-text-muted uk-margin-bottom">
<img [src]="affiliation.logo_url | urlPrefix" [alt]="affiliation.name"> Affiliations
</span> </div>
<a *ngIf="affiliation.website_url" <div *ngFor="let affiliation of curator.affiliations" class="uk-margin-small-bottom">
target="_blank" [href]="affiliation.website_url | urlPrefix"> <span *ngIf="!affiliation.website_url">
<img [src]="affiliation.logo_url | urlPrefix" [alt]="affiliation.name"> <img [src]="affiliation.logo_url | urlPrefix" [alt]="affiliation.name">
</a> </span>
</div> <a *ngIf="affiliation.website_url"
</div> target="_blank" [href]="affiliation.website_url | urlPrefix">
</div> <img [src]="affiliation.logo_url | urlPrefix" [alt]="affiliation.name">
</div> </a>
</div> </div>
</div> </div>
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0" </div>
[texts]="pageContents['bottom']"></helper> </div>
</div> </div>
</div> </div>
<div class="uk-margin-medium">
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
[texts]="pageContents['bottom']">
</helper>
</div>
</div>
</div> </div>
</ng-container> </ng-container>
<ng-template #shortView> <ng-template #shortView>

View File

@ -40,7 +40,7 @@ export class CuratorsComponent {
public url: string = null; public url: string = null;
public pageTitle: string = "Curators"; public pageTitle: string = "Curators";
public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'About - curators'}]; public breadcrumbs: Breadcrumb[] = [{name: 'Home', route: '/'}, {name: 'About - Curators'}];
subs: Subscription[] = []; subs: Subscription[] = [];

View File

@ -4,7 +4,18 @@ import {Breadcrumb} from "../../openaireLibrary/utils/breadcrumbs/breadcrumbs.co
@Component({ @Component({
selector: 'organizations', selector: 'organizations',
template: ` template: `
<div class="uk-section tm-middle uk-padding-remove-top" id="tm-main"> <div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
<div class="uk-padding-small uk-padding-remove-horizontal">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
</div>
<div class="uk-container uk-container-large uk-section uk-section-small">
<h1 class="uk-margin-top uk-margin-bottom">Supporting <br> Organizations</h1>
<html-page description="Organizations" pageTitle="Supporting Organizations"></html-page>
<affiliations [longView]="true" [getAffiliationsFromAPI]="true"></affiliations>
</div>
<!-- <div class="uk-section tm-middle uk-padding-remove-top" id="tm-main">
<breadcrumbs [addClass]="'uk-margin-large-left uk-margin-remove-bottom uk-margin-small-top'" [breadcrumbs]="breadcrumbs"></breadcrumbs> <breadcrumbs [addClass]="'uk-margin-large-left uk-margin-remove-bottom uk-margin-small-top'" [breadcrumbs]="breadcrumbs"></breadcrumbs>
<div class="uk-container uk-container-large uk-margin-bottom"> <div class="uk-container uk-container-large uk-margin-bottom">
@ -12,11 +23,11 @@ import {Breadcrumb} from "../../openaireLibrary/utils/breadcrumbs/breadcrumbs.co
<html-page description="Organizations" pageTitle="Supporting Organizations"></html-page> <html-page description="Organizations" pageTitle="Supporting Organizations"></html-page>
<affiliations [longView]="true" [getAffiliationsFromAPI]="true"></affiliations> <affiliations [longView]="true" [getAffiliationsFromAPI]="true"></affiliations>
</div> </div>
</div> </div> -->
` `
}) })
export class OrganizationsPageComponent { export class OrganizationsPageComponent {
public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'about - supporting organizations'}]; public breadcrumbs: Breadcrumb[] = [{name: 'Home', route: '/'}, {name: 'About - Supporting Organizations'}];
constructor () {} constructor () {}
public ngOnInit() { public ngOnInit() {

@ -1 +1 @@
Subproject commit 658c96bb02308e0dec08178ce269fb4b14475bb8 Subproject commit ba70aaa12e83b281dfe51ac29130a51591702dcc

@ -1 +1 @@
Subproject commit ee3a9a4868bbdeb26d7a9c5ed15dbf8b2b765b39 Subproject commit 828b3c497335f14e6a4e8e91dad2577ee7d54fdd

@ -1 +1 @@
Subproject commit b2911eeaaf5f1a04a55353a3df5bf4d42a5fa7ca Subproject commit fb8db8d1d2bba0f68b52dc98996fd9f979c8aa63