open-science-observatory-ui/src/app/pages/continent/continent.component.html

<div class="greySection">

  <section class="uk-padding-small" id="sect-continent-page">
    <div class="uk-container uk-container-expand uk-margin-medium-top">

      <!--LAPTOP & PAD LANDSCAPE-->
      <div class="uk-visible@m">
        <ul class="uk-breadcrumb">
          <li><a routerLink="/home">Home</a></li>
          <li><span>{{continentName | titlecase}}</span></li>
        </ul>


        <div *ngIf="continentName" class="">
          <img src="../../../assets/img/flags/{{continentName}}-flag.jpg" class="flag-image" width="132" height="132">
          <div class="uk-inline uk-margin-left">
            <h1>{{continentName | titlecase}}</h1>
            <span class="lastUpdateInfo">Data Last Updated: </span>
            <span *ngIf="lastUpdateDate" class="lastUpdateInfo">{{lastUpdateDate}}</span>
          </div>
        </div>
      </div>

      <!--MOBILE & PAD PORTRAIT-->
      <div class="uk-hidden@m uk-text-center">
        <div *ngIf="continentName" class="">
          <img src="../../../assets/img/flags/{{continentName}}-flag.jpg" class="flag-image uk-display-block uk-margin-auto-left uk-margin-auto-right" width="103" height="103">
          <div class="uk-margin-top">
            <h1 class="uk-margin-small-bottom">{{continentName | titlecase}}</h1>
            <span class="lastUpdateInfo">Data Last Updated: 21 May 2020</span>
          </div>
        </div>
      </div>

    </div>
  </section>



  <section class="uk-padding-small uk-margin-top">
    <div class="uk-container uk-container-center uk-margin-medium-top">

      <!--LAPTOP & PAD LANDSCAPE-->
      <div class="uk-visible@m">
        <div *ngIf="!europeOverviewData" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-5x loader" aria-hidden="true"></i></div>
        <div *ngIf="europeOverviewData" class="uk-grid uk-child-width-1-4 entitiesContainer">

          <!--PUBLICATIONS-->
          <ng-container *ngIf="europeOverviewData.publications?.percentage">
            <div class="publicationsColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.publications.percentage)">
              <div class="entityColumnContent">
                <span><img src="../../../assets/img/icons/publications-icon-white.svg" [width]="getPublicationsIconWidth(europeOverviewData.publications.percentage)"></span>
                <span class="number" [style.font-size.px]="getNumberFontSize(europeOverviewData.publications.percentage)"
                      [ngStyle]="{'margin-top' :europeOverviewData.publications.percentage * 45 /100 + 'px'}">
              {{europeOverviewData.publications.percentage | number :'1.0-1'}}%
            </span>
                <span class="number" [style.font-size.px]="getEntityNameFontSize(europeOverviewData.publications.percentage)"
                      [ngStyle]="{'margin-top' :europeOverviewData.publications.percentage * 30 /100 + 'px'}">Publications</span>
              </div>
            </div>
          </ng-container>
          <ng-container *ngIf="!europeOverviewData.publications || !europeOverviewData.publications.percentage">
            <div class="publicationsColumn uk-padding" style="height: 0%">

            </div>
          </ng-container>

          <!--DATASETS-->
          <ng-container *ngIf="europeOverviewData.datasets?.percentage">
            <div class="datasetsColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.datasets.percentage)">
              <div class="entityColumnContent">
                <span><img src="../../../assets/img/icons/datasets-icon-white.svg" [width]="getDatasetsIconWidth(europeOverviewData.datasets.percentage)"></span>
                <span class="number" [style.font-size.px]="getNumberFontSize(europeOverviewData.datasets.percentage)"
                      [ngStyle]="{'margin-top' :europeOverviewData.datasets.percentage * 45 /100 + 'px'}">
              {{europeOverviewData.datasets.percentage | number :'1.0-1'}}%
            </span>
                <span class="number" [style.font-size.px]="getEntityNameFontSize(europeOverviewData.datasets.percentage)"
                      [ngStyle]="{'margin-top' :europeOverviewData.datasets.percentage * 30 /100 + 'px'}">Datasets</span>
              </div>
            </div>
          </ng-container>
          <ng-container *ngIf="!europeOverviewData.datasets || !europeOverviewData.datasets.percentage">
            <div class="datasetsColumn" style="height: 0%">

            </div>
          </ng-container>

          <!--SOFTWARE-->
          <ng-container *ngIf="europeOverviewData.software?.percentage">
            <div class="softwareColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.software.percentage)">
              <div class="entityColumnContent">
                <span><img src="../../../assets/img/icons/software-icon-white.svg" [width]="getSoftwareIconWidth(europeOverviewData.software.percentage)"></span>
                <span class="number" [style.font-size.px]="getNumberFontSize(europeOverviewData.software.percentage)"
                      [ngStyle]="{'margin-top' :europeOverviewData.software.percentage * 45 /100 + 'px'}">
              {{europeOverviewData.software.percentage | number :'1.0-1'}}%
            </span>
                <span class="number" [style.font-size.px]="getEntityNameFontSize(europeOverviewData.software.percentage)"
                      [ngStyle]="{'margin-top' :europeOverviewData.software.percentage * 30 /100 + 'px'}">Software</span>
              </div>
            </div>
          </ng-container>
          <ng-container *ngIf="!europeOverviewData.software || !europeOverviewData.software.percentage">
            <div class="softwareColumn" style="height: 0%">

            </div>
          </ng-container>

          <!--OTHER-->
          <ng-container *ngIf="europeOverviewData.other?.percentage">
            <div class="otherColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.other.percentage)">
              <div class="entityColumnContent">
                <span><img src="../../../assets/img/icons/other-icon-white.svg" [width]="getOtherIconWidth(europeOverviewData.other.percentage)"></span>
                <span class="number" [style.font-size.px]="getNumberFontSize(europeOverviewData.other.percentage)"
                      [ngStyle]="{'margin-top' :europeOverviewData.other.percentage * 45 /100 + 'px'}">
              {{europeOverviewData.other.percentage | number :'1.0-1'}}%
            </span>
                <span class="number" [style.font-size.px]="getEntityNameFontSize(europeOverviewData.other.percentage)"
                      [ngStyle]="{'margin-top' :europeOverviewData.other.percentage * 30 /100 + 'px'}">Other</span>
              </div>
            </div>
          </ng-container>
          <ng-container *ngIf="!europeOverviewData.other || !europeOverviewData.other.percentage">
            <div class="otherColumn" style="height: 0%">

            </div>
          </ng-container>

        </div>

        <hr class="entitiesDivider">

        <div *ngIf="europeOverviewData" class="uk-grid uk-child-width-1-4 uk-margin-large-top">

          <div class="entityLegendContent">
            <div class="publicationsDot uk-inline"></div>
            <div class="uk-inline uk-margin-left">
              <span>
                <ng-container *ngIf="europeOverviewData.publications?.oa">OA: <span class="number">{{europeOverviewData.publications?.oa | number}}</span></ng-container><br>
                <ng-container *ngIf="europeOverviewData.publications?.total">Total: <span class="number">{{europeOverviewData.publications?.total | number}}</span></ng-container>
              </span>
            </div>
          </div>
          <div class="entityLegendContent">
            <div class="datasetsDot"></div>
            <div class="uk-inline uk-margin-left">
              <span>
                <ng-container *ngIf="europeOverviewData.datasets?.oa">OA: <span class="number">{{europeOverviewData.datasets?.oa | number}}</span></ng-container><br>
                <ng-container *ngIf="europeOverviewData.datasets?.total">Total: <span class="number">{{europeOverviewData.datasets?.total | number}}</span></ng-container>
              </span>
            </div>
          </div>
          <div class="entityLegendContent">
            <div class="softwareDot"></div>
            <div class="uk-inline uk-margin-left">
              <span>
                <ng-container *ngIf="europeOverviewData.software?.oa">OA: <span class="number">{{europeOverviewData.software?.oa | number}}</span></ng-container><br>
                <ng-container *ngIf="europeOverviewData.software?.total">Total: <span class="number">{{europeOverviewData.software?.total | number}}</span></ng-container>
              </span>
            </div>
          </div>
          <div class="entityLegendContent">
            <div class="otherDot"></div>
            <div class="uk-inline uk-margin-left">
              <span>
                <ng-container *ngIf="europeOverviewData.other?.oa">OA: <span class="number">{{europeOverviewData.other?.oa | number}}</span></ng-container><br>
                <ng-container *ngIf="europeOverviewData.other?.total">Total: <span class="number">{{europeOverviewData.other?.total | number}}</span></ng-container>
              </span>
            </div>
          </div>

        </div>
      </div>

      <!--MOBILE & PAD PORTRAIT-->
      <div class="uk-hidden@m uk-text-center">
        <div *ngIf="!europeOverviewData" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-5x loader" aria-hidden="true"></i></div>

        <div *ngIf="europeOverviewData" class="uk-grid uk-child-width-1-4 entitiesContainer">

          <!--PUBLICATIONS-->
          <ng-container *ngIf="europeOverviewData.publications?.percentage">
            <div class="publicationsColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.publications.percentage)">
              <div class="entityColumnContent">
                <span><img src="../../../assets/img/icons/publications-icon-white.svg" [width]="getPublicationsIconWidth(europeOverviewData.publications.percentage)"></span>
              </div>
            </div>
          </ng-container>
          <ng-container *ngIf="!europeOverviewData.publications || !europeOverviewData.publications.percentage">
            <div class="publicationsColumn uk-padding" style="height: 0%">

            </div>
          </ng-container>

          <!--DATASETS-->
          <ng-container *ngIf="europeOverviewData.datasets?.percentage">
            <div class="datasetsColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.datasets.percentage)">
              <div class="entityColumnContent">
                <span><img src="../../../assets/img/icons/datasets-icon-white.svg" [width]="getDatasetsIconWidth(europeOverviewData.datasets.percentage)"></span>
              </div>
            </div>
          </ng-container>
          <ng-container *ngIf="!europeOverviewData.datasets || !europeOverviewData.datasets.percentage">
            <div class="datasetsColumn" style="height: 0%">

            </div>
          </ng-container>

          <!--SOFTWARE-->
          <ng-container *ngIf="europeOverviewData.software?.percentage">
            <div class="softwareColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.software.percentage)">
              <div class="entityColumnContent">
                <span><img src="../../../assets/img/icons/software-icon-white.svg" [width]="getSoftwareIconWidth(europeOverviewData.software.percentage)"></span>
              </div>
            </div>
          </ng-container>
          <ng-container *ngIf="!europeOverviewData.software || !europeOverviewData.software.percentage">
            <div class="softwareColumn" style="height: 0%">

            </div>
          </ng-container>

          <!--OTHER-->
          <ng-container *ngIf="europeOverviewData.other?.percentage">
            <div class="otherColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.other.percentage)">
              <div class="entityColumnContent">
                <span><img src="../../../assets/img/icons/other-icon-white.svg" [width]="getOtherIconWidth(europeOverviewData.other.percentage)"></span>
              </div>
            </div>
          </ng-container>
          <ng-container *ngIf="!europeOverviewData.other || !europeOverviewData.other.percentage">
            <div class="otherColumn" style="height: 0%">

            </div>
          </ng-container>

        </div>
        <hr class="entitiesDivider">

        <div *ngIf="europeOverviewData" class="uk-grid uk-child-width-1-1 continentPageEntitiesOverview">

          <!--PUBLICATIONS-->
          <div *ngIf="europeOverviewData.publications?.percentage" style="z-index: 4;">
            <div class="md-card">
              <div class="md-card-content">
                <div class="uk-flex uk-flex-space-between">
                  <div class="">
                    <img src="../../../assets/img/icons/publications-icon.svg" width="21">
                    <span class="publications entityName uk-margin-left">Publications</span>
                  </div>
                  <div class="number big">
                    {{europeOverviewData.publications.percentage | number : '1.0-1'}}%
                  </div>
                </div>
              </div>
            </div>
          </div>


          <!--DATASETS-->
          <div *ngIf="europeOverviewData.datasets?.percentage" style="z-index: 3;">
            <div class="md-card">
              <div class="md-card-content">
                <div class="uk-flex uk-flex-space-between">
                  <div class="">
                    <img src="../../../assets/img/icons/datasets-icon.svg" width="17">
                    <span class="datasets entityName uk-margin-left">Datasets</span>
                  </div>
                  <div class="number big">
                    {{europeOverviewData.datasets.percentage | number : '1.0-1'}}%
                  </div>
                </div>
              </div>
            </div>
          </div>


          <!--SOFTWARE-->
          <div *ngIf="europeOverviewData.software?.percentage" style="z-index: 2;">
            <div class="md-card">
              <div class="md-card-content">
                <div class="uk-flex uk-flex-space-between">
                  <div class="">
                    <img src="../../../assets/img/icons/software-icon.svg" width="19">
                    <span class="software entityName uk-margin-left">Software</span>
                  </div>
                  <div class="number big">
                    {{europeOverviewData.software.percentage | number : '1.0-1'}}%
                  </div>
                </div>
              </div>
            </div>
          </div>


          <!--OTHER-->
          <div *ngIf="europeOverviewData.other?.percentage" style="z-index: 1;">
            <div class="md-card">
              <div class="md-card-content">
                <div class="uk-flex uk-flex-space-between">
                  <div class="">
                    <img src="../../../assets/img/icons/other-icon.svg" width="20">
                    <span class="other entityName uk-margin-left">Other</span>
                  </div>
                  <div class="number big">
                    {{europeOverviewData.other.percentage | number : '1.0-1'}}%
                  </div>
                </div>
              </div>
            </div>
          </div>


        </div>
      </div>


    </div>
  </section>

  <!--TABS SECTION-->
  <section class="section uk-margin-large-top" id="sect-tabs">
    <div class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">

      <div class="">

        <!--LAPTOP & PAD LANDSCAPE-->
        <ul class="uk-visible@m uk-tab uk-tab-large uk-flex-center" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
          <li [routerLinkActive]="['uk-active']" aria-expanded="true"><a [routerLink]="['./overview']">Overview</a></li>
          <!--<li [routerLinkActive]="['uk-active']" aria-expanded="true"><a [routerLink]="['/continent/' + continentName + '/overview']">Overview</a></li>-->
          <li [routerLinkActive]="['uk-active']" aria-expanded="false"><a [routerLink]="['./open-science']">Open Science</a></li>
          <li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li>
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>
          <!--<li class="uk-tab-responsive uk-active uk-hidden" aria-haspopup="true" aria-expanded="false"><a>Developers</a><div class="uk-dropdown uk-dropdown-small" aria-hidden="true"><ul class="uk-nav uk-nav-dropdown"></ul><div></div></div></li>-->
        </ul>

        <!--MOBILE & PAD PORTRAIT-->
        <ul class="uk-hidden@m uk-tab" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
          <li [routerLinkActive]="['uk-active']" aria-expanded="true"><a [routerLink]="['./overview']">Overview</a></li>
          <li [routerLinkActive]="['uk-active']" aria-expanded="false"><a [routerLink]="['./open-science']">Open Science</a></li>
          <li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li>
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>
          <!--<li class="uk-tab-responsive uk-active uk-hidden" aria-haspopup="true" aria-expanded="false"><a>Developers</a><div class="uk-dropdown uk-dropdown-small" aria-hidden="true"><ul class="uk-nav uk-nav-dropdown"></ul><div></div></div></li>-->
        </ul>

        <div class="dataContainer">
          <router-outlet></router-outlet>
        </div>


        <!--<ul id="team_tabbed" class="uk-switcher dataContainer">-->

          <!--&lt;!&ndash;<router-outlet></router-outlet>&ndash;&gt;-->

          <!--&lt;!&ndash;&lt;!&ndash;OVERVIEW tab&ndash;&gt;&ndash;&gt;-->
          <!--&lt;!&ndash;<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">&ndash;&gt;-->
            <!--&lt;!&ndash;<app-continent-overview></app-continent-overview>&ndash;&gt;-->
          <!--&lt;!&ndash;</li>&ndash;&gt;-->

          <!--&lt;!&ndash;&lt;!&ndash;OPEN SCIENCE tab&ndash;&gt;&ndash;&gt;-->
          <!--&lt;!&ndash;<li aria-hidden="true" style="animation-duration: 200ms;">&ndash;&gt;-->
            <!--&lt;!&ndash;<app-continent-open-science></app-continent-open-science>&ndash;&gt;-->
          <!--&lt;!&ndash;</li>&ndash;&gt;-->

          <!--&lt;!&ndash;<li aria-hidden="true">&ndash;&gt;-->
            <!--&lt;!&ndash;<div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">&ndash;&gt;-->
            <!--&lt;!&ndash;</div>&ndash;&gt;-->
          <!--&lt;!&ndash;</li>&ndash;&gt;-->

          <!--&lt;!&ndash;<li aria-hidden="true">&ndash;&gt;-->
            <!--&lt;!&ndash;<div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">&ndash;&gt;-->
            <!--&lt;!&ndash;</div>&ndash;&gt;-->
          <!--&lt;!&ndash;</li>&ndash;&gt;-->

          <!--&lt;!&ndash;<li aria-hidden="true">&ndash;&gt;-->
            <!--&lt;!&ndash;<div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">&ndash;&gt;-->
            <!--&lt;!&ndash;</div>&ndash;&gt;-->
          <!--&lt;!&ndash;</li>&ndash;&gt;-->
        <!--</ul>-->
      </div>

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