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

<div *ngIf="loading" 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="!loading" class="image-front-topbar  uk-section-secondary 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  style=" min-height: calc(7.89999px + 60vh);"
        class=" mainPageSearchForm uk-background-norepeat uk-background-cover uk-section uk-padding-remove-bottom" >
    <div class="uk-position-cover" style=""></div>
    <div class="uk-position-relative uk-panel">
      <div class="uk-container uk-section">
        <div *ngIf="managerOfCommunities.length > 0 || subscriberOfCommunities.length > 0">
          <h3 class="uk-margin-large-top">My Communities</h3>
          <div *ngIf="managerOfCommunities.length > 0">
            <h5 class="uk-margin-remove-bottom">You are managing</h5>
            <div class="uk-container">

              <div class="uk-grid-match uk-grid-small  uk-child-width-1-5@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community-title">
                <div *ngFor="let community of managerOfCommunities.slice(0,3); let i = index">
                  <div  class="uk-padding-small uk-height-max-medium uk-card uk-card-default"
                        [attr.uk-tooltip]="((community.description) ? ('title: '+ community.description) : 'cls: uk-invisible')">
                      <browse-community [community]="community" [showDescription]="false" [isManager]="true"></browse-community>
                  </div>
                </div>
              </div>

            </div>
            <div *ngIf="managerOfCommunities.length > 3" class="uk-text-right uk-width-3-5">
              <a [queryParams]="{role: quote('manager')}" routerLinkActive="router-link-active" routerLink="/search/find/communities">
                <u>View all {{managerOfCommunities.length | number}} ></u>
              </a>
            </div>
          </div>

          <div class="uk-container uk-margin uk-margin-small-left 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">
            <h5 class="uk-margin-remove-bottom uk-margin-small-top">You are subscribed to</h5>
            <div class="uk-container">

              <div class="uk-grid-match uk-grid-small  uk-child-width-1-5@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community-title">
                <div *ngFor="let community of subscriberOfCommunities.slice(0,3); let i = index">
                  <div  class="uk-padding-small uk-height-max-medium uk-card uk-card-default"
                        [attr.uk-tooltip]="((community.description) ? ('title: '+ community.description) : 'cls: uk-invisible')">
                      <browse-community [community]="community" [showDescription]="false"></browse-community>
                  </div>
                </div>
              </div>

            </div>
            <div *ngIf="subscriberOfCommunities.length > 3" class="uk-text-right uk-width-3-5">
              <a [queryParams]="{status: quote('subscribed')}" routerLinkActive="router-link-active" routerLink="/search/find/communities">
                <u>View all {{subscriberOfCommunities.length | number}} ></u>
              </a>
            </div>
          </div>

        </div>
        <div *ngIf="managerOfCommunities.length == 0 && subscriberOfCommunities.length == 0">
          <h3 class="uk-margin-remove-bottom uk-margin-large-top">Embrace Open Science with OpenAIRE Connect</h3>
          <h5 class="uk-margin-remove-top">A plattform to manage your community profile and to share, access and link community research results</h5>

          <!--div class="uk-width-medium uk-text-center uk-margin-large-top uk-margin-large-left">
            <h5>Create and manage your research community page</h5>
            <div>
              <a class="uk-button portal-button" [queryParams]="" routerLinkActive="router-link-active" routerLink="/how-to-create-community"> LEARN HOW</a>
            </div>
          </div-->

          <div class="uk-width-1-2 uk-inline uk-margin-large-top uk-margin-large-bottom">
            <div class="uk-position-center ">
              <div class="uk-width-medium uk-text-center">
                <h5>Create and manage your research community page</h5>
                <div>
                  <a class="uk-button portal-button" routerlink="/how-to-create-community" routerlinkactive="router-link-active" ng-reflect-router-link="/how-to-create-community" ng-reflect-router-link-active="router-link-active" href="/how-to-create-community"> LEARN HOW</a>
                </div>
              </div>
            </div>
            <br>
          </div>


        </div>
      </div>
    </div>
  </div>
</div>

<div *ngIf="!loading" class="uk-margin-top">
  <div class="">
    <div class="uk-margin-bottom uk-margin-medium-top">
        <div class="uk-container uk-margin-small-bottom">
          <h3>Search, share, link results of your research community</h3>
        </div>
        <div class="uk-container">
          <h5 class=" uk-width-expand uk-margin-remove-bottom">Start by locating your community</h5>
          <search-form class="uk-align-left" placeholderText="Start by locating your community" link="/search/find/communities"></search-form>
        </div>

        <div class="uk-container">
          <errorMessages [status]="[status]" [type]="'communities'"></errorMessages>
        </div>

        <div *ngIf= "researchCommunities.length > 0" class="uk-container uk-margin-medium-top">
          <h5 class="uk-width-expand">Browse Research Communities</h5>
          <div [class]="'uk-container uk-margin-top' + (researchCommunities.length <= 5 ? ' uk-margin-medium-bottom' : '')">

            <div class="uk-grid-match uk-grid-small  uk-child-width-1-5@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community-main">
              <div *ngFor="let community of researchCommunities.slice(0,5); let i = index">
                <div  class="uk-padding-small uk-height-max-medium uk-card uk-card-default">
                    <browse-community [community]="community"></browse-community>
                </div>
              </div>
            </div>

          </div>
          <div class="uk-text-right">
            <a *ngIf="researchCommunities.length > 5"
                [queryParams]="{type: quote('community')}" routerLinkActive="router-link-active" routerLink="/search/find/communities">
              <u>View all <span *ngIf="researchCommunities.length > 1">{{researchCommunities.length | number}}</span> Research Communities ></u>
            </a>
          </div>
        </div>

        <div *ngIf= "researchInitiatives.length > 0" class="uk-container portal-hr">
          <h5 class="uk-width-expand">Browse Research Initiatives</h5>
          <div class="uk-container uk-margin-top">

            <div class="uk-grid-match uk-grid-small  uk-child-width-1-5@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community-main">
              <div *ngFor="let community of researchInitiatives.slice(0,5); let i = index">
                <div  class="uk-padding-small uk-height-max-medium uk-card uk-card-default">
                    <browse-community [community]="community"></browse-community>
                </div>
              </div>
            </div>

          </div>
          <div class="uk-text-right">
            <a *ngIf="researchInitiatives.length > 5"
                [queryParams]="{type: quote('ri')}" routerLinkActive="router-link-active" routerLink="/search/find/communities">
              <u>View all <span *ngIf="researchInitiatives.length > 1">{{researchInitiatives.length | number}}</span> Research Initiatives ></u>
            </a>
          </div>
        </div>
    </div>
  </div>
</div>

<div class="uk-section-muted" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}">
    <div class="uk-container uk-container-large">
      <div uk-grid="" class="uk-grid uk-margin-large-top uk-margin-large-bottom">
        <div class="uk-width-expand@m uk-width-1-2@s uk-dark uk-grid-item-match uk-first-column explore">
          <div class="uk-margin uk-panel uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
            <h4 class="el-title uk-margin uk-h4">
              Researcher?
            </h4>
            <div class="el-content uk-margin">
              Explore all OA research results. Link all your research. Build your profile
            </div>
            <p>
              <a target="_blank" [href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.':'')+'explore.openaire.eu'" class="el-link uk-button uk-button-default">
                OpenAIRE.EXPLORE
              </a>
            </p>
          </div>
        </div>
        <div class="uk-width-expand@m uk-width-1-2@s uk-dark uk-grid-item-match uk-first-column provide">
          <div class="uk-margin uk-panel uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
            <h4 class="el-title uk-margin uk-h4">
              Content provider?
            </h4>
            <div class="el-content uk-margin">
              Join OpenAIRE, use our tools and make your content more visible around the world.
            </div>
            <p>
              <a target="_blank" [href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.':'')+'provide.openaire.eu'" class="el-link uk-button uk-button-default">
                OpenAIRE.PROVIDE
              </a>
            </p>
          </div>
        </div>

        <div class="uk-width-expand@m uk-width-1-2@s uk-dark uk-grid-item-match monitor">
          <div class="uk-margin uk-panel uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
            <h4 class="el-title uk-margin uk-h4">
              Research manager?
            </h4>
            <div class="el-content uk-margin">
              Use our monitoring services and easily track all relevant research results.
            </div>
            <p>
              <a target="_blank" [href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.openaire.eu/moniotr':'monitor.openaire.eu')" class="el-link uk-button uk-button-default">
                OpenAIRE.MONITOR
              </a>
            </p>
          </div>
        </div>
        <div class="uk-width-expand@m uk-width-1-2@s uk-dark uk-grid-item-match develop">
          <div class="uk-margin uk-panel uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
            <h4 class="el-title uk-margin uk-h4">
              Developer?
            </h4>
            <div class="el-content uk-margin">
              Get access to OpenAIRE data and capitalize on on Europe's open linked research
            </div>
            <p>
              <a target="_blank" href="https://develop.openaire.eu" class="el-link uk-button uk-button-default">
                OpenAIRE.DEVELOP
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>