monitor/src/app/curators/curators.component.html

<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>

<ng-container *ngIf="longView else shortView">
  <div class="image-front-topbar  uk-section-default uk-position-relative"
       uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"
       tm-header-transparent="light">
    <div style=" min-height: 650px;" class="uk-section uk-padding-remove-bottom uk-flex uk-flex-middle">
      <div class="uk-align-center">
        <div class="uk-section">
          <div class="uk-container">
            <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
                    [texts]="pageContents['top']"></helper>
            <div *ngIf="showLoading" class="uk-margin-large">
              <div class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert"><span
                class="loading-gif  uk-align-center"></span></div>
            </div>
            <div *ngIf="!showLoading && curators.length > 0">
              <h4 class="uk-margin-top uk-h4">
                <span class="uk-text-bold">Curators</span>
                <span> ({{curators.length}})</span>
              </h4>
              <div *ngFor="let curator of curators let i=index;"
                   class="uk-width-1-1 uk-card uk-card-default uk-card-body uk-margin-top uk-animation-slide-top">
                <div
                  [class]="(curator.affiliations.length > 0 && curator.affiliations.length <= 2)?'uk-grid-divider uk-flex uk-flex-middle':''"
                  uk-grid>

                  <div class="uk-width-1-2 uk-first-column">
                    <div class="uk-flex uk-flex-middle">
                      <div>
                        <img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo"
                             src="{{downloadUrl + curator.photo}}" alt="Curator Photo">
                        <img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo"
                             src="../../assets/common-assets/curator-default.png" alt="Curator Photo">
                      </div>
                      <div class="uk-width-expand uk-margin-left uk-text-bold">
                        {{curator.name}}
                      </div>
                    </div>
                  </div>


                  <div *ngIf="(curator.affiliations.length > 0 && curator.affiliations.length <= 2)"
                       class="uk-width-1-2">
                    <div class="uk-flex uk-flex-middle">
                      <div class="uk-width-expand uk-margin-left uk-text-meta uk-flex-first">
                        Affiliations
                      </div>
                      <affiliations [longView]="false" [affiliations]="curator.affiliations"
                                    [affiliationsInSlider]="curator.affiliations.length"
                                    class="uk-width-2-3"></affiliations>
                    </div>
                  </div>

                  <div *ngIf="(curator.affiliations.length > 2)" class="uk-width-1-1 uk-margin-top">
                    <div class="uk-text-meta uk-margin-small-bottom">
                      Affiliations
                    </div>
                    <affiliations [longView]="false" [affiliations]="curator.affiliations"></affiliations>
                  </div>
                  <div class="uk-width-1-1 uk-first-column uk-margin-top uk-height-max-large uk-overflow-auto">
                    <div class="uk-text-meta uk-margin-small-bottom">
                      Biography
                    </div>
                    <div class="uk-margin-top">
                      <p *ngIf="showMore[i]" class="biography"> {{curator.bio}}}</p>
                      <p *ngIf="!showMore[i]" class="biography">{{_format(curator.bio)}}</p>
                    </div>
                  </div>
                  <div class="uk-width-1-1 uk-margin-top uk-text-right">
                    <a *ngIf="curator.bio.length > maxCharacters && !showMore[i]" class="uk-text-bold"
                       (click)="toggle(i)">
                      Show more
                    </a>
                    <a *ngIf="curator.bio.length > maxCharacters && showMore[i]" class="uk-text-bold"
                       (click)="toggle(i)">
                      Show less
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
                    [texts]="pageContents['bottom']"></helper>
          </div>
        </div>
      </div>
    </div>
  </div>
</ng-container>
<ng-template #shortView>
   <span *ngIf=" curators && curators.length > 0" class="lowOpacityColor  uk-width-1-1">
      Curators
    </span>
  <div class="uk-grid">
    <div *ngFor="let curator of curators let i=index;" class="uk-flex uk-flex-middle uk-width-1-2 uk-margin-small-top">
      <div>
        <img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo"
             src="{{downloadUrl + curator.photo}}" alt="Curator Photo">
        <img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo"
             src="../../assets/common-assets/curator-default.png" alt="Curator Photo">
      </div>
      <div class="uk-width-expand uk-margin-left">
        <a>{{curator.name}}</a>
        <div class="default-dropdown uk-margin-remove-top uk-padding-medium uk-width-medium"
             uk-dropdown="pos: bottom-left; mode:click; ">
          <div class="uk-grid uk-grid-stack">
            <div class="uk-first-column uk-flex uk-flex-middle uk-grid">
              <div>
                <img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo"
                     src="{{downloadUrl + curator.photo}}" alt="Curator Photo">
                <img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo"
                     src="../../assets/common-assets/curator-default.png" alt="Curator Photo">
              </div>
              <div class="uk-width-expand uk-h5 ignoreCommunityPanelBackground">
                {{curator.name}}
              </div>
            </div>
            <div *ngIf="curator.affiliations.length > 0" class="uk-width-1-1">
              <hr class="uk-margin-top">
              <span class="uk-text-left  uk-margin">
                Affiliations
              </span>
              <span> ({{curator.affiliations.length}})</span>
              <div class="uk-width-1-1">
                <affiliations [affiliations]="curator.affiliations"
                              [affiliationsInSlider]="2"
                              [arrows]="false"
                              [sliderOptions]="'autoplay: true; autoplay-interval: 2000'"></affiliations>
              </div>
            </div>
            <div class="uk-width-1-1">
              <a routerLink="/curators" class="uk-align-right uk-link ignoreCommunityPanelBackground">
                View more details
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</ng-template>