70 lines
3.1 KiB
HTML
70 lines
3.1 KiB
HTML
<ng-template #card let-organization="organization" let-fullView="fullView">
|
|
<div [class]="fullView?'uk-card-body uk-height-1-1 uk-flex uk-flex-column uk-flex-around':''">
|
|
<div class="affiliation-logo">
|
|
<img *ngIf="organization.logo_url"
|
|
[src]="organization.logo_url | urlPrefix"
|
|
alt="{{(organization.name)?organization.name:''}} logo"
|
|
class="uk-blend-multiply uk-height-max-xsmall" loading="lazy">
|
|
</div>
|
|
<div class="affiliation-name multi-line-ellipsis lines-3" *ngIf="organization.name && fullView">
|
|
<p class="uk-text-emphasis uk-text-bold uk-margin-remove">
|
|
{{organization.name}}
|
|
</p>
|
|
</div>
|
|
</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@xl uk-child-width-1-4@l uk-child-width-1-3@m uk-child-width-1-2@s uk-text-center uk-grid"
|
|
uk-height-match="target: .affiliation-logo, .affiliation-name"
|
|
uk-scrollspy="cls: uk-animation-fade; target: .uk-card; repeat: false"
|
|
uk-grid>
|
|
<div *ngFor="let affiliation of affiliations;">
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-hover affiliationCard">
|
|
<a *ngIf="affiliation.website_url" target="_blank" [href]="affiliation.website_url | urlPrefix" class="uk-link-reset">
|
|
<ng-container *ngTemplateOutlet="card; context: { organization: affiliation, fullView: true}"></ng-container>
|
|
</a>
|
|
<span *ngIf="!affiliation.website_url" class="uk-link-reset">
|
|
<ng-container *ngTemplateOutlet="card; context: { organization: affiliation, fullView: true}"></ng-container>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="affiliations.length > 0 && communityFirstPage && !longView" class="uk-grid uk-grid-large" uk-grid>
|
|
<div class="uk-width-auto@m uk-width-1-1@s">
|
|
<h2 class="uk-h1">
|
|
Supporting <br> Organizations
|
|
</h2>
|
|
<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text uk-text-default uk-margin-top"
|
|
routerLinkActive="router-link-active" routerLink="/organizations">
|
|
<span class="uk-flex uk-flex-middle">
|
|
<span>Browse all</span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
<div class="uk-width-expand@m uk-width-1-1@s">
|
|
<div class="uk-grid uk-grid-large uk-child-width-1-3@m uk-child-width-1-2@s supportingOrganizations" uk-grid>
|
|
<div *ngFor="let affiliation of affiliations.slice(0,9);">
|
|
<a *ngIf="affiliation.website_url" target="_blank" [href]="affiliation.website_url | urlPrefix" class="uk-link-reset">
|
|
<ng-container *ngTemplateOutlet="card; context: {organization: affiliation, fullView: false}"></ng-container>
|
|
</a>
|
|
<span *ngIf="!affiliation.website_url" class="uk-link-reset">
|
|
<ng-container *ngTemplateOutlet="card; context: {organization: affiliation, fullView: false}"></ng-container>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<!--<div *ngIf="affiliations.length == 0 && longView" class="uk-animation-fade uk-alert uk-alert-primary" role="alert">-->
|
|
<!-- No affiliations available-->
|
|
<!--</div>-->
|