connect/src/app/my-communities/my-communities.component.html

<schema2jsonld [URL]="properties.domain + properties.baseLink"
               [logoURL]="properties.domain + properties.baseLink+'/assets/common-assets/logo-small-connect.png'" type="home"
               name="OpenAIRE Connect">
</schema2jsonld>
<div class="banner-background image-front-topbar uk-section uk-background-norepeat uk-background-bottom-center uk-background-cover uk-section-overlap uk-position-relative uk-preserve-color"
     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" tm-header-transparent-placeholder="">
  <div class="uk-section uk-padding-remove-bottom">
    <div class="uk-container uk-container-large uk-margin-small-top">
      <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
    </div>
    <div class="uk-position-relative uk-panel">
      <div *ngIf="loading" class="uk-container uk-container-large uk-height-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="!loading" class="uk-container uk-container-large">
        <h3 class="uk-text-center uk-text-bold">My Communities</h3>
        <div *ngIf="managerOfCommunities.length > 0 || subscriberOfCommunities.length > 0"
             class="uk-child-width-1-1@s uk-child-width-1-2@m uk-flex uk-flex-middle" uk-grid uk-height-match="target: .communityCard; row: false">
          <div>
            <div *ngIf="managerOfCommunities.length > 0" class="uk-grid">
              <h5 class="uk-width-1-1 uk-text-bold">You are managing</h5>
              <div class="uk-width-1-1 uk-margin-small-top">
                <div
                  class="uk-grid-match uk-grid-small  uk-child-width-1-3@s uk-child-width-1-2 uk-text-center"
                  uk-grid >
                  <div *ngFor="let community of managerOfCommunities.slice(0,3); let i = index">
                    <div class="uk-padding-small uk-card uk-card-default uk-card-small portalSearchCard"
                         title="{{community.description}}">
                      <browse-community [community]=community [smallTitle]="true" [showDescription]=false></browse-community>
                    </div>
                  </div>
                </div>
                <div *ngIf="managerOfCommunities.length > 3" class="uk-text-right uk-width-1-1 uk-margin-top">
                  <a [queryParams]="{role: quote('manager')}" class="uk-display-inline-block portal-link uk-text-uppercase uk-text-bold uk-text-small"
                     routerLinkActive="router-link-active" routerLink="/search/find/communities">
                    <span class="uk-flex uk-flex-middle">
                      <span>View all ({{managerOfCommunities.length | number}})</span>
                      <span uk-icon="chevron-right"></span>
                    </span>
                  </a>
                </div>
              </div>
            </div>

            <div class="uk-container uk-container-large uk-width-4-5">
              <div *ngIf="subscriberErrorMessage" class="uk-animation-fade uk-alert uk-alert-warning" role="alert">
                {{subscriberErrorMessage}}
              </div>
            </div>
            <div *ngIf="subscriberOfCommunities.length > 0" class="uk-grid">
              <h5 class="uk-width-1-1 uk-text-bold">You are subscribed to</h5>
              <div class="uk-width-1-1 uk-margin-small-top">
                <div
                  class="uk-grid-match uk-grid-small uk-child-width-1-3@s uk-child-width-1-2 uk-text-center"
                  uk-grid>
                  <div *ngFor="let community of subscriberOfCommunities.slice(0,3); let i = index">
                    <div class="uk-padding-small  uk-card uk-card-small uk-card-default portalSearchCard"
                         [attr.uk-tooltip]="((community.description) ? ('title: '+ community.description + '; pos: bottom-right') : 'cls: uk-invisible')">
                      <browse-community [community]=community [smallTitle]="true" [showDescription]=false></browse-community>
                    </div>
                  </div>
                </div>
                <div *ngIf="subscriberOfCommunities.length > 3" class="uk-text-right uk-width-1-1 uk-margin-top">
                  <a [queryParams]="{status: quote('subscribed')}" class="uk-display-inline-block portal-link uk-text-uppercase uk-text-bold uk-text-small"
                     routerLinkActive="router-link-active" routerLink="/search/find/communities">
                    <span class="uk-flex uk-flex-middle">
                      <span>View all ({{subscriberOfCommunities.length | number}})</span>
                      <span uk-icon="chevron-right"></span>
                    </span>
                  </a>
                </div>
              </div>

            </div>

          </div>
          <div class="uk-text-center">
            <img width="200" height="185" src="../../assets/connect-assets/banner/login.png">
          </div>
        </div>
        <div *ngIf="managerOfCommunities.length === 0 && subscriberOfCommunities.length === 0"
             class="uk-child-width-1-1" uk-grid>
          <div class="uk-flex uk-flex-center uk-margin-bottom">
            <div class="uk-card uk-card-default uk-box-shadow-medium uk-width-1-2@m">
              <div class="uk-card-body uk-text-bold uk-text-center ">
                You are not yet subscribed in any Communities.<br>
                Start by browsing and subscribing in those that you are interested in.
              </div>
            </div>
          </div>
          <div>
            <errorMessages [status]="[status]" [type]="'communities'"></errorMessages>
          </div>
          <div *ngIf="!loading && researchCommunities.length > 0">
            <h5 class="uk-text-bold">Community Gateways in Action</h5>
            <div [class]="(researchCommunities.length <= 5 ? ' uk-margin-medium-bottom' : '')">
              <div
                class="uk-grid-match uk-grid-medium  uk-child-width-1-5@m uk-child-width-1-2 uk-text-center"
                uk-grid uk-height-match=".community;">
                <div *ngFor="let community of researchCommunities.slice(0, 5); let i = index">
                  <div class="uk-padding-small uk-card uk-card-default portalSearchCard">
                    <browse-community [community]=community></browse-community>
                  </div>
                </div>
              </div>

            </div>
            <div class="uk-text-right uk-margin-top">
              <a *ngIf="researchCommunities.length > 5" class="portal-link uk-text-uppercase uk-text-bold uk-text-small"
                 routerLinkActive="router-link-active" routerLink="/search/find/communities">
                Browse All >
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>