Project

General

Profile

« Previous | Next » 

Revision 57748

Added images as mock graphs in the country page

View differences:

country-page.component.html
2 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 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 4

  
5
    <!--<aside id="left-col" class="uk-light" uk-height-viewport="offset-bottom: 5">-->
6
      <!--<div class="bar-wrap">-->
7
        <!--<ul class="uk-nav-default uk-nav-parent-icon" uk-nav>-->
8
          <!--<li class="uk-active"><a href="#">Active</a></li>-->
9
          <!--<li class="uk-parent">-->
10
            <!--<a href="#">Parent</a>-->
11
            <!--<ul class="uk-nav-sub">-->
12
              <!--<li><a href="#">Sub item</a></li>-->
13
              <!--<li><a href="#">Sub item</a></li>-->
14
            <!--</ul>-->
15
          <!--</li>-->
16
          <!--<li class="uk-parent">-->
17
            <!--<a href="#">Parent</a>-->
18
            <!--<ul class="uk-nav-sub">-->
19
              <!--<li><a href="#">Sub item</a></li>-->
20
              <!--<li><a href="#">Sub item</a></li>-->
21
            <!--</ul>-->
22
          <!--</li>-->
23
          <!--<li class="uk-nav-header">Header</li>-->
24
          <!--<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>-->
25
          <!--<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>-->
26
          <!--<li class="uk-nav-divider"></li>-->
27
          <!--<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>-->
28
        <!--</ul>-->
29
      <!--</div>-->
30
    <!--</aside>-->
31
    <!--<div id="right-col">-->
32
      <!--<div class="uk-container uk-margin-medium-top">-->
33
        <!--<div class="uk-grid uk-child-width-1-3" uk-grid>-->
34
          <!--<div>-->
35
            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
36
            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
37
          <!--</div>-->
38
          <!--<div>-->
39
            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
40
            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
41
          <!--</div>-->
42
          <!--<div>-->
43
            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
44
            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
45
          <!--</div>-->
46
          <!--<div class="uk-width-1-1">-->
47
            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
48
            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
49
          <!--</div>-->
50
          <!--<div>-->
51
            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
52
            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
53
          <!--</div>-->
54
          <!--<div>-->
55
            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
56
            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
57
          <!--</div>-->
58
          <!--<div>-->
59
            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
60
            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
61
          <!--</div>-->
62
          <!--<div class="uk-width-1-1">-->
63
            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
64
            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
65
          <!--</div>-->
66 5

  
67
        <!--</div>-->
68
        <!--<div class="uk-grid uk-child-width-1-3" uk-grid>-->
69
          <!--<div>-->
70
            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
71
            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
72
          <!--</div>-->
73
          <!--<div>-->
74
            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
75
            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
76
          <!--</div>-->
77
          <!--<div>-->
78
            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
79
            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
80
          <!--</div>-->
81
          <!--<div class="uk-width-1-1">-->
82
            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
83
            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
84
          <!--</div>-->
85
          <!--<div>-->
86
            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
87
            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
88
          <!--</div>-->
89
          <!--<div>-->
90
            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
91
            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
92
          <!--</div>-->
93
          <!--<div>-->
94
            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
95
            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
96
          <!--</div>-->
97
          <!--<div class="uk-width-1-1">-->
98
            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
99
            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
100
          <!--</div>-->
101

  
102
        <!--</div>-->
103
        <!--<div class="uk-grid uk-child-width-1-3" uk-grid>-->
104
          <!--<div>-->
105
            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
106
            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
107
          <!--</div>-->
108
          <!--<div>-->
109
            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
110
            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
111
          <!--</div>-->
112
          <!--<div>-->
113
            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
114
            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
115
          <!--</div>-->
116
          <!--<div class="uk-width-1-1">-->
117
            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
118
            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
119
          <!--</div>-->
120
          <!--<div>-->
121
            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
122
            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
123
          <!--</div>-->
124
          <!--<div>-->
125
            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
126
            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
127
          <!--</div>-->
128
          <!--<div>-->
129
            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
130
            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
131
          <!--</div>-->
132
          <!--<div class="uk-width-1-1">-->
133
            <!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
134
            <!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
135
          <!--</div>-->
136

  
137
        <!--</div>-->
138
      <!--</div>-->
139
    <!--</div>-->
140

  
141

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

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

  
146 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">
147 18
          <div class="uk-text-right">
148 19
            <button class="md-btn md-btn-primary"><i class="fas fa-code uk-margin-small-right"></i>Embed</button>
149 20
            <button class="md-btn md-btn-primary uk-margin-left"><i class="fas fa-download uk-margin-small-right"></i>Download CSV</button>
......
282 153
        </div>
283 154

  
284 155
        <!--GREEN VS. GOLD-->
285
        <div class="uk-container uk-container-expand uk-margin-medium-top">
156
        <div class="uk-container uk-container-expand contentSectionContainer uk-margin-medium-top">
286 157
          <h2 class="heading_c uk-margin-medium-bottom uk-text-center-medium">
287 158
            Green vs. Gold
288 159
            <!--<span class="sub-heading">The Best Images From Around The World</span>-->
......
301 172
                  </h3>
302 173
                </div>
303 174
                <div class="md-card-content">
304
                  Expedita ut nobis voluptatem nostrum minima qui reiciendis placeat eaque quia enim aliquam sunt sed nihil in sapiente ea rerum aperiam nemo neque eius velit expedita fugiat pariatur sed et fuga inventore sed illo aut ea ipsa nesciunt adipisci id sed consequatur aliquam molestias dolores dolores debitis exercitationem laudantium quas excepturi qui qui esse neque id delectus saepe voluptatem et error et qui voluptates omnis quasi nulla minima consequuntur natus.                        </div>
175
                  <img src="../../../assets/img/mocks/monthly-average-temperat.png">
176
                </div>
305 177
              </div>
306 178
            </div>
307 179
            <div class="uk-width-1-2">
......
317 189
                  </h3>
318 190
                </div>
319 191
                <div class="md-card-content">
320
                  Expedita ut nobis voluptatem nostrum minima qui reiciendis placeat eaque quia enim aliquam sunt sed nihil in sapiente ea rerum aperiam nemo neque eius velit expedita fugiat pariatur sed et fuga inventore sed illo aut ea ipsa nesciunt adipisci id sed consequatur aliquam molestias dolores dolores debitis exercitationem laudantium quas excepturi qui qui esse neque id delectus saepe voluptatem et error et qui voluptates omnis quasi nulla minima consequuntur natus.                        </div>
192
                  <img src="../../../assets/img/mocks/stacked-bar-chart.png">
193
                </div>
321 194
              </div>
322 195
            </div>
323 196
          </div>
324 197
        </div>
325 198

  
326 199
        <!--EU FUNDED OPEN SCIENCE-->
327
        <div class="uk-container uk-container-expand uk-margin-medium-top">
200
        <div class="uk-container uk-container-expand contentSectionContainer uk-margin-medium-top">
328 201
          <h2 class="heading_c uk-margin-medium-bottom uk-text-center-medium">
329 202
            EU funded Open Science
330 203
            <!--<span class="sub-heading">The Best Images From Around The World</span>-->
......
343 216
                  </h3>
344 217
                </div>
345 218
                <div class="md-card-content">
346
                  Expedita ut nobis voluptatem nostrum minima qui reiciendis placeat eaque quia enim aliquam sunt sed nihil in sapiente ea rerum aperiam nemo neque eius velit expedita fugiat pariatur sed et fuga inventore sed illo aut ea ipsa nesciunt adipisci id sed consequatur aliquam molestias dolores dolores debitis exercitationem laudantium quas excepturi qui qui esse neque id delectus saepe voluptatem et error et qui voluptates omnis quasi nulla minima consequuntur natus.                        </div>
219
                  <img src="../../../assets/img/mocks/snow-depth-at-vikjafjell.png">
220
                </div>
347 221
              </div>
348 222
            </div>
349 223
          </div>
......
361 235
                  </h3>
362 236
                </div>
363 237
                <div class="md-card-content">
364
                  Expedita ut nobis voluptatem nostrum minima qui reiciendis placeat eaque quia enim aliquam sunt sed nihil in sapiente ea rerum aperiam nemo neque eius velit expedita fugiat pariatur sed et fuga inventore sed illo aut ea ipsa nesciunt adipisci id sed consequatur aliquam molestias dolores dolores debitis exercitationem laudantium quas excepturi qui qui esse neque id delectus saepe voluptatem et error et qui voluptates omnis quasi nulla minima consequuntur natus.                        </div>
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>
365 265
              </div>
366 266
            </div>
367 267
            <div class="uk-width-1-2">
......
377 277
                  </h3>
378 278
                </div>
379 279
                <div class="md-card-content">
380
                  Expedita ut nobis voluptatem nostrum minima qui reiciendis placeat eaque quia enim aliquam sunt sed nihil in sapiente ea rerum aperiam nemo neque eius velit expedita fugiat pariatur sed et fuga inventore sed illo aut ea ipsa nesciunt adipisci id sed consequatur aliquam molestias dolores dolores debitis exercitationem laudantium quas excepturi qui qui esse neque id delectus saepe voluptatem et error et qui voluptates omnis quasi nulla minima consequuntur natus.                        </div>
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>
381 307
              </div>
382 308
            </div>
383 309
          </div>
384 310
        </div>
385 311

  
386 312
        <!--FUNDING SOURCES-->
387
        <div class="uk-container uk-container-expand uk-margin-medium-top">
313
        <div class="uk-container uk-container-expand contentSectionContainer uk-margin-medium-top">
388 314
          <h2 class="heading_c uk-margin-medium-bottom uk-text-center-medium">
389 315
            Funding sources
390 316
            <!--<span class="sub-heading">The Best Images From Around The World</span>-->
......
403 329
                  </h3>
404 330
                </div>
405 331
                <div class="md-card-content">
406
                  Expedita ut nobis voluptatem nostrum minima qui reiciendis placeat eaque quia enim aliquam sunt sed nihil in sapiente ea rerum aperiam nemo neque eius velit expedita fugiat pariatur sed et fuga inventore sed illo aut ea ipsa nesciunt adipisci id sed consequatur aliquam molestias dolores dolores debitis exercitationem laudantium quas excepturi qui qui esse neque id delectus saepe voluptatem et error et qui voluptates omnis quasi nulla minima consequuntur natus.                        </div>
332
                  <img src="../../../assets/img/mocks/historic-world-populatio.png">
333
                </div>
407 334
              </div>
408 335
            </div>
409 336
          </div>
410 337
        </div>
411 338

  
412 339
        <!--PROJECT PERFORMANCE-->
413
        <div class="uk-container uk-container-expand uk-margin-medium-top">
340
        <div class="uk-container uk-container-expand contentSectionContainer uk-margin-medium-top">
414 341
          <h2 class="heading_c uk-margin-medium-bottom uk-text-center-medium">
415 342
            Project performance
416 343
            <!--<span class="sub-heading">The Best Images From Around The World</span>-->
......
429 356
                  </h3>
430 357
                </div>
431 358
                <div class="md-card-content">
432
                  Expedita ut nobis voluptatem nostrum minima qui reiciendis placeat eaque quia enim aliquam sunt sed nihil in sapiente ea rerum aperiam nemo neque eius velit expedita fugiat pariatur sed et fuga inventore sed illo aut ea ipsa nesciunt adipisci id sed consequatur aliquam molestias dolores dolores debitis exercitationem laudantium quas excepturi qui qui esse neque id delectus saepe voluptatem et error et qui voluptates omnis quasi nulla minima consequuntur natus.                        </div>
359
                  <img src="../../../assets/img/mocks/historic-world-populatio-2.png">
360
                </div>
433 361
              </div>
434 362
            </div>
435 363
            <div class="uk-width-1-3">
......
445 373
                  </h3>
446 374
                </div>
447 375
                <div class="md-card-content">
448
                  Expedita ut nobis voluptatem nostrum minima qui reiciendis placeat eaque quia enim aliquam sunt sed nihil in sapiente ea rerum aperiam nemo neque eius velit expedita fugiat pariatur sed et fuga inventore sed illo aut ea ipsa nesciunt adipisci id sed consequatur aliquam molestias dolores dolores debitis exercitationem laudantium quas excepturi qui qui esse neque id delectus saepe voluptatem et error et qui voluptates omnis quasi nulla minima consequuntur natus.                        </div>
376
                  <img src="../../../assets/img/mocks/historic-world-populatio-3.png">
377
                </div>
449 378
              </div>
450 379
            </div>
451 380
            <div class="uk-width-1-3">
......
461 390
                  </h3>
462 391
                </div>
463 392
                <div class="md-card-content">
464
                  Expedita ut nobis voluptatem nostrum minima qui reiciendis placeat eaque quia enim aliquam sunt sed nihil in sapiente ea rerum aperiam nemo neque eius velit expedita fugiat pariatur sed et fuga inventore sed illo aut ea ipsa nesciunt adipisci id sed consequatur aliquam molestias dolores dolores debitis exercitationem laudantium quas excepturi qui qui esse neque id delectus saepe voluptatem et error et qui voluptates omnis quasi nulla minima consequuntur natus.                        </div>
393
                  <img src="../../../assets/img/mocks/historic-world-populatio-4.png">
394
                </div>
465 395
              </div>
466 396
            </div>
467 397
          </div>
468 398
        </div>
469 399
      </div>
470 400

  
471
      <div class="uk-width-1-5 uk-padding-remove">
401
      <aside class="uk-width-1-5 uk-padding-remove">
472 402
        <div id="sidebar_main" class="md-card dark-grey-box infoBox">
473 403
          <div class="md-card-content">
474 404
            <h3 class="uk-text-center">{{countryName | uppercase}}</h3>
......
505 435
            </div>
506 436
          </div>
507 437
        </div>
508
      </div>
438
      </aside>
509 439

  
510 440

  
511 441
      <!--<div class="uk-width-large-3-5 uk-container-center uk-text-center">-->

Also available in: Unified diff