Revision 58853
Added by Stefania Martziou almost 4 years ago
continent-overview.component.html | ||
---|---|---|
1 |
<section class="greySection uk-padding-small" id="sect-continent-page"> |
|
2 |
<div class="uk-container uk-container-expand uk-margin-medium-top"> |
|
1 |
<div class="greySection"> |
|
2 |
<section class="uk-padding-small" id="sect-continent-page"> |
|
3 |
<div class="uk-container uk-container-expand uk-margin-medium-top"> |
|
3 | 4 |
|
4 |
<ul class="uk-breadcrumb"> |
|
5 |
<li><a [routerLink]="['/home']">Home</a></li> |
|
6 |
<li><span>{{continentName | titlecase}}</span></li> |
|
7 |
</ul> |
|
5 |
<ul class="uk-breadcrumb">
|
|
6 |
<li><a [routerLink]="['/home']">Home</a></li>
|
|
7 |
<li><span>{{continentName | titlecase}}</span></li>
|
|
8 |
</ul>
|
|
8 | 9 |
|
9 | 10 |
|
10 |
<div *ngIf="continentName" class=""> |
|
11 |
<img src="../../../assets/img/flags/{{continentName}}-flag.jpg" class="flag-image" width="132" height="132"> |
|
11 |
<div *ngIf="continentName" class=""> |
|
12 |
<img src="../../../assets/img/flags/{{continentName}}-flag.jpg" class="flag-image" width="132" height="132"> |
|
13 |
<div class="uk-inline uk-margin-left"> |
|
14 |
<h1>{{continentName | titlecase}}</h1> |
|
15 |
<span class="lastUpdateInfo">Info Last Updated: 21 May 2020</span> |
|
16 |
</div> |
|
17 |
</div> |
|
18 |
|
|
12 | 19 |
</div> |
20 |
</section> |
|
13 | 21 |
|
14 |
</div>
|
|
15 |
</section>
|
|
22 |
<section class="uk-padding-small">
|
|
23 |
<div class="uk-container uk-container-center uk-margin-medium-top">
|
|
16 | 24 |
|
25 |
<div *ngIf="!europeOverviewData" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-5x loader" aria-hidden="true"></i></div> |
|
26 |
<div *ngIf="europeOverviewData" class="uk-grid uk-child-width-1-4 entitiesContainer"> |
|
17 | 27 |
|
28 |
<!--PUBLICATIONS--> |
|
29 |
<ng-container *ngIf="europeOverviewData.publications?.percentage"> |
|
30 |
<div class="publicationsColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.publications.percentage)"> |
|
31 |
<div class="entityColumnContent"> |
|
32 |
<span><img src="../../../assets/img/icons/publications-icon-white.svg" [width]="getPublicationsIconWidth(europeOverviewData.publications.percentage)"></span> |
|
33 |
<span class="number" [style.font-size.px]="getNumberFontSize(europeOverviewData.publications.percentage)" |
|
34 |
[ngStyle]="{'margin-top' :europeOverviewData.publications.percentage * 45 /100 + 'px'}"> |
|
35 |
{{europeOverviewData.publications.percentage | number :'1.0-1'}}% |
|
36 |
</span> |
|
37 |
<span class="number" [style.font-size.px]="getEntityNameFontSize(europeOverviewData.publications.percentage)" |
|
38 |
[ngStyle]="{'margin-top' :europeOverviewData.publications.percentage * 30 /100 + 'px'}">Publications</span> |
|
39 |
</div> |
|
40 |
</div> |
|
41 |
</ng-container> |
|
42 |
<ng-container *ngIf="!europeOverviewData.publications || !europeOverviewData.publications.percentage"> |
|
43 |
<div class="publicationsColumn uk-padding" style="height: 0%"> |
|
18 | 44 |
|
19 |
<!--TABS SECTION--> |
|
20 |
<section class="section greySection" id="sect-tabs"> |
|
21 |
<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}"> |
|
45 |
</div> |
|
46 |
</ng-container> |
|
22 | 47 |
|
23 |
<div class=""> |
|
24 |
<ul class="uk-tab uk-tab-large uk-flex-center" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}"> |
|
25 |
<li class="uk-active" aria-expanded="true"><a href="#">Overview</a></li> |
|
26 |
<li aria-expanded="false"><a href="#">Open Science</a></li> |
|
27 |
<li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li> |
|
28 |
<li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li> |
|
29 |
<li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li> |
|
30 |
<!--<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>--> |
|
31 |
</ul> |
|
48 |
<!--DATASETS--> |
|
49 |
<ng-container *ngIf="europeOverviewData.datasets?.percentage"> |
|
50 |
<div class="datasetsColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.datasets.percentage)"> |
|
51 |
<div class="entityColumnContent"> |
|
52 |
<span><img src="../../../assets/img/icons/datasets-icon-white.svg" [width]="getDatasetsIconWidth(europeOverviewData.datasets.percentage)"></span> |
|
53 |
<span class="number" [style.font-size.px]="getNumberFontSize(europeOverviewData.datasets.percentage)" |
|
54 |
[ngStyle]="{'margin-top' :europeOverviewData.datasets.percentage * 45 /100 + 'px'}"> |
|
55 |
{{europeOverviewData.datasets.percentage | number :'1.0-1'}}% |
|
56 |
</span> |
|
57 |
<span class="number" [style.font-size.px]="getEntityNameFontSize(europeOverviewData.datasets.percentage)" |
|
58 |
[ngStyle]="{'margin-top' :europeOverviewData.datasets.percentage * 30 /100 + 'px'}">Datasets</span> |
|
59 |
</div> |
|
60 |
</div> |
|
61 |
</ng-container> |
|
62 |
<ng-container *ngIf="!europeOverviewData.datasets || !europeOverviewData.datasets.percentage"> |
|
63 |
<div class="datasetsColumn" style="height: 0%"> |
|
32 | 64 |
|
33 |
<ul *ngIf="overviewData?.countries" id="team_tabbed" class="uk-switcher dataContainer"> |
|
34 |
<!--OVERVIEW tab--> |
|
35 |
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;"> |
|
36 |
<div class="uk-margin tabContent"> |
|
37 |
<app-data-view></app-data-view> |
|
38 |
<!--<app-countries-table [isPercentage]="false" [type]="'overview'" [countries]="overviewData.countries"></app-countries-table>--> |
|
39 | 65 |
</div> |
40 |
</li> |
|
41 |
<!--OPEN SCIENCE tab--> |
|
42 |
<li aria-hidden="true" style="animation-duration: 200ms;"> |
|
43 |
<div class="uk-margin tabContent"> |
|
44 |
<app-data-view></app-data-view> |
|
45 |
<!--<app-countries-table [isPercentage]="false" [type]="'openScience'" [countries]="overviewData.countries"></app-countries-table>--> |
|
66 |
</ng-container> |
|
67 |
|
|
68 |
<!--SOFTWARE--> |
|
69 |
<ng-container *ngIf="europeOverviewData.software?.percentage"> |
|
70 |
<div class="softwareColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.software.percentage)"> |
|
71 |
<div class="entityColumnContent"> |
|
72 |
<span><img src="../../../assets/img/icons/software-icon-white.svg" [width]="getSoftwareIconWidth(europeOverviewData.software.percentage)"></span> |
|
73 |
<span class="number" [style.font-size.px]="getNumberFontSize(europeOverviewData.software.percentage)" |
|
74 |
[ngStyle]="{'margin-top' :europeOverviewData.software.percentage * 45 /100 + 'px'}"> |
|
75 |
{{europeOverviewData.software.percentage | number :'1.0-1'}}% |
|
76 |
</span> |
|
77 |
<span class="number" [style.font-size.px]="getEntityNameFontSize(europeOverviewData.software.percentage)" |
|
78 |
[ngStyle]="{'margin-top' :europeOverviewData.software.percentage * 30 /100 + 'px'}">Software</span> |
|
79 |
</div> |
|
46 | 80 |
</div> |
47 |
</li> |
|
48 |
<li aria-hidden="true"> |
|
49 |
<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=""> |
|
81 |
</ng-container> |
|
82 |
<ng-container *ngIf="!europeOverviewData.software || !europeOverviewData.software.percentage"> |
|
83 |
<div class="softwareColumn" style="height: 0%"> |
|
84 |
|
|
50 | 85 |
</div> |
51 |
</li> |
|
52 |
<li aria-hidden="true"> |
|
53 |
<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=""> |
|
86 |
</ng-container> |
|
87 |
|
|
88 |
<!--OTHER--> |
|
89 |
<ng-container *ngIf="europeOverviewData.other?.percentage"> |
|
90 |
<div class="otherColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.other.percentage)"> |
|
91 |
<div class="entityColumnContent"> |
|
92 |
<span><img src="../../../assets/img/icons/other-icon-white.svg" [width]="getOtherIconWidth(europeOverviewData.other.percentage)"></span> |
|
93 |
<span class="number" [style.font-size.px]="getNumberFontSize(europeOverviewData.other.percentage)" |
|
94 |
[ngStyle]="{'margin-top' :europeOverviewData.other.percentage * 45 /100 + 'px'}"> |
|
95 |
{{europeOverviewData.other.percentage | number :'1.0-1'}}% |
|
96 |
</span> |
|
97 |
<span class="number" [style.font-size.px]="getEntityNameFontSize(europeOverviewData.other.percentage)" |
|
98 |
[ngStyle]="{'margin-top' :europeOverviewData.other.percentage * 30 /100 + 'px'}">Other</span> |
|
99 |
</div> |
|
54 | 100 |
</div> |
55 |
</li> |
|
56 |
<li aria-hidden="true"> |
|
57 |
<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=""> |
|
101 |
</ng-container> |
|
102 |
<ng-container *ngIf="!europeOverviewData.other || !europeOverviewData.other.percentage"> |
|
103 |
<div class="otherColumn" style="height: 0%"> |
|
104 |
|
|
58 | 105 |
</div> |
59 |
</li> |
|
60 |
</ul> |
|
106 |
</ng-container> |
|
107 |
|
|
108 |
</div> |
|
109 |
|
|
110 |
<hr class="entitiesDivider"> |
|
111 |
|
|
112 |
<div class="uk-grid uk-child-width-1-4 uk-margin-large-top"> |
|
113 |
|
|
114 |
<div class="entityLegendContent"> |
|
115 |
<div class="publicationsDot uk-inline"></div> |
|
116 |
<div class="uk-inline uk-margin-left"> |
|
117 |
<span>Lorem Ipsum Lorem Ipsum Lorem Ipsum</span> |
|
118 |
</div> |
|
119 |
</div> |
|
120 |
<div class="entityLegendContent"> |
|
121 |
<div class="datasetsDot"></div> |
|
122 |
<div class="uk-inline uk-margin-left"> |
|
123 |
<span>Lorem Ipsum Lorem Ipsum Lorem Ipsum</span> |
|
124 |
</div> |
|
125 |
</div> |
|
126 |
<div class="entityLegendContent"> |
|
127 |
<div class="softwareDot"></div> |
|
128 |
<div class="uk-inline uk-margin-left"> |
|
129 |
<span>Lorem Ipsum Lorem Ipsum Lorem Ipsum</span> |
|
130 |
</div> |
|
131 |
</div> |
|
132 |
<div class="entityLegendContent"> |
|
133 |
<div class="otherDot"></div> |
|
134 |
<div class="uk-inline uk-margin-left"> |
|
135 |
<span>Lorem Ipsum Lorem Ipsum Lorem Ipsum</span> |
|
136 |
</div> |
|
137 |
</div> |
|
138 |
|
|
139 |
</div> |
|
61 | 140 |
</div> |
141 |
</section> |
|
62 | 142 |
|
63 |
</div> |
|
64 |
</section> |
|
143 |
<!--TABS SECTION--> |
|
144 |
<section class="section uk-margin-large-top" id="sect-tabs"> |
|
145 |
<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}"> |
|
65 | 146 |
|
147 |
<div class=""> |
|
148 |
<ul class="uk-tab uk-tab-large uk-flex-center" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}"> |
|
149 |
<li class="uk-active" aria-expanded="true"><a href="#">Overview</a></li> |
|
150 |
<li aria-expanded="false"><a href="#">Open Science</a></li> |
|
151 |
<li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li> |
|
152 |
<li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li> |
|
153 |
<li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li> |
|
154 |
<!--<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>--> |
|
155 |
</ul> |
|
66 | 156 |
|
157 |
<ul *ngIf="overviewData?.countries" id="team_tabbed" class="uk-switcher dataContainer"> |
|
158 |
<!--OVERVIEW tab--> |
|
159 |
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;"> |
|
160 |
<div class="uk-margin tabContent"> |
|
161 |
<app-data-view></app-data-view> |
|
162 |
<!--<app-countries-table [isPercentage]="false" [type]="'overview'" [countries]="overviewData.countries"></app-countries-table>--> |
|
163 |
</div> |
|
164 |
</li> |
|
165 |
<!--OPEN SCIENCE tab--> |
|
166 |
<li aria-hidden="true" style="animation-duration: 200ms;"> |
|
167 |
<div class="uk-margin tabContent"> |
|
168 |
<app-data-view></app-data-view> |
|
169 |
<!--<app-countries-table [isPercentage]="false" [type]="'openScience'" [countries]="overviewData.countries"></app-countries-table>--> |
|
170 |
</div> |
|
171 |
</li> |
|
172 |
<li aria-hidden="true"> |
|
173 |
<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=""> |
|
174 |
</div> |
|
175 |
</li> |
|
176 |
<li aria-hidden="true"> |
|
177 |
<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=""> |
|
178 |
</div> |
|
179 |
</li> |
|
180 |
<li aria-hidden="true"> |
|
181 |
<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=""> |
|
182 |
</div> |
|
183 |
</li> |
|
184 |
</ul> |
|
185 |
</div> |
|
186 |
|
|
187 |
</div> |
|
188 |
</section> |
|
189 |
</div> |
|
190 |
|
|
191 |
|
|
192 |
|
|
193 |
|
Also available in: Unified diff
Working on the new version of the oso - almost done with tha data part of the pages