Project

General

Profile

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]="urlPrefix(affiliation.website_url) + 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]="urlPrefix(affiliation.website_url) + 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>-->
(1-1/3)