1
|
<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>
|
2
|
|
3
|
<ng-template #card let-organization="organization" let-fullView="fullView">
|
4
|
<div class="affiliation-logo uk-flex uk-flex-middle uk-flex-center uk-padding-remove-horizontal"
|
5
|
[ngClass]="(!fullView)?'uk-card-body':'uk-card-media-top uk-padding-small'">
|
6
|
<div class="uk-align-center">
|
7
|
<img *ngIf="organization.logo_url != null && organization.logo_url != '' "
|
8
|
src="{{organization.logo_url}}" alt="{{(organization.name)?organization.name:''}} logo">
|
9
|
<span *ngIf="organization.logo_url == null || organization.logo_url == ''" class="uk-icon">
|
10
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" icon="image" ratio="2.5"><circle cx="16.1" cy="6.1"
|
11
|
r="1.1"></circle><rect
|
12
|
fill="none" stroke="#000" x="0.5" y="2.5" width="19" height="15"></rect><polyline fill="none" stroke="#000"
|
13
|
stroke-width="1.01"
|
14
|
points="4,13 8,9 13,14"></polyline><polyline
|
15
|
fill="none" stroke="#000" stroke-width="1.01" points="11,12 12.5,10.5 16,14"></polyline></svg>
|
16
|
</span>
|
17
|
</div>
|
18
|
</div>
|
19
|
<div *ngIf="organization.name && fullView" class="uk-card-body uk-padding-remove-horizontal uk-padding-remove-top">
|
20
|
<span class="uk-text-bold uk-text-small">{{organization.name.slice(0, 100)}}</span><span
|
21
|
*ngIf="organization.name.length > 100">...</span>
|
22
|
</div>
|
23
|
</ng-template>
|
24
|
|
25
|
<ng-container *ngIf="affiliations.length > 0">
|
26
|
<div *ngIf="showLoading" class="uk-animation-fade uk-width-1-1" role="alert">
|
27
|
<span class="loading-gif uk-align-center"></span>
|
28
|
</div>
|
29
|
<div *ngIf="longView"
|
30
|
class="uk-child-width-1-5@l uk-child-width-1-3@m uk-child-width-1-2@s
|
31
|
uk-text-center uk-grid-match uk-grid-small uk-grid-margin uk-margin-remove"
|
32
|
uk-height-match="target: > div > .uk-card > .affiliation-content > .affiliation-logo"
|
33
|
uk-scrollspy="cls: uk-animation-fade; target: > div > .uk-card; repeat: false"
|
34
|
uk-grid>
|
35
|
|
36
|
<div *ngFor="let affiliation of affiliations;">
|
37
|
<div class="uk-card communityCard">
|
38
|
<a *ngIf="affiliation.website_url" target="_blank" [href]="affiliation.website_url" class="affiliation-content">
|
39
|
<ng-container *ngTemplateOutlet="card; context: { organization: affiliation, fullView: true}"></ng-container>
|
40
|
</a>
|
41
|
<span *ngIf="!affiliation.website_url" class="affiliation-content">
|
42
|
<ng-container *ngTemplateOutlet="card; context: { organization: affiliation, fullView: true}"></ng-container>
|
43
|
</span>
|
44
|
</div>
|
45
|
</div>
|
46
|
</div>
|
47
|
|
48
|
<h3 *ngIf="communityFirstPage"
|
49
|
class="uk-margin-large-top uk-text-center uk-text-muted uk-text-bold">
|
50
|
Supporting Organizations
|
51
|
<!-- ({{affiliations.length}})-->
|
52
|
</h3>
|
53
|
|
54
|
<div *ngIf="!longView" [class]="'uk-position-relative uk-visible-toggle'" tabindex="-1"
|
55
|
[attr.uk-slider]="sliderOptions">
|
56
|
<div
|
57
|
[class]="'uk-align-center uk-width-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)+'-'+affiliationsInSlider">
|
58
|
<ul class="uk-slider-items uk-grid-small" uk-height-match="target: > li > .affiliation" uk-grid>
|
59
|
<li *ngFor="let affiliation of affiliations"
|
60
|
[class]="'affiliation-element uk-width-1-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)">
|
61
|
<div class="affiliation uk-flex uk-flex-middle uk-flex-center uk-padding-small"
|
62
|
[attr.uk-tooltip]="(affiliation.name) ? affiliation.name : 'cls: uk-invisible'">
|
63
|
<a *ngIf="affiliation.website_url" target="_blank" [href]="affiliation.website_url"
|
64
|
class="affiliation-content">
|
65
|
<ng-container
|
66
|
*ngTemplateOutlet="card; context: { organization: affiliation, fullView: false}"></ng-container>
|
67
|
</a>
|
68
|
<span *ngIf="!affiliation.website_url" class="affiliation-content">
|
69
|
<ng-container *ngTemplateOutlet="card; context: { organization: affiliation}"></ng-container>
|
70
|
</span>
|
71
|
</div>
|
72
|
</li>
|
73
|
</ul>
|
74
|
</div>
|
75
|
<!-- [class]="'uk-hidden-hover uk-position-center-left uk-padding uk-height-1-1 uk-flex uk-width-1-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)"-->
|
76
|
<!-- class="uk-position-center-right uk-padding uk-height-1-1 uk-flex"-->
|
77
|
<a *ngIf="(affiliations.length > affiliationsInSlider) && arrows"
|
78
|
class="uk-position-center-left uk-padding uk-height-1-1 uk-flex"
|
79
|
href="#" uk-slidenav-previous uk-slider-item="previous"></a>
|
80
|
<a *ngIf="(affiliations.length > affiliationsInSlider) && arrows"
|
81
|
class="uk-position-center-right uk-padding uk-height-1-1 uk-flex"
|
82
|
href="#" uk-slidenav-next uk-slider-item="next"></a>
|
83
|
</div>
|
84
|
<div *ngIf="communityFirstPage">
|
85
|
<a routerLink="/organizations" class="uk-align-right portal-link uk-flex uk-flex-middle">
|
86
|
<span>See Details</span>
|
87
|
<span uk-icon="chevron-right"></span>
|
88
|
</a>
|
89
|
</div>
|
90
|
</ng-container>
|
91
|
|
92
|
<!--<div *ngIf="affiliations.length == 0 && longView" class="uk-animation-fade uk-alert uk-alert-primary" role="alert">-->
|
93
|
<!-- No affiliations available-->
|
94
|
<!--</div>-->
|