94 lines
5.6 KiB
HTML
94 lines
5.6 KiB
HTML
<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>
|
|
|
|
<ng-template #card let-organization="organization" let-fullView="fullView">
|
|
<div class="affiliation-logo uk-flex uk-flex-middle uk-flex-center uk-padding-remove-horizontal"
|
|
[ngClass]="(!fullView)?'uk-card-body':'uk-card-media-top uk-padding-small'">
|
|
<div class="uk-align-center">
|
|
<img *ngIf="organization.logo_url != null && organization.logo_url != '' "
|
|
src="{{organization.logo_url}}" alt="{{(organization.name)?organization.name:''}} logo">
|
|
<span *ngIf="organization.logo_url == null || organization.logo_url == ''" class="uk-icon">
|
|
<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"
|
|
r="1.1"></circle><rect
|
|
fill="none" stroke="#000" x="0.5" y="2.5" width="19" height="15"></rect><polyline fill="none" stroke="#000"
|
|
stroke-width="1.01"
|
|
points="4,13 8,9 13,14"></polyline><polyline
|
|
fill="none" stroke="#000" stroke-width="1.01" points="11,12 12.5,10.5 16,14"></polyline></svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="organization.name && fullView" class="uk-card-body uk-padding-remove-horizontal uk-padding-remove-top">
|
|
<span class="uk-text-bold uk-text-small">{{organization.name.slice(0, 100)}}</span><span
|
|
*ngIf="organization.name.length > 100">...</span>
|
|
</div>
|
|
</ng-template>
|
|
|
|
<ng-container *ngIf="affiliations.length > 0">
|
|
<div *ngIf="showLoading" class="uk-animation-fade uk-width-1-1" role="alert">
|
|
<span class="loading-gif uk-align-center"></span>
|
|
</div>
|
|
<div *ngIf="longView"
|
|
class="uk-child-width-1-5@l uk-child-width-1-3@m uk-child-width-1-2@s
|
|
uk-text-center uk-grid-match uk-grid-small uk-grid-margin uk-margin-remove"
|
|
uk-height-match="target: > div > .uk-card > .affiliation-content > .affiliation-logo"
|
|
uk-scrollspy="cls: uk-animation-fade; target: > div > .uk-card; repeat: false"
|
|
uk-grid>
|
|
|
|
<div *ngFor="let affiliation of affiliations">
|
|
<div class="uk-card uk-card-default uk-card-small uk-padding-small">
|
|
<a *ngIf="affiliation.website_url" target="_blank" [href]="affiliation.website_url" class="affiliation-content">
|
|
<ng-container *ngTemplateOutlet="card; context: { organization: affiliation, fullView: true}"></ng-container>
|
|
</a>
|
|
<span *ngIf="!affiliation.website_url" class="affiliation-content">
|
|
<ng-container *ngTemplateOutlet="card; context: { organization: affiliation, fullView: true}"></ng-container>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="communityFirstPage"
|
|
class="uk-margin-large-top uk-margin uk-text-center uk-text-large uk-text-meta uk-text-bold">
|
|
Related Organizations ({{affiliations.length}})
|
|
</div>
|
|
|
|
<div *ngIf="!longView" [class]="'uk-position-relative uk-visible-toggle'" tabindex="-1"
|
|
[attr.uk-slider]="sliderOptions">
|
|
<div
|
|
[class]="'uk-align-center uk-width-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)+'-'+affiliationsInSlider">
|
|
<ul class="uk-slider-items uk-grid-small" uk-height-match="target: > li > .uk-card" uk-grid>
|
|
<li *ngFor="let affiliation of affiliations"
|
|
[class]="'affiliation-element uk-width-1-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)">
|
|
<div class="uk-card uk-card-small uk-card-default uk-flex uk-flex-middle uk-flex-center uk-padding-small"
|
|
[attr.uk-tooltip]="(affiliation.name) ? affiliation.name : 'cls: uk-invisible'">
|
|
<a *ngIf="affiliation.website_url" target="_blank" [href]="affiliation.website_url"
|
|
class="affiliation-content">
|
|
<ng-container
|
|
*ngTemplateOutlet="card; context: { organization: affiliation, fullView: false}"></ng-container>
|
|
</a>
|
|
<span *ngIf="!affiliation.website_url" class="affiliation-content">
|
|
<ng-container *ngTemplateOutlet="card; context: { organization: affiliation}"></ng-container>
|
|
</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- [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)"-->
|
|
<!-- class="uk-position-center-right uk-padding uk-height-1-1 uk-flex"-->
|
|
<a *ngIf="(affiliations.length > affiliationsInSlider) && arrows"
|
|
class="uk-position-center-left uk-padding uk-height-1-1 uk-flex"
|
|
href="#" uk-slidenav-previous uk-slider-item="previous"></a>
|
|
<a *ngIf="(affiliations.length > affiliationsInSlider) && arrows"
|
|
class="uk-position-center-right uk-padding uk-height-1-1 uk-flex"
|
|
href="#" uk-slidenav-next uk-slider-item="next"></a>
|
|
</div>
|
|
<div *ngIf="communityFirstPage"
|
|
[class]="'uk-align-center uk-width-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)+'-'+affiliationsInSlider">
|
|
<a routerLink="/organizations" class="uk-align-right uk-link">
|
|
View more details
|
|
</a>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<!--<div *ngIf="affiliations.length == 0 && longView" class="uk-animation-fade uk-alert uk-alert-primary" role="alert">-->
|
|
<!-- No affiliations available-->
|
|
<!--</div>-->
|