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

<div class="image-front-topbar uk-section-large banner-connect uk-background-norepeat uk-background-cover 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 class=" uk-section uk-padding-remove-bottom">
    <div class="uk-position-cover"></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-2" role="alert"><span class="loading-gif  uk-align-center" ></span></div>
      </div>
      <div *ngIf="!loading" class="uk-container uk-container-large">
        <div *ngIf="managerOfCommunities.length > 0 || subscriberOfCommunities.length > 0">
          <div *ngIf="managerOfCommunities.length > 0" uk-grid>
            <h5 class="uk-width-1-1 uk-text-bold">You are managing</h5>
            <div class="uk-width-1-2">
              <div class="uk-grid-match uk-grid-small  uk-child-width-1-3@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community">
                <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 communityCard"
                        [attr.uk-tooltip]="((community.description) ? ('title: '+ community.description + '; pos: bottom-right') : 'cls: uk-invisible')">
                      <browse-community [community]=community [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="portal-color uk-text-uppercase uk-text-bold"
                   routerLinkActive="router-link-active" routerLink="/search/find/communities">
                  <div>View all ({{managerOfCommunities.length | number}}) ></div>
                </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" uk-grid>
            <h5 class="uk-width-1-1 uk-text-bold">You are subscribed to</h5>
            <div class="uk-width-1-2">
              <div class="uk-grid-match uk-grid-small  uk-child-width-1-3@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community">
                <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 communityCard"
                        [attr.uk-tooltip]="((community.description) ? ('title: '+ community.description + '; pos: bottom-right') : 'cls: uk-invisible')">
                      <browse-community [community]=community [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="portal-color uk-text-uppercase uk-text-bold"
                   routerLinkActive="router-link-active" routerLink="/search/find/communities">
                  <div>View all ({{subscriberOfCommunities.length | number}}) ></div>
                </a>
              </div>
            </div>

          </div>

        </div>
        <div *ngIf="managerOfCommunities.length == 0 && subscriberOfCommunities.length == 0" uk-grid>
          <div class="uk-width-2-5">
            <h1 style="font-size: 41px">A <b>Gateway</b> to the future of your <b>Community</b></h1>
            <div class="uk-text-large">Turn Open Science into Practice. It takes your open and linked research outcomes. A service customized to your needs.</div>
          </div>
          <div class="uk-width-1-1 uk-inline uk-margin-large-top uk-margin-large-bottom">
              <a class="uk-button portal-button" routerLink="/learn-how" routerLinkActive="router-link-active"> LEARN HOW</a>
          </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-container-large uk-margin-large-bottom">
          <h1 class="uk-text-center uk-text-bold">Our mission for an Open and FAIR science</h1>
        </div>
        <div class="uk-container uk-container-large" uk-height-match=".target">
          <div class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-match uk-grid-medium uk-grid-margin" uk-grid>
            <div>
              <div class="uk-card uk-card-default uk-padding uk-padding-remove-bottom uk-padding-remove-horizontal connectInfoCard">
                <div class="uk-card-media-top target">
                  <img src="../../assets/2.png" class="uk-align-center" width="111" height="153">
                </div>
                <div class="uk-card-body uk-grid-divider uk-margin" uk-grid>
                  <div class="uk-width-1-1 uk-text-center target">
                    <h5 class="uk-text-bold">A Virtual Research Environment</h5>
                    <div>An overlay platform making it easy to share, link, disseminate and monitor all your publications, data, software, methods. In one place.</div>
                  </div>
                  <div class="uk-width-1-1">
                    <ul class="uk-list">
                      <li>
                        <span class="uk-border-circle connectCheckIcon" uk-icon="check">
                        </span>
                        Access to OpenAIRE resources
                      </li>
                      <li>
                        <span class="uk-border-circle connectCheckIcon" uk-icon="check">
                        </span>
                        Moderated, front-end linking
                      </li>
                      <li>
                        <span class="uk-border-circle connectCheckIcon" uk-icon="check">
                        </span>
                        Cross-platform search
                      </li>
                    </ul>
                  </div>
                </div>
               </div>
            </div>
            <div>
              <div class="uk-card uk-card-default uk-padding uk-padding-remove-bottom uk-padding-remove-horizontal connectInfoCard">
                <div class="uk-card-media-top target">
                  <img src="../../assets/3.png" class="uk-align-center" width="162" height="155">
                </div>
                <div class="uk-card-body uk-grid-divider uk-margin" uk-grid>
                  <div class="uk-width-1-1 uk-text-center target">
                    <h5 class="uk-text-bold">Open Science in action</h5>
                    <div>A time-saving bundle of services for researchers to effortlessly practice open science. An integral part of the European Open Science Cloud.</div>

                  </div>
                  <div class="uk-width-1-1">
                    <ul class="uk-list">
                      <li>
                        <span class="uk-border-circle connectCheckIcon" uk-icon="check">
                        </span>
                        Use of OpenAIRE Guidelines
                      </li>
                      <li>
                        <span class="uk-border-circle connectCheckIcon" uk-icon="check">
                        </span>
                        DOIs via Zenodo
                      </li>
                      <li>
                        <span class="uk-border-circle connectCheckIcon" uk-icon="check">
                        </span>
                        EOSC Single Sign-On
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div>
              <div class="uk-card uk-card-default uk-padding uk-padding-remove-bottom uk-padding-remove-horizontal connectInfoCard">
                <div class="uk-card-media-top target">
                  <img src="../../assets/1.png" class="uk-align-center" width="180" height="130">
                </div>
                <div class="uk-card-body uk-grid-divider uk-margin" uk-grid>
                  <div class="uk-width-1-1 uk-text-center target">
                    <h5 class="uk-text-bold">Customized to your needs</h5>
                    <div>A Gateway with your own brand, rules for aggregation, text & data mining, and presentation. Run by you via a simple, yet powerful backend administration tool.</div>
                  </div>
                  <div class="uk-width-1-1">
                    <ul class="uk-list">
                      <li>
                        <span class="uk-border-circle connectCheckIcon" uk-icon="check">
                        </span>
                        Access control
                      </li>
                      <li>
                        <span class="uk-border-circle connectCheckIcon" uk-icon="check">
                        </span>
                        Analytics: rich set of indicators
                      </li>
                      <li>
                        <span class="uk-border-circle connectCheckIcon" uk-icon="check">
                        </span>
                        Look & feel to match your brand
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      <div class="uk-margin-large-top background uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
        <div class="uk-container uk-container-large">
          <gif-slider [gifs]="gifs" [link]="true" [linkTitle]="'learn more'" [route]="'/learn-how'">
          </gif-slider>
        </div>
      </div>
        <div class="uk-container uk-container-large">
          <errorMessages [status]="[status]" [type]="'communities'"></errorMessages>
        </div>

        <div *ngIf="loading" class="uk-container uk-container-large uk-height-large uk-margin-medium-top uk-margin-medium-bottom">
          <div class="uk-animation-fade uk-margin-top  uk-width-1-2" role="alert"><span class="loading-gif  uk-align-center" ></span></div>
        </div>
        <div *ngIf= "!loading && researchCommunities.length > 0" class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">
          <h1 class="uk-text-bold">Community Gateways already in action</h1>
          <div [class]="'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">
              <div *ngFor="let community of researchCommunities.slice(0, 5); let i = index">
                <div  class="uk-padding uk-padding-remove-vertical uk-height-max-large uk-card uk-card-default communityCard">
                    <browse-community [community]=community></browse-community>
                </div>
              </div>
            </div>

          </div>
          <div class="uk-text-right uk-margin-top">
            <!--[queryParams]="{type: quote('community')}"-->
            <a *ngIf="researchCommunities.length > 5" class="portal-color uk-text-uppercase uk-text-bold"
                 routerLinkActive="router-link-active" routerLink="/search/find/communities">
              Browse All >
            </a>
          </div>
        </div>
    </div>
  </div>
</div>
<helper div="connect-test"></helper>
<div class="banner2-connect uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
  <div class="uk-container uk-container-large uk-section">
    <div class="uk-flex uk-flex-middle uk-padding" uk-grid>
      <div class="uk-width-1-2"></div>
      <div class="uk-width-1-2">
        <h1>Let us Help you Develop a Collaborative Science Gateway. It is fast. It is reliable.</h1>
        <div>Get in touch with our team to find out how.</div>
        <div class="uk-inline uk-margin-large-top uk-margin-bottom">
          <a class="uk-button portal-button" routerLink="/contact" routerLinkActive="router-link-active"> CONTACT US</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>