Revision 58614
Added by Konstantinos Triantafyllou almost 4 years ago
| curators.component.html | ||
|---|---|---|
| 1 | 1 |
<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld> |
| 2 | 2 |
|
| 3 | 3 |
<ng-container *ngIf="longView else shortView"> |
| 4 |
<!-- <div class="image-front-topbar uk-section-default uk-position-relative"--> |
|
| 5 |
<!-- uk-scrollspy="{"target":"[uk-scrollspy-class]","cls":"uk-animation-fade","delay":false}"-->
|
|
| 6 |
<!-- tm-header-transparent="light">--> |
|
| 7 |
<!-- uk-flex uk-flex-middle--> |
|
| 8 |
<div style=" min-height: 650px;" class="communityBackground uk-section uk-padding-remove-top uk-padding-remove-bottom "> |
|
| 9 |
<div class="uk-align-center"> |
|
| 10 |
<breadcrumbs addClass="uk-margin-large-left uk-margin-remove-bottom uk-margin-small-top" [breadcrumbs]="breadcrumbs"></breadcrumbs> |
|
| 4 |
<!-- <div class="image-front-topbar uk-section-default uk-position-relative"--> |
|
| 5 |
<!-- uk-scrollspy="{"target":"[uk-scrollspy-class]","cls":"uk-animation-fade","delay":false}"-->
|
|
| 6 |
<!-- tm-header-transparent="light">--> |
|
| 7 |
<!-- uk-flex uk-flex-middle--> |
|
| 8 |
<div style=" min-height: 650px;" |
|
| 9 |
class="communityBackground uk-section uk-padding-remove-top uk-padding-remove-bottom "> |
|
| 10 |
<div class="uk-align-center"> |
|
| 11 |
<breadcrumbs addClass="uk-margin-large-left uk-margin-remove-bottom uk-margin-small-top" |
|
| 12 |
[breadcrumbs]="breadcrumbs"></breadcrumbs> |
|
| 11 | 13 |
|
| 12 |
<div class="uk-container uk-container-large"> |
|
| 13 |
<div *ngIf="showLoading" class="uk-margin-large"> |
|
| 14 |
<div class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert"><span |
|
| 15 |
class="loading-gif uk-align-center"></span></div> |
|
| 14 |
<div class="uk-container uk-container-large"> |
|
| 15 |
<div *ngIf="showLoading" class="uk-margin-large"> |
|
| 16 |
<div class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert"><span |
|
| 17 |
class="loading-gif uk-align-center"></span></div> |
|
| 18 |
</div> |
|
| 19 |
<!-- && curators.length > 0--> |
|
| 20 |
<div *ngIf="!showLoading"> |
|
| 21 |
<div class="uk-margin-medium-top uk-h2"> |
|
| 22 |
<span class="">Curators</span> |
|
| 23 |
<!-- <span> ({{curators.length}})</span>-->
|
|
| 24 |
</div> |
|
| 25 |
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0" |
|
| 26 |
[texts]="pageContents['top']"></helper> |
|
| 27 |
<div *ngFor="let curator of curators let i=index;" |
|
| 28 |
class="white-box-with-border uk-margin-top uk-animation-slide-top" uk-grid> |
|
| 29 |
<div class="uk-width-expand uk-padding uk-first-column"> |
|
| 30 |
<div class="uk-flex uk-flex-middle"> |
|
| 31 |
<div> |
|
| 32 |
<img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo" |
|
| 33 |
src="{{downloadUrl + curator.photo}}" alt="Curator Photo">
|
|
| 34 |
<img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo" |
|
| 35 |
src="../../assets/common-assets/curator-default.png" alt="Curator Photo"> |
|
| 36 |
</div> |
|
| 37 |
<div class="uk-width-expand uk-text-large uk-margin-left uk-text-bold"> |
|
| 38 |
{{curator.name}}
|
|
| 39 |
</div> |
|
| 40 |
</div> |
|
| 41 |
<div class="uk-margin-medium-top uk-height-max-large uk-overflow-auto"> |
|
| 42 |
<div class="uk-text-muted"> |
|
| 43 |
Biography |
|
| 44 |
</div> |
|
| 45 |
<div *ngIf="showMore[i]"> {{curator.bio}}}</div>
|
|
| 46 |
<div *ngIf="!showMore[i]">{{_format(curator.bio)}}</div>
|
|
| 47 |
<div class="uk-margin-top uk-text-right"> |
|
| 48 |
<a *ngIf="curator.bio.length > maxCharacters && !showMore[i]" class="uk-text-bold" |
|
| 49 |
(click)="toggle(i)"> |
|
| 50 |
Show more |
|
| 51 |
</a> |
|
| 52 |
<a *ngIf="curator.bio.length > maxCharacters && showMore[i]" class="uk-text-bold" |
|
| 53 |
(click)="toggle(i)"> |
|
| 54 |
Show less |
|
| 55 |
</a> |
|
| 56 |
</div> |
|
| 57 |
</div> |
|
| 16 | 58 |
</div> |
| 17 |
<!-- && curators.length > 0--> |
|
| 18 |
<div *ngIf="!showLoading"> |
|
| 19 |
<div class="uk-margin-medium-top uk-h2"> |
|
| 20 |
<span class="">Curators</span> |
|
| 21 |
<!-- <span> ({{curators.length}})</span>-->
|
|
| 22 |
</div> |
|
| 23 |
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0" |
|
| 24 |
[texts]="pageContents['top']"></helper> |
|
| 25 |
<div *ngFor="let curator of curators let i=index;" |
|
| 26 |
class="uk-width-1-1 uk-card uk-card-default uk-card-body uk-margin-top uk-animation-slide-top"> |
|
| 27 |
<div |
|
| 28 |
[class]="(curator.affiliations.length > 0 && curator.affiliations.length <= 2)?'uk-grid-divider uk-flex uk-flex-middle':''" |
|
| 29 |
uk-grid> |
|
| 30 |
|
|
| 31 |
<div class="uk-width-1-2 uk-first-column"> |
|
| 32 |
<div class="uk-flex uk-flex-middle"> |
|
| 33 |
<div> |
|
| 34 |
<img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo" |
|
| 35 |
src="{{downloadUrl + curator.photo}}" alt="Curator Photo">
|
|
| 36 |
<img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo" |
|
| 37 |
src="../../assets/common-assets/curator-default.png" alt="Curator Photo"> |
|
| 38 |
</div> |
|
| 39 |
<div class="uk-width-expand uk-margin-left uk-text-bold"> |
|
| 40 |
{{curator.name}}
|
|
| 41 |
</div> |
|
| 42 |
</div> |
|
| 59 |
<div class="uk-width-1-3@m uk-width-1-2@s uk-width-1-1 uk-padding"> |
|
| 60 |
<div class="uk-child-width-1-2 uk-flex uk-flex-middle" uk-grid> |
|
| 61 |
<div class="uk-text-muted uk-width-1-1"> |
|
| 62 |
Affiliations |
|
| 43 | 63 |
</div> |
| 44 |
|
|
| 45 |
|
|
| 46 |
<div *ngIf="(curator.affiliations.length > 0 && curator.affiliations.length <= 2)" |
|
| 47 |
class="uk-width-1-2"> |
|
| 48 |
<div class="uk-flex uk-flex-middle"> |
|
| 49 |
<div class="uk-width-expand uk-margin-left uk-text-meta uk-flex-first"> |
|
| 50 |
Affiliations |
|
| 51 |
</div> |
|
| 52 |
<affiliations [longView]="false" [affiliations]="curator.affiliations" |
|
| 53 |
[affiliationsInSlider]="curator.affiliations.length" |
|
| 54 |
class="uk-width-2-3"></affiliations> |
|
| 55 |
</div> |
|
| 56 |
</div> |
|
| 57 |
|
|
| 58 |
<div *ngIf="(curator.affiliations.length > 2)" class="uk-width-1-1 uk-margin-top"> |
|
| 59 |
<div class="uk-text-meta uk-margin-small-bottom"> |
|
| 60 |
Affiliations |
|
| 61 |
</div> |
|
| 62 |
<affiliations [longView]="false" [affiliations]="curator.affiliations"></affiliations> |
|
| 63 |
</div> |
|
| 64 |
<div class="uk-width-1-1 uk-first-column uk-margin-top uk-height-max-large uk-overflow-auto"> |
|
| 65 |
<div class="uk-text-meta uk-margin-small-bottom"> |
|
| 66 |
Biography |
|
| 67 |
</div> |
|
| 68 |
<div class="uk-margin-top"> |
|
| 69 |
<p *ngIf="showMore[i]" class="biography"> {{curator.bio}}}</p>
|
|
| 70 |
<p *ngIf="!showMore[i]" class="biography">{{_format(curator.bio)}}</p>
|
|
| 71 |
</div> |
|
| 72 |
</div> |
|
| 73 |
<div class="uk-width-1-1 uk-margin-top uk-text-right"> |
|
| 74 |
<a *ngIf="curator.bio.length > maxCharacters && !showMore[i]" class="uk-text-bold" |
|
| 75 |
(click)="toggle(i)"> |
|
| 76 |
Show more |
|
| 64 |
<div *ngFor="let affiliation of curator.affiliations"> |
|
| 65 |
<span *ngIf="!affiliation.website_url"> |
|
| 66 |
<img [src]="affiliation.logo_url" [alt]="affiliation.name"> |
|
| 67 |
</span> |
|
| 68 |
<a *ngIf="affiliation.website_url" [href]="affiliation.website_url"> |
|
| 69 |
<img [src]="affiliation.logo_url" [alt]="affiliation.name"> |
|
| 77 | 70 |
</a> |
| 78 |
<a *ngIf="curator.bio.length > maxCharacters && showMore[i]" class="uk-text-bold" |
|
| 79 |
(click)="toggle(i)"> |
|
| 80 |
Show less |
|
| 81 |
</a> |
|
| 82 | 71 |
</div> |
| 83 | 72 |
</div> |
| 84 | 73 |
</div> |
| 85 | 74 |
</div> |
| 86 |
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
|
|
| 87 |
[texts]="pageContents['bottom']"></helper>
|
|
| 88 |
</div>
|
|
| 75 |
</div>
|
|
| 76 |
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
|
|
| 77 |
[texts]="pageContents['bottom']"></helper>
|
|
| 89 | 78 |
</div> |
| 90 | 79 |
</div> |
| 91 |
<!-- </div>--> |
|
| 80 |
</div> |
|
| 81 |
<!-- </div>--> |
|
| 92 | 82 |
</ng-container> |
| 93 | 83 |
<ng-template #shortView> |
| 94 | 84 |
<div class="uk-grid"> |
| ... | ... | |
| 98 | 88 |
<span class="uk-width-expand uk-padding-remove space"> |
| 99 | 89 |
<span *ngFor="let curator of curators let i=index;"> |
| 100 | 90 |
<!-- <span>--> |
| 101 |
<!-- <img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo"--> |
|
| 102 |
<!-- src="{{downloadUrl + curator.photo}}" alt="Curator Photo">-->
|
|
| 103 |
<!-- <img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo"--> |
|
| 104 |
<!-- src="../../assets/common-assets/curator-default.png" alt="Curator Photo">--> |
|
| 105 |
<!-- </span>--> |
|
| 91 |
<!-- <img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo"-->
|
|
| 92 |
<!-- src="{{downloadUrl + curator.photo}}" alt="Curator Photo">-->
|
|
| 93 |
<!-- <img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo"-->
|
|
| 94 |
<!-- src="../../assets/common-assets/curator-default.png" alt="Curator Photo">-->
|
|
| 95 |
<!-- </span>-->
|
|
| 106 | 96 |
|
| 107 | 97 |
<a> |
| 108 | 98 |
<span class="user-circle-background"> |
| 109 | 99 |
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> |
| 110 |
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path> |
|
| 100 |
<path |
|
| 101 |
d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path> |
|
| 111 | 102 |
<path d="M0 0h24v24H0z" fill="none"></path> |
| 112 | 103 |
</svg> |
| 113 | 104 |
</span> |
| 114 | 105 |
{{curator.name}}
|
| 115 | 106 |
</a> |
| 116 | 107 |
<span class="default-dropdown uk-margin-remove-top uk-padding-medium uk-width-medium" |
| 117 |
uk-dropdown="pos: bottom-left; mode:click; "> |
|
| 108 |
uk-dropdown="pos: bottom-left; mode:click; ">
|
|
| 118 | 109 |
<span class="uk-grid uk-grid-stack"> |
| 119 | 110 |
<span class="uk-first-column uk-flex uk-flex-middle uk-grid"> |
| 120 | 111 |
<span> |
Also available in: Unified diff
[Connect | Trunk]: Change Curators and Organizations base on new mocks