390 lines
20 KiB
HTML
390 lines
20 KiB
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">Info 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">Info 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">-->
|
||
|
|
||
|
<!--<!–<router-outlet></router-outlet>–>-->
|
||
|
|
||
|
<!--<!–<!–OVERVIEW tab–>–>-->
|
||
|
<!--<!–<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">–>-->
|
||
|
<!--<!–<app-continent-overview></app-continent-overview>–>-->
|
||
|
<!--<!–</li>–>-->
|
||
|
|
||
|
<!--<!–<!–OPEN SCIENCE tab–>–>-->
|
||
|
<!--<!–<li aria-hidden="true" style="animation-duration: 200ms;">–>-->
|
||
|
<!--<!–<app-continent-open-science></app-continent-open-science>–>-->
|
||
|
<!--<!–</li>–>-->
|
||
|
|
||
|
<!--<!–<li aria-hidden="true">–>-->
|
||
|
<!--<!–<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="">–>-->
|
||
|
<!--<!–</div>–>-->
|
||
|
<!--<!–</li>–>-->
|
||
|
|
||
|
<!--<!–<li aria-hidden="true">–>-->
|
||
|
<!--<!–<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="">–>-->
|
||
|
<!--<!–</div>–>-->
|
||
|
<!--<!–</li>–>-->
|
||
|
|
||
|
<!--<!–<li aria-hidden="true">–>-->
|
||
|
<!--<!–<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="">–>-->
|
||
|
<!--<!–</div>–>-->
|
||
|
<!--<!–</li>–>-->
|
||
|
<!--</ul>-->
|
||
|
</div>
|
||
|
|
||
|
</div>
|
||
|
</section>
|
||
|
</div>
|
||
|
|
||
|
|
||
|
|
||
|
|