Project

General

Profile

1
<section class="section greySection uk-padding-remove" id="sect-country-page">
2
  <div class="uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up uk-padding-remove" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
3
  <!--<div class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up uk-padding-remove" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">-->
4

    
5

    
6
    <div class="uk-grid uk-grid-small">
7

    
8
      <div class="uk-width-4-5 uk-margin-medium-bottom">
9

    
10
        <div class="uk-container uk-container-expand uk-margin-medium-top">
11
          <ul class="uk-breadcrumb">
12
            <li><a [routerLink]="['/home']">Home</a></li>
13
            <li><span>{{countryName}}</span></li>
14
          </ul>
15
        </div>
16

    
17
        <div class="uk-container uk-container-expand uk-margin-top">
18
          <div class="uk-text-right">
19
            <button class="md-btn md-btn-primary"><i class="fas fa-code uk-margin-small-right"></i>Embed</button>
20
            <button class="md-btn md-btn-primary uk-margin-left"><i class="fas fa-download uk-margin-small-right"></i>Download CSV</button>
21
            <button class="md-btn md-btn-primary uk-margin-left"><i class="fas fa-file-pdf uk-margin-small-right"></i>Download PDF</button>
22
          </div>
23
        </div>
24

    
25
        <div class="uk-container uk-container-expand uk-margin-top">
26
          <!--Overview cards-->
27
          <div class="uk-width-1-1 indicatorCards">
28
            <div class="uk-grid uk-grid-small uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-5@l uk-margin-top uk-grid-match" data-uk-grid-margin="">
29
            <!--<div class="uk-grid uk-grid-small uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-5 uk-margin-top uk-grid-match" data-uk-grid-margin="">-->
30
              <div class="uk-row-first">
31
                <div class="md-card">
32
                  <div class="md-card-content">
33
                    <div class="uk-margin-top">
34
                      <div class="uk-float-right uk-margin-small-right">
35
                        <img src="../../../assets/img/icons/PUBLICATIONS.svg" width="30" height="30">
36
                      </div>
37
                      <h2 class="uk-margin-remove">
38
                        <span class="number">18,165</span>
39
                        <!--<span *ngIf="overviewData.overview.publications?.oa" class="number">{{overviewData.overview.publications.oa | number}}</span>-->
40
                        <!--<span *ngIf="!overviewData.overview.publications || !overviewData.overview.publications.oa" class="number">--</span>-->
41
                      </h2>
42
                    </div>
43
                    <div class="uk-margin-top">
44
                      <!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
45
                      <span class="">Number of OA publications</span>
46
                    </div>
47
                    <div class="uk-margin-top">
48
                      <span class="number">30%</span> are OA
49
                    </div>
50
                    <!--<div *ngIf="overviewData.overview.publications?.percentage" class="uk-margin-top">-->
51
                      <!--<span class="number">{{overviewData.overview.publications.percentage | number}}%</span> are OA-->
52
                    <!--</div>-->
53
                  </div>
54
                </div>
55
              </div>
56
              <div class="">
57
                <div class="md-card">
58
                  <div class="md-card-content">
59
                    <div class="uk-margin-top">
60
                      <div class="uk-float-right uk-margin-small-right">
61
                        <img src="../../../assets/img/icons/DATASETS.svg" width="30" height="30">
62
                      </div>
63
                      <h2 class="uk-margin-remove">
64
                        <span class="number">12,812</span>
65
                        <!--<span *ngIf="overviewData.overview.datasets?.oa" class="number">{{overviewData.overview.datasets.oa | number}}</span>-->
66
                        <!--<span *ngIf="!overviewData.overview.datasets || !overviewData.overview.datasets.oa" class="number">--</span>-->
67
                      </h2>
68
                    </div>
69
                    <div class="uk-margin-top">
70
                      <!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
71
                      <span class="">Number of OA datasets</span>
72
                    </div>
73
                    <div class="uk-margin-top">
74
                      <span class="number">30%</span> are OA
75
                    </div>
76
                    <!--<div *ngIf="overviewData.overview.datasets?.percentage" class="uk-margin-top">-->
77
                      <!--<span class="number">{{overviewData.overview.datasets.percentage | number}}%</span> are OA-->
78
                    <!--</div>-->
79
                  </div>
80
                </div>
81
              </div>
82
              <div class="">
83
                <div class="md-card">
84
                  <div class="md-card-content">
85
                    <div class="uk-margin-top">
86
                      <div class="uk-float-right uk-margin-small-right">
87
                        <img src="../../../assets/img/icons/REPOSITORIES.svg" width="30" height="30">
88
                      </div>
89
                      <h2 class="uk-margin-remove">
90
                        <span class="number">512</span>
91
                        <!--<span *ngIf="overviewData.overview.repositories?.oa" class="number">{{overviewData.overview.repositories.oa | number}}</span>-->
92
                        <!--<span *ngIf="!overviewData.overview.repositories || !overviewData.overview.repositories.oa" class="number">--</span>-->
93
                      </h2>
94
                    </div>
95
                    <div class="uk-margin-top">
96
                      <!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
97
                      <span class="">Number of OA repositories</span>
98
                    </div>
99
                    <!--<div *ngIf="overviewData.overview.repositories?.percentage" class="uk-margin-top">-->
100
                      <!--<span class="number">{{overviewData.overview.repositories.percentage | number}}%</span> are OA-->
101
                    <!--</div>-->
102
                  </div>
103
                </div>
104
              </div>
105
              <div class="">
106
                <div class="md-card">
107
                  <div class="md-card-content">
108
                    <div class="uk-margin-top">
109
                      <div class="uk-float-right uk-margin-small-right">
110
                        <img src="../../../assets/img/icons/JOURNAL.svg" width="30" height="30">
111
                      </div>
112
                      <h2 class="uk-margin-remove">
113
                        <span class="number">1356</span>
114
                        <!--<span *ngIf="overviewData.overview.journals?.oa" class="number">{{overviewData.overview.journals.oa | number}}</span>-->
115
                        <!--<span *ngIf="!overviewData.overview.journals || !overviewData.overview.journals.oa" class="number">--</span>-->
116
                      </h2>
117
                    </div>
118
                    <div class="uk-margin-top">
119
                      <!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
120
                      <span class="">Number of OA journals</span>
121
                    </div>
122
                    <!--<div *ngIf="overviewData.overview.journals?.percentage" class="uk-margin-top">-->
123
                      <!--<span class="number">{{overviewData.overview.journals.percentage | number}}%</span> are OA-->
124
                    <!--</div>-->
125
                  </div>
126
                </div>
127
              </div>
128
              <div class="">
129
                <div class="md-card">
130
                  <div class="md-card-content">
131
                    <div class="uk-margin-top">
132
                      <div class="uk-float-right uk-margin-small-right">
133
                        <img src="../../../assets/img/icons/POLICES.svg" width="30" height="30">
134
                      </div>
135
                      <h2 class="uk-margin-remove">
136
                        <span class="number">798</span>
137
                        <!--<span *ngIf="overviewData.overview.policies?.oa" class="number">{{overviewData.overview.policies.oa | number}}</span>-->
138
                        <!--<span *ngIf="!overviewData.overview.policies || !overviewData.overview.policies.oa" class="number">--</span>-->
139
                      </h2>
140
                    </div>
141
                    <div class="uk-margin-top">
142
                      <!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
143
                      <span class="">Number of organizations with OA policies</span>
144
                    </div>
145
                    <!--<div *ngIf="overviewData.overview.policies?.percentage" class="uk-margin-top">-->
146
                      <!--<span class="number">{{overviewData.overview.policies.percentage | number}}%</span> are OA-->
147
                    <!--</div>-->
148
                  </div>
149
                </div>
150
              </div>
151
            </div>
152
          </div>
153
        </div>
154

    
155
        <!--GREEN VS. GOLD-->
156
        <div class="uk-container uk-container-expand contentSectionContainer uk-margin-medium-top">
157
          <h2 class="heading_c uk-margin-medium-bottom uk-text-center-medium">
158
            Green vs. Gold
159
            <!--<span class="sub-heading">The Best Images From Around The World</span>-->
160
          </h2>
161
          <div class="uk-grid">
162
            <div class="uk-width-1-2">
163
              <div class="md-card">
164
                <div class="md-card-toolbar">
165
                  <div class="md-card-toolbar-actions">
166
                    <i class="fas fa-lg fa-info-circle"></i>
167
                    <i class="fas fa-lg fa-download uk-margin-left"></i>
168
                    <i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
169
                  </div>
170
                  <h3 class="md-card-toolbar-heading-text">
171
                    <!--Card Heading-->
172
                  </h3>
173
                </div>
174
                <div class="md-card-content">
175
                  <img src="../../../assets/img/mocks/monthly-average-temperat.png">
176
                </div>
177
              </div>
178
            </div>
179
            <div class="uk-width-1-2">
180
              <div class="md-card">
181
                <div class="md-card-toolbar">
182
                  <div class="md-card-toolbar-actions">
183
                    <i class="fas fa-lg fa-info-circle"></i>
184
                    <i class="fas fa-lg fa-download uk-margin-left"></i>
185
                    <i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
186
                  </div>
187
                  <h3 class="md-card-toolbar-heading-text">
188
                    <!--Card Heading-->
189
                  </h3>
190
                </div>
191
                <div class="md-card-content">
192
                  <img src="../../../assets/img/mocks/stacked-bar-chart.png">
193
                </div>
194
              </div>
195
            </div>
196
          </div>
197
        </div>
198

    
199
        <!--EU FUNDED OPEN SCIENCE-->
200
        <div class="uk-container uk-container-expand contentSectionContainer uk-margin-medium-top">
201
          <h2 class="heading_c uk-margin-medium-bottom uk-text-center-medium">
202
            EU funded Open Science
203
            <!--<span class="sub-heading">The Best Images From Around The World</span>-->
204
          </h2>
205
          <div class="uk-grid">
206
            <div class="uk-width-1-1">
207
              <div class="md-card">
208
                <div class="md-card-toolbar">
209
                  <div class="md-card-toolbar-actions">
210
                    <i class="fas fa-lg fa-info-circle"></i>
211
                    <i class="fas fa-lg fa-download uk-margin-left"></i>
212
                    <i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
213
                  </div>
214
                  <h3 class="md-card-toolbar-heading-text">
215
                    <!--Card Heading-->
216
                  </h3>
217
                </div>
218
                <div class="md-card-content">
219
                  <img src="../../../assets/img/mocks/snow-depth-at-vikjafjell.png">
220
                </div>
221
              </div>
222
            </div>
223
          </div>
224
          <div class="uk-grid">
225
            <div class="uk-width-1-2">
226
              <div class="md-card">
227
                <div class="md-card-toolbar">
228
                  <div class="md-card-toolbar-actions">
229
                    <i class="fas fa-lg fa-info-circle"></i>
230
                    <i class="fas fa-lg fa-download uk-margin-left"></i>
231
                    <i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
232
                  </div>
233
                  <h3 class="md-card-toolbar-heading-text">
234
                    <!--Card Heading-->
235
                  </h3>
236
                </div>
237
                <div class="md-card-content">
238
                  <table class="uk-table uk-table-small uk-table-divider">
239
                    <thead>
240
                    <tr>
241
                      <th>Table Heading</th>
242
                      <th>Table Heading</th>
243
                      <th>Table Heading</th>
244
                    </tr>
245
                    </thead>
246
                    <tbody>
247
                    <tr>
248
                      <td>Table Data</td>
249
                      <td>Table Data</td>
250
                      <td>Table Data</td>
251
                    </tr>
252
                    <tr>
253
                      <td>Table Data</td>
254
                      <td>Table Data</td>
255
                      <td>Table Data</td>
256
                    </tr>
257
                    <tr>
258
                      <td>Table Data</td>
259
                      <td>Table Data</td>
260
                      <td>Table Data</td>
261
                    </tr>
262
                    </tbody>
263
                  </table>
264
                </div>
265
              </div>
266
            </div>
267
            <div class="uk-width-1-2">
268
              <div class="md-card">
269
                <div class="md-card-toolbar">
270
                  <div class="md-card-toolbar-actions">
271
                    <i class="fas fa-lg fa-info-circle"></i>
272
                    <i class="fas fa-lg fa-download uk-margin-left"></i>
273
                    <i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
274
                  </div>
275
                  <h3 class="md-card-toolbar-heading-text">
276
                    <!--Card Heading-->
277
                  </h3>
278
                </div>
279
                <div class="md-card-content">
280
                  <table class="uk-table uk-table-small uk-table-divider">
281
                    <thead>
282
                    <tr>
283
                      <th>Table Heading</th>
284
                      <th>Table Heading</th>
285
                      <th>Table Heading</th>
286
                    </tr>
287
                    </thead>
288
                    <tbody>
289
                    <tr>
290
                      <td>Table Data</td>
291
                      <td>Table Data</td>
292
                      <td>Table Data</td>
293
                    </tr>
294
                    <tr>
295
                      <td>Table Data</td>
296
                      <td>Table Data</td>
297
                      <td>Table Data</td>
298
                    </tr>
299
                    <tr>
300
                      <td>Table Data</td>
301
                      <td>Table Data</td>
302
                      <td>Table Data</td>
303
                    </tr>
304
                    </tbody>
305
                  </table>
306
                </div>
307
              </div>
308
            </div>
309
          </div>
310
        </div>
311

    
312
        <!--FUNDING SOURCES-->
313
        <div class="uk-container uk-container-expand contentSectionContainer uk-margin-medium-top">
314
          <h2 class="heading_c uk-margin-medium-bottom uk-text-center-medium">
315
            Funding sources
316
            <!--<span class="sub-heading">The Best Images From Around The World</span>-->
317
          </h2>
318
          <div class="uk-grid">
319
            <div class="uk-width-1-1">
320
              <div class="md-card">
321
                <div class="md-card-toolbar">
322
                  <div class="md-card-toolbar-actions">
323
                    <i class="fas fa-lg fa-info-circle"></i>
324
                    <i class="fas fa-lg fa-download uk-margin-left"></i>
325
                    <i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
326
                  </div>
327
                  <h3 class="md-card-toolbar-heading-text">
328
                    <!--Card Heading-->
329
                  </h3>
330
                </div>
331
                <div class="md-card-content">
332
                  <img src="../../../assets/img/mocks/historic-world-populatio.png">
333
                </div>
334
              </div>
335
            </div>
336
          </div>
337
        </div>
338

    
339
        <!--PROJECT PERFORMANCE-->
340
        <div class="uk-container uk-container-expand contentSectionContainer uk-margin-medium-top">
341
          <h2 class="heading_c uk-margin-medium-bottom uk-text-center-medium">
342
            Project performance
343
            <!--<span class="sub-heading">The Best Images From Around The World</span>-->
344
          </h2>
345
          <div class="uk-grid">
346
            <div class="uk-width-1-3">
347
              <div class="md-card">
348
                <div class="md-card-toolbar">
349
                  <div class="md-card-toolbar-actions">
350
                    <i class="fas fa-lg fa-info-circle"></i>
351
                    <i class="fas fa-lg fa-download uk-margin-left"></i>
352
                    <i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
353
                  </div>
354
                  <h3 class="md-card-toolbar-heading-text">
355
                    <!--Card Heading-->
356
                  </h3>
357
                </div>
358
                <div class="md-card-content">
359
                  <img src="../../../assets/img/mocks/historic-world-populatio-2.png">
360
                </div>
361
              </div>
362
            </div>
363
            <div class="uk-width-1-3">
364
              <div class="md-card">
365
                <div class="md-card-toolbar">
366
                  <div class="md-card-toolbar-actions">
367
                    <i class="fas fa-lg fa-info-circle"></i>
368
                    <i class="fas fa-lg fa-download uk-margin-left"></i>
369
                    <i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
370
                  </div>
371
                  <h3 class="md-card-toolbar-heading-text">
372
                    <!--Card Heading-->
373
                  </h3>
374
                </div>
375
                <div class="md-card-content">
376
                  <img src="../../../assets/img/mocks/historic-world-populatio-3.png">
377
                </div>
378
              </div>
379
            </div>
380
            <div class="uk-width-1-3">
381
              <div class="md-card">
382
                <div class="md-card-toolbar">
383
                  <div class="md-card-toolbar-actions">
384
                    <i class="fas fa-lg fa-info-circle"></i>
385
                    <i class="fas fa-lg fa-download uk-margin-left"></i>
386
                    <i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
387
                  </div>
388
                  <h3 class="md-card-toolbar-heading-text">
389
                    <!--Card Heading-->
390
                  </h3>
391
                </div>
392
                <div class="md-card-content">
393
                  <img src="../../../assets/img/mocks/historic-world-populatio-4.png">
394
                </div>
395
              </div>
396
            </div>
397
          </div>
398
        </div>
399
      </div>
400

    
401
      <aside class="uk-width-1-5 uk-padding-remove">
402
        <div id="sidebar_main" class="md-card dark-grey-box infoBox">
403
          <div class="md-card-content">
404
            <h3 class="uk-text-center">{{countryName | uppercase}}</h3>
405

    
406
            <div>
407
              <app-country-map [country]="countryName"></app-country-map>
408
            </div>
409

    
410
            <div class="numbers">
411
              <div class="uk-margin-medium-top">
412
                <div class="number">18,165</div>
413
                <div class="uk-margin-top">R&D expenditure</div>
414
              </div>
415
              <div class="uk-margin-medium-top">
416
                <div class="number">327</div>
417
                <div class="uk-margin-top">funding organizations</div>
418
              </div>
419
              <div class="uk-margin-medium-top">
420
                <div class="number">18,165</div>
421
                <div class="uk-margin-top">organizations funded by the European commission since 2013</div>
422
              </div>
423
            </div>
424

    
425
            <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
426

    
427
            <div class="uk-text-center uk-margin-medium-top">
428

    
429
              <div class="uk-text-center uk-margin-medium-bottom">
430
                <span class="openaire-symbol-wrapper">
431
                  <img class="" src="https://www.openaire.eu/images/OpenAIRE_branding/Symbol.png" height="30px" width="30px">
432
                </span>
433
              </div>
434
              <a class="uk-link" href="{{linkToCountryInOpenAIRE}}" target="_blank">Country page in <strong>OpenAIRE</strong><i class="fas fa-long-arrow-alt-right uk-margin-left"></i></a>
435
            </div>
436
          </div>
437
        </div>
438
      </aside>
439

    
440

    
441
      <!--<div class="uk-width-large-3-5 uk-container-center uk-text-center">-->
442
      <!--<h2 class="heading_b">-->
443
      <!--Our Team-->
444
      <!--<span class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>-->
445
      <!--</h2>-->
446
      <!--</div>-->
447
    </div>
448

    
449
  </div>
450
</section>
(3-3/4)