openaire-library/sharedComponents/bottom.component.html

<ng-template #grant>
  <div class="uk-margin-small-top">
    <img style="max-width: 42px;" [src]="assetsPath + 'common/commission.jpg'" alt="flag black white low" width="50px" loading="lazy">
  </div>
  <div class="uk-margin-left">
    <helper *ngIf="divContents && divContents['footer']?.length > 0"
            [texts]="divContents['footer']"></helper>
    <div *ngIf="properties.footerGrantText">
      <span class="uk-text-xsmall" [innerHtml]="properties.footerGrantText"></span>
    </div>
  </div>
</ng-template>
<ng-container *ngIf="shortView;else longView">
  <div [ngClass]="background">
    <div *ngIf="properties.footerGrantText || (divContents && divContents['footer']?.length > 0)"
         class="uk-padding-small uk-flex uk-flex-middle uk-flex-between">
      <div *ngIf="showCommision" class="uk-width-expand">
        <div class="uk-flex uk-flex-middle@m uk-flex-top">
          <div>
            <img style="max-width: 42px;"
                 [src]="assetsPath + 'common/commission.jpg'"
                 alt="flag black white low" width="50px" loading="lazy">
          </div>
          <div class="uk-margin-left">
            <helper *ngIf="divContents && divContents['footer']?.length > 0"
                    [texts]="divContents['footer']"></helper>
            <div class="uk-visible@m">
              <div *ngIf="properties.footerGrantText" class="">
              <span style="font-size: 12px; line-height: 0.7!important;"
                    [innerHtml]="properties.footerGrantText"></span>
              </div>
            </div>
            <div class="uk-text-center uk-hidden@m">
              <div *ngIf="properties.footerGrantText" class="">
              <span style="font-size: 12px; line-height: 0.7!important;"
                    [innerHtml]="properties.footerGrantText"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div *ngIf="showOpenaire" class="uk-width-1-2 uk-margin-left">
        <!-- <img [src]="assetsPath + 'common/Logo_Horizontal_'+(darkBackground?'white':'dark')+'_small.png'" -->
        <img [src]="assetsPath + 'common/Logo_Horizontal.png'"
             width="140px"
             height="50px" class="el-image" alt="OpenAIRE" loading="lazy">
      </div>
    </div>
  </div>
</ng-container>
<ng-template #longView>
  <div class="uk-visible@m">
    <div [ngClass]="background">
      <div class="uk-section uk-padding-remove-bottom">
        <div class="uk-container" [class.uk-container-expand]="!centered" [class.uk-container-small]="centered">
          <div class="uk-grid" [class.uk-flex-center]="centered" uk-grid>
            <div *ngIf="properties.footerGrantText || (divContents && divContents['footer']?.length > 0)"
                 class="uk-width-1-1" [class.uk-width-1-3@m]="!centered"
                 [attr.uk-grid]="centered?'':null" [class.uk-grid]="centered">
              <div *ngIf="showOpenaire" class="uk-text-center uk-margin-bottom uk-width-1-1"
                   [class.uk-width-1-4@m]="centered">
                <img [src]="assetsPath + 'common/Logo_Horizontal.png'"
                     width="140px"
                     height="50px" class="el-image" alt="OpenAIRE" loading="lazy">
              </div>
              <div *ngIf="showCommision" class="uk-width-expand">
                <div class="uk-flex uk-flex-top uk-flex-center">
                  <ng-container *ngTemplateOutlet="grant"></ng-container>
                </div>
              </div>
            </div>
            <div [class.uk-hidden]="centered" class="uk-grid uk-width-expand" uk-grid>
              <div *ngIf="showMenuItems" class="uk-width-expand">
                <div class="uk-text-right uk-text-center">
                  <ul class="uk-nav uk-nav-default" uk-nav>
                    <ng-container *ngFor="let item of menuItems">
                      <li *ngIf="isEnabled(item.routeRequired, showPage)">
                        <a *ngIf="item.route.length > 0" routerLink="{{item.route}}"
                           [queryParams]=item.params>{{item.title}}</a>
                        <a *ngIf="item.route.length == 0 && item.url.length > 0" href="{{item.url}}"
                           target="_blank">{{item.title}}</a>
                      </li>
                    </ng-container>
                  </ul>
                </div>
              </div>
              <ng-container *ngIf="!showMenuItems">
                <div class="uk-width-1-3">
                  <div>
                    <h6>Dashboards</h6>
                    <ul class="uk-nav uk-nav-default" uk-nav>
                      <li><a
                          [href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.':'')+'explore.openaire.eu'"
                          target="_blank">Explore</a></li>
                      <li><a
                          [href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.':'')+'provide.openaire.eu'"
                          target="_blank">Provide</a></li>
                      <li><a
                          [href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.':'')+'connect.openaire.eu'"
                          target="_blank">Connect</a></li>
                      <li><a
                          [href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.':'')+'monitor.openaire.eu'"
                          target="_blank">Monitor</a></li>
                      <li><a href="https://graph.openaire.eu/develop/" target="_blank">Develop</a></li>
                    </ul>
                  </div>
                </div>
                <div class="uk-width-1-3">
                  <div>
                    <h6>Support</h6>
                    <ul class="uk-nav uk-nav-default" uk-nav>
                      <li><a target="_blank" href="https://www.openaire.eu/contact-noads">NOADs</a></li>
                      <li><a target="_blank" href="https://www.openaire.eu/guides">Guides</a></li>
                      <li><a target="_blank" href="https://www.openaire.eu/faqs">FAQs</a></li>
                      <li><a target="_blank" href="https://www.openaire.eu/frontpage/webinars">Webinars</a></li>
                      <li><a target="_blank" href="https://www.openaire.eu/helpdesk">Ask a question</a></li>
                    </ul>
                  </div>
                </div>
                <div class="uk-width-1-3">
                  <div class="">
                    <h6>Updates</h6>
                    <ul class="uk-nav uk-nav-default" uk-nav>
                      <li><a target="_blank" href="https://www.openaire.eu/news/">News</a></li>
                      <li><a target="_blank" href="https://www.openaire.eu/events">Events</a></li>
                      <li><a target="_blank" href="https://www.openaire.eu/blogs/magazine">Blogs</a></li>
                      <li><a target="_blank" href="https://www.openaire.eu/newsletters">Newsletter</a></li>
                      <li><a target="_blank" href="https://www.openaire.eu/public-documents">Documents</a></li>
                    </ul>
                  </div>
                </div>
              </ng-container>
            </div>
            <div *ngIf="showSocialButtons" class="uk-margin-medium-top uk-margin-medium-bottom uk-width-1-1">
              <div class="uk-flex uk-flex-middle uk-flex-wrap" [class.uk-flex-center]="centered">
                <div class="uk-grid uk-grid-small uk-width-auto@m uk-child-width-auto" uk-grid>
                  <div>
                    <a href="https://www.twitter.com/OpenAIRE_eu" target="_blank"
                       class="uk-icon-button uk-icon uk-icon-button-small twitter">
                      <icon name="twitter" [flex]="true" visuallyHidden="twitter"></icon>
                    </a>
                  </div>
                  <div>
                    <a href="https://www.facebook.com/groups/openaire/" target="_blank"
                       class="uk-icon-button uk-icon-button-small facebook">
                      <icon name="facebook" [flex]="true" visuallyHidden="facebook"></icon>
                    </a>
                  </div>
                  <div>
                    <a href="https://www.linkedin.com/groups/3893548/" target="_blank"
                       class="uk-icon-button uk-icon-button-small linkedin">
                      <icon name="linkedin" [flex]="true" visuallyHidden="linkedin"></icon>
                    </a>
                  </div>
                  <div>
                    <a href="https://www.slideshare.net/OpenAIRE_eu" target="_blank"
                       class="uk-icon-button uk-icon-button-small slideshare">
                      <icon name="slideshare" [flex]="true" visuallyHidden="slideshare"></icon>
                    </a>
                  </div>
                  <div>
                    <a href="https://www.youtube.com/channel/UChFYqizc-S6asNjQSoWuwjw" target="_blank"
                       class="uk-icon-button uk-icon-button-small youtube">
                      <icon name="youtube" [flex]="true" visuallyHidden="youtube"></icon>
                    </a>
                  </div>
                </div>
                <div class="uk-margin-large-left uk-width-auto">
                  <a target="_blank" class="uk-flex uk-flex-middle uk-link-text" href="https://www.openaire.eu/newsletters">
                    <span class="uk-text-large uk-text-bold">Newsletter</span>
                    <icon name="newsletter" class="uk-margin-small-left" [flex]="true"></icon>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="uk-section uk-section-xsmall uk-container uk-container-large uk-position-relative">
        <div class="uk-grid uk-flex-center uk-text-xsmall uk-text-emphasis" uk-grid>
          <div class=" uk-flex uk-flex-top">
            <a href="https://creativecommons.org/licenses/by/4.0/" rel="license" class="uk-link-reset">
              <icon name="cc" [preserveColor]="true" visuallyHidden="Creative-Commons"></icon>
              <icon name="by" [preserveColor]="true" visuallyHidden="Licence" class="uk-margin-xsmall-left"></icon>
            </a>
            <span class="uk-margin-small-left uk-width-expand">Unless otherwise indicated, all materials created by OpenAIRE are licenced under</span>
            <a class="uk-link-text uk-margin-medium-left" href="http://creativecommons.org/licenses/by/4.0/" rel="license"><u>CC ATTRIBUTION 4.0 INTERNATIONALLICENSE</u></a>
          </div>
        </div>
        <div class="uk-position-bottom-right uk-margin-bottom uk-margin-large-right">
          <a href="#" class="uk-totop uk-display-block" uk-scroll>
            <icon name="expand_less" ratio="1.5" [flex]="true" visuallyHidden="toTop"></icon>
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="uk-hidden@m">
    <div [ngClass]="background">
      <div class="uk-section uk-padding-remove-bottom">
        <div class="uk-container" [class.uk-container-expand]="!centered" [class.uk-container-small]="centered">
          <div class="uk-grid" [class.uk-flex-center]="centered" uk-grid>
            <div *ngIf="properties.footerGrantText || (divContents && divContents['footer']?.length > 0)"
                 class="uk-width-1-1" [attr.uk-grid]="centered?'':null" [class.uk-grid]="centered">
              <div *ngIf="showOpenaire" class="uk-text-center uk-margin-bottom uk-width-1-1">
                <img [src]="assetsPath + 'common/Logo_Horizontal.png'"
                     width="140px"
                     height="50px" class="el-image" alt="OpenAIRE" loading="lazy">
              </div>
              <div *ngIf="showCommision" class="uk-width-expand">
                <div class="uk-flex uk-flex-top uk-flex-center">
                  <ng-container *ngTemplateOutlet="grant"></ng-container>
                </div>
              </div>
            </div>
            <div *ngIf="showSocialButtons" class="uk-margin-medium-top uk-margin-medium-bottom uk-width-1-1">
              <div class="uk-flex uk-flex-middle uk-flex-center uk-flex-wrap">
                <div class="uk-grid uk-grid-small uk-flex-center uk-width-1-1 uk-child-width-auto" uk-grid>
                  <div>
                    <a href="https://www.twitter.com/OpenAIRE_eu" target="_blank"
                       class="uk-icon-button uk-icon uk-icon-button-small twitter">
                      <icon name="twitter" [flex]="true" visuallyHidden="twitter"></icon>
                    </a>
                  </div>
                  <div>
                    <a href="https://www.facebook.com/groups/openaire/" target="_blank"
                       class="uk-icon-button uk-icon-button-small facebook">
                      <icon name="facebook" [flex]="true" visuallyHidden="facebook"></icon>
                    </a>
                  </div>
                  <div>
                    <a href="https://www.linkedin.com/groups/3893548/" target="_blank"
                       class="uk-icon-button uk-icon-button-small linkedin">
                      <icon name="linkedin" [flex]="true" visuallyHidden="linkedin"></icon>
                    </a>
                  </div>
                  <div>
                    <a href="https://www.slideshare.net/OpenAIRE_eu" target="_blank"
                       class="uk-icon-button uk-icon-button-small slideshare">
                      <icon name="slideshare" [flex]="true" visuallyHidden="slideshare"></icon>
                    </a>
                  </div>
                  <div>
                    <a href="https://www.youtube.com/channel/UChFYqizc-S6asNjQSoWuwjw" target="_blank"
                       class="uk-icon-button uk-icon-button-small youtube">
                      <icon name="youtube" [flex]="true" visuallyHidden="youtube"></icon>
                    </a>
                  </div>
                </div>
                <div class="uk-margin-medium-top uk-width-auto">
                  <a target="_blank" class="uk-flex uk-flex-middle uk-link-text" href="https://www.openaire.eu/newsletters">
                    <span class="uk-text-large uk-text-bold">Newsletter</span>
                    <icon name="newsletter" class="uk-margin-small-left" [flex]="true"></icon>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="uk-section uk-section-xsmall uk-container uk-container-large uk-position-relative">
        <div class="uk-grid uk-flex-center uk-text-xsmall uk-text-emphasis" uk-grid>
          <div class=" uk-flex uk-flex-top">
            <a href="https://creativecommons.org/licenses/by/4.0/" rel="license" class="uk-link-reset">
              <icon name="cc" [preserveColor]="true" visuallyHidden="Creative-Commons"></icon>
              <icon name="by" [preserveColor]="true" visuallyHidden="Licence" class="uk-margin-xsmall-left"></icon>
            </a>
            <span class="uk-margin-small-left uk-width-expand">Unless otherwise indicated, all materials created by OpenAIRE are licenced under</span>
          </div>
          <div class="uk-width-1-1 uk-text-center">
            <a class="uk-link-text" href="http://creativecommons.org/licenses/by/4.0/" rel="license"><u>CC ATTRIBUTION 4.0 INTERNATIONALLICENSE</u></a>
          </div>
        </div>
        <div class="uk-margin-top uk-flex uk-flex-center">
          <a href="#" class="uk-totop" uk-scroll>
            <icon name="expand_less" ratio="1.5" [flex]="true" visuallyHidden="toTop"></icon>
          </a>
        </div>
      </div>
    </div>
  </div>
</ng-template>