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

<div class="image-front-topbar uk-section-muted uk-section-overlap uk-light" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-slide-top&quot;,&quot;delay&quot;:false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
  <div style="  background-color: #1e3040;" class=" mainPageSearchForm uk-background-norepeat uk-background-cover uk-background-top-center uk-background-fixed uk-section uk-section-large uk-padding-remove-bottom">
     <div class="tm-header-placeholder uk-margin-remove-adjacent" style="height: 84px;"></div>
     <div class="uk-grid-collapse uk-flex-middle uk-margin-remove-vertical uk-grid uk-grid-stack" uk-grid="">
        <div class="uk-width-1-1@m uk-first-column">
           <h5 class="uk-margin-large uk-text-center uk-h1 uk-scrollspy-inview uk-animation-slide-top" uk-scrollspy-class="" style="">
              Research Community Dashboard
           </h5>
           <h1 class="uk-text-center uk-h2 uk-scrollspy-inview uk-animation-slide-top" uk-scrollspy-class="" style="">
              Your view to open science
           </h1>
        </div>
     </div>
  </div>
</div>

  <div *ngIf= "communitiesResults != null && communitiesResults.length > 0">
    <div class="uk-container uk-margin-top uk-margin-bottom">
      <div class="uk-child-width-1-3@m uk-text-center uk-grid-match " uk-grid >
        <ng-container *ngFor="let item of communitiesResults; let i = index">
            <div *ngIf="showCommunity(item)" class="uk-card uk-card-default uk-margin-bottom uk-padding-remove">
              <span >
                <div class="uk-card-media-top">
                  <a *ngIf="!isProduction()" [queryParams]="{communityId: item.communityId}" routerLinkActive="router-link-active" routerLink="/" target="_blank">
                    <img *ngIf= "item.logoUrl != null && item.logoUrl != '' " src="{{item.logoUrl}}" alt="{{(item.title)?item.title:item.shortTitle}} logo"  class="uk-height-small uk-responsive-height ">
                     <span  *ngIf= "item.logoUrl == null || item.logoUrl == '' "  class="uk-icon   uk-margin-top">
                       <svg width="50" height="50" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="2.5"> <circle fill="none" stroke="#000" stroke-width="1.1" cx="7.7" cy="8.6" r="3.5"></circle> <path fill="none" stroke="#000" stroke-width="1.1" d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3"></path> <path fill="none" stroke="#000" stroke-width="1.1" d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"></path></svg>
                    </span>
                  </a>
                  <a *ngIf="isProduction()" href="{{'https://'+getProductionPrefix()+item.communityId+'.openaire.eu'}}" target="_blank">
                    <img *ngIf= "item.logoUrl != null && item.logoUrl != '' " src="{{item.logoUrl}}" alt="{{(item.title)?item.title:item.shortTitle}} logo"  class="uk-height-small uk-responsive-height ">
                     <span  *ngIf= "item.logoUrl == null || item.logoUrl == '' "  class="uk-icon   uk-margin-top">
                       <svg width="50" height="50" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="2.5"> <circle fill="none" stroke="#000" stroke-width="1.1" cx="7.7" cy="8.6" r="3.5"></circle> <path fill="none" stroke="#000" stroke-width="1.1" d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3"></path> <path fill="none" stroke="#000" stroke-width="1.1" d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"></path></svg>
                    </span>
                  </a>
                </div>
              </span>
              <div class="uk-card-body">
                <div>

                   <h3 class="uk-card-title">
                    <a *ngIf="!isProduction()" [queryParams]="{communityId: item.communityId}" routerLinkActive="router-link-active" routerLink="/" target="_blank">
                    {{(item.title)?item.title:item.shortTitle}}</a>
                    <a *ngIf="isProduction()" href="{{'https://'+getProductionPrefix()+item.communityId+'.openaire.eu'}}" target="_blank">
                    {{(item.title)?item.title:item.shortTitle}}</a>
                  </h3>
                </div>

                <!--div *ngIf="item.title != null">
                  <h3 class="uk-card-title"><a [queryParams]="{communityId: item.communityId}" routerLinkActive="router-link-active" routerLink="/community">
                    {{item.title}}</a></h3>
                </div>
                <div *ngIf="item.title == null && item.shortTitle != null">
                  <h3 class="uk-card-title"><a [queryParams]="{communityId: item.communityId}" routerLinkActive="router-link-active" routerLink="/community">
                    {{item.shortTitle}}</a></h3>
                </div-->
                <div *ngIf="item.status !='all'" class="uk-float-right" uk-tooltip="title: Community is hidden to registered users. It is visible only to users that have privileges to  manage community; delay: 100">
                  <span class="private-view-label uk-label uk-label-success " aria-expanded="false">Private view</span>
                </div>
                <div *ngIf="item.type =='ri'" class="" >
                  <span class="ri-label uk-label uk-label-info " aria-expanded="false">Research Initiative</span>
                </div>
                <div *ngIf="item.type !='ri'" class="" >
                  <span class="uk-label rc-label  uk-label-warning " aria-expanded="false">Research Community</span>
                </div>
                  <p *ngIf="item.description != null" >{{item.description}}</p>
                  <subscribe [communityId]="item.communityId"></subscribe>
                  <manage [communityId]="item.communityId"></manage>
              </div>
            </div>
        </ng-container>
      </div>
    </div>
</div>

<div class="uk-section-default" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}">
  <div class="mainPageBottomInfo uk-background-norepeat uk-background-cover uk-background-center-center uk-section uk-section-small ">
    <div class="uk-container">
         <div class="uk-grid-divider uk-margin-remove-vertical uk-grid" uk-grid="">

           <div class="uk-width-expand@m uk-width-1-2@s uk-dark uk-first-column">
              <h4 class="uk-margin-medium uk-text-center uk-h4 uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
                 A researcher?
              </h4>
              <div class=" uk-text-primary custom-uk-text-light uk-margin-medium uk-width-xlarge uk-margin-auto uk-text-center uk-text-lead uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
                 Explore all OA research results. Link all your research. Build your profile
              </div>
              <div id="page#37" class=" uk-margin-medium uk-text-center uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
                 <a class="explorelink el-content  uk-button uk-button-default uk-button-small" href="https://beta.explore.openaire.eu" target="_blank" style="">
                 OpenAIRE.EXPLORE
                 </a>
              </div>
           </div>

            <div class="uk-width-expand@m uk-width-1-2@s uk-dark uk-first-column">
               <h4 class="uk-margin-medium uk-text-center uk-h4 uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
                  A content provider?
               </h4>
               <div class=" uk-text-primary custom-uk-text-light uk-margin-medium uk-width-xlarge uk-margin-auto uk-text-center uk-text-lead uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
                  Join OpenAIRE, use our tools and make your content more visible around the world.
               </div>
               <div id="page#37" class=" uk-margin-medium uk-text-center uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
                  <a class="providelink el-content  uk-button uk-button-default uk-button-small" href="https://beta.provide.openaire.eu" target="_blank" style="">
                  OpenAIRE.PROVIDE
                  </a>
               </div>
            </div>
            <div class="uk-width-expand@m uk-width-1-2@s uk-dark">
               <h4 class="uk-margin-medium uk-text-center uk-h4 uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
                  A research manager?
               </h4>
               <div class="uk-text-primary custom-uk-text-light uk-margin-medium uk-width-xlarge uk-margin-auto uk-text-center uk-text-lead uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
                  Use our monitoring services and easily track all relevant research results.
               </div>
               <div id="page#41" class=" uk-margin-medium uk-text-center uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
                  <a class="monitorlink el-content uk-button uk-button-default uk-button-small" href="https://monitor.openaire.eu" target="_blank">
                  OpenAIRE.MONITOR
                  </a>
               </div>
            </div>          
            <div class="uk-width-expand@m uk-width-1-2@s uk-dark">
               <h4 class="uk-margin-medium uk-text-center uk-h4 uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
                  A developer?
               </h4>
               <div id="page#48" class="uk-text-primary custom-uk-text-light uk-margin-medium uk-width-xlarge uk-margin-auto uk-text-center uk-text-lead uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
                  Get access to OpenAIRE data and capitalize on Europe's open linked research.
               </div>
               <div id="page#49" class="  uk-margin-medium uk-text-center uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
                  <a class="developlink el-content uk-button uk-button-default uk-button-small" href="https://develop.openaire.eu" target="_blank">
                  OpenAIRE.DEVELOP
                  </a>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>