Use uikit3 instead of the custom uikit2

This commit is contained in:
Stefania Martziou 2019-11-28 12:47:18 +00:00
parent 32bec5fb24
commit 18e462f75e
11 changed files with 609 additions and 67 deletions

View File

@ -1,22 +1,161 @@
<section class="section greySection uk-padding-top-remove uk-padding-bottom-remove" id="sect-country-page">
<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}">
<section class="section greySection uk-padding-remove" id="sect-country-page">
<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}">
<!--<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}">-->
<!--<aside id="left-col" class="uk-light" uk-height-viewport="offset-bottom: 5">-->
<!--<div class="bar-wrap">-->
<!--<ul class="uk-nav-default uk-nav-parent-icon" uk-nav>-->
<!--<li class="uk-active"><a href="#">Active</a></li>-->
<!--<li class="uk-parent">-->
<!--<a href="#">Parent</a>-->
<!--<ul class="uk-nav-sub">-->
<!--<li><a href="#">Sub item</a></li>-->
<!--<li><a href="#">Sub item</a></li>-->
<!--</ul>-->
<!--</li>-->
<!--<li class="uk-parent">-->
<!--<a href="#">Parent</a>-->
<!--<ul class="uk-nav-sub">-->
<!--<li><a href="#">Sub item</a></li>-->
<!--<li><a href="#">Sub item</a></li>-->
<!--</ul>-->
<!--</li>-->
<!--<li class="uk-nav-header">Header</li>-->
<!--<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>-->
<!--<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>-->
<!--<li class="uk-nav-divider"></li>-->
<!--<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>-->
<!--</ul>-->
<!--</div>-->
<!--</aside>-->
<!--<div id="right-col">-->
<!--<div class="uk-container uk-margin-medium-top">-->
<!--<div class="uk-grid uk-child-width-1-3" uk-grid>-->
<!--<div>-->
<!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
<!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
<!--</div>-->
<!--<div>-->
<!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
<!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
<!--</div>-->
<!--<div>-->
<!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
<!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
<!--</div>-->
<!--<div class="uk-width-1-1">-->
<!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
<!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
<!--</div>-->
<!--<div>-->
<!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
<!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
<!--</div>-->
<!--<div>-->
<!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
<!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
<!--</div>-->
<!--<div>-->
<!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
<!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
<!--</div>-->
<!--<div class="uk-width-1-1">-->
<!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
<!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
<!--</div>-->
<!--</div>-->
<!--<div class="uk-grid uk-child-width-1-3" uk-grid>-->
<!--<div>-->
<!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
<!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
<!--</div>-->
<!--<div>-->
<!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
<!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
<!--</div>-->
<!--<div>-->
<!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
<!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
<!--</div>-->
<!--<div class="uk-width-1-1">-->
<!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
<!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
<!--</div>-->
<!--<div>-->
<!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
<!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
<!--</div>-->
<!--<div>-->
<!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
<!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
<!--</div>-->
<!--<div>-->
<!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
<!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
<!--</div>-->
<!--<div class="uk-width-1-1">-->
<!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
<!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
<!--</div>-->
<!--</div>-->
<!--<div class="uk-grid uk-child-width-1-3" uk-grid>-->
<!--<div>-->
<!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
<!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
<!--</div>-->
<!--<div>-->
<!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
<!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
<!--</div>-->
<!--<div>-->
<!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
<!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
<!--</div>-->
<!--<div class="uk-width-1-1">-->
<!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
<!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
<!--</div>-->
<!--<div>-->
<!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
<!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
<!--</div>-->
<!--<div>-->
<!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
<!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
<!--</div>-->
<!--<div>-->
<!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
<!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
<!--</div>-->
<!--<div class="uk-width-1-1">-->
<!--<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </h3>-->
<!--<p>Harum, amet magni repellat excepturi recusandae modi molestias voluptatum vero sint debitis eligendi blanditiis consectetur sunt mollitia provident iusto est, necessitatibus praesentium.</p>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<div class="uk-grid uk-grid-small">
<div class="uk-width-4-5">
<div class="uk-width-4-5 uk-margin-medium-bottom">
<div class="uk-container uk-container-expand uk-margin-medium-top">
<div class="uk-text-right">
<button class="md-btn md-btn-primary"><i class="fas fa-code uk-margin-small-right"></i>Embed</button>
<button class="md-btn md-btn-primary uk-margin-left"><i class="fas fa-download uk-margin-small-right"></i>Data catalogues</button>
<button class="md-btn md-btn-primary uk-margin-left"><i class="fas fa-file-pdf uk-margin-small-right"></i>PDF</button>
<button class="md-btn md-btn-primary uk-margin-left"><i class="fas fa-download uk-margin-small-right"></i>Download CSV</button>
<button class="md-btn md-btn-primary uk-margin-left"><i class="fas fa-file-pdf uk-margin-small-right"></i>Download PDF</button>
</div>
</div>
<div class="uk-container uk-container-expand uk-margin-top">
<!--Overview cards-->
<div class="uk-width-1-1 indicatorCards">
<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="">
<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="">
<!--<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="">-->
<div class="uk-row-first">
<div class="md-card">
<div class="md-card-content">
@ -27,7 +166,7 @@
<h2 class="uk-margin-remove">
<span class="number">18,165</span>
<!--<span *ngIf="overviewData.overview.publications?.oa" class="number">{{overviewData.overview.publications.oa | number}}</span>-->
<!--<span *ngIf="!overviewData.overview.publications || !overviewData.overview.publications.oa" class="number">&#45;&#45;</span>-->
<!--<span *ngIf="!overviewData.overview.publications || !overviewData.overview.publications.oa" class="number">--</span>-->
</h2>
</div>
<div class="uk-margin-top">
@ -53,7 +192,7 @@
<h2 class="uk-margin-remove">
<span class="number">12,812</span>
<!--<span *ngIf="overviewData.overview.datasets?.oa" class="number">{{overviewData.overview.datasets.oa | number}}</span>-->
<!--<span *ngIf="!overviewData.overview.datasets || !overviewData.overview.datasets.oa" class="number">&#45;&#45;</span>-->
<!--<span *ngIf="!overviewData.overview.datasets || !overviewData.overview.datasets.oa" class="number">--</span>-->
</h2>
</div>
<div class="uk-margin-top">
@ -79,7 +218,7 @@
<h2 class="uk-margin-remove">
<span class="number">512</span>
<!--<span *ngIf="overviewData.overview.repositories?.oa" class="number">{{overviewData.overview.repositories.oa | number}}</span>-->
<!--<span *ngIf="!overviewData.overview.repositories || !overviewData.overview.repositories.oa" class="number">&#45;&#45;</span>-->
<!--<span *ngIf="!overviewData.overview.repositories || !overviewData.overview.repositories.oa" class="number">--</span>-->
</h2>
</div>
<div class="uk-margin-top">
@ -102,7 +241,7 @@
<h2 class="uk-margin-remove">
<span class="number">1356</span>
<!--<span *ngIf="overviewData.overview.journals?.oa" class="number">{{overviewData.overview.journals.oa | number}}</span>-->
<!--<span *ngIf="!overviewData.overview.journals || !overviewData.overview.journals.oa" class="number">&#45;&#45;</span>-->
<!--<span *ngIf="!overviewData.overview.journals || !overviewData.overview.journals.oa" class="number">--</span>-->
</h2>
</div>
<div class="uk-margin-top">
@ -125,7 +264,7 @@
<h2 class="uk-margin-remove">
<span class="number">798</span>
<!--<span *ngIf="overviewData.overview.policies?.oa" class="number">{{overviewData.overview.policies.oa | number}}</span>-->
<!--<span *ngIf="!overviewData.overview.policies || !overviewData.overview.policies.oa" class="number">&#45;&#45;</span>-->
<!--<span *ngIf="!overviewData.overview.policies || !overviewData.overview.policies.oa" class="number">--</span>-->
</h2>
</div>
<div class="uk-margin-top">
@ -142,11 +281,195 @@
</div>
</div>
<!--GREEN VS. GOLD-->
<div class="uk-container uk-container-expand uk-margin-medium-top">
<h2 class="heading_c uk-margin-medium-bottom uk-text-center-medium">
Green vs. Gold
<!--<span class="sub-heading">The Best Images From Around The World</span>-->
</h2>
<div class="uk-grid">
<div class="uk-width-1-2">
<div class="md-card">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions">
<i class="fas fa-lg fa-info-circle"></i>
<i class="fas fa-lg fa-download uk-margin-left"></i>
<i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
</div>
<h3 class="md-card-toolbar-heading-text">
<!--Card Heading-->
</h3>
</div>
<div class="md-card-content">
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>
</div>
</div>
<div class="uk-width-1-2">
<div class="md-card">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions">
<i class="fas fa-lg fa-info-circle"></i>
<i class="fas fa-lg fa-download uk-margin-left"></i>
<i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
</div>
<h3 class="md-card-toolbar-heading-text">
<!--Card Heading-->
</h3>
</div>
<div class="md-card-content">
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>
</div>
</div>
</div>
</div>
<!--EU FUNDED OPEN SCIENCE-->
<div class="uk-container uk-container-expand uk-margin-medium-top">
<h2 class="heading_c uk-margin-medium-bottom uk-text-center-medium">
EU funded Open Science
<!--<span class="sub-heading">The Best Images From Around The World</span>-->
</h2>
<div class="uk-grid">
<div class="uk-width-1-1">
<div class="md-card">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions">
<i class="fas fa-lg fa-info-circle"></i>
<i class="fas fa-lg fa-download uk-margin-left"></i>
<i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
</div>
<h3 class="md-card-toolbar-heading-text">
<!--Card Heading-->
</h3>
</div>
<div class="md-card-content">
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>
</div>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-1-2">
<div class="md-card">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions">
<i class="fas fa-lg fa-info-circle"></i>
<i class="fas fa-lg fa-download uk-margin-left"></i>
<i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
</div>
<h3 class="md-card-toolbar-heading-text">
<!--Card Heading-->
</h3>
</div>
<div class="md-card-content">
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>
</div>
</div>
<div class="uk-width-1-2">
<div class="md-card">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions">
<i class="fas fa-lg fa-info-circle"></i>
<i class="fas fa-lg fa-download uk-margin-left"></i>
<i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
</div>
<h3 class="md-card-toolbar-heading-text">
<!--Card Heading-->
</h3>
</div>
<div class="md-card-content">
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>
</div>
</div>
</div>
</div>
<!--FUNDING SOURCES-->
<div class="uk-container uk-container-expand uk-margin-medium-top">
<h2 class="heading_c uk-margin-medium-bottom uk-text-center-medium">
Funding sources
<!--<span class="sub-heading">The Best Images From Around The World</span>-->
</h2>
<div class="uk-grid">
<div class="uk-width-1-1">
<div class="md-card">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions">
<i class="fas fa-lg fa-info-circle"></i>
<i class="fas fa-lg fa-download uk-margin-left"></i>
<i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
</div>
<h3 class="md-card-toolbar-heading-text">
<!--Card Heading-->
</h3>
</div>
<div class="md-card-content">
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>
</div>
</div>
</div>
</div>
<!--PROJECT PERFORMANCE-->
<div class="uk-container uk-container-expand uk-margin-medium-top">
<h2 class="heading_c uk-margin-medium-bottom uk-text-center-medium">
Project performance
<!--<span class="sub-heading">The Best Images From Around The World</span>-->
</h2>
<div class="uk-grid">
<div class="uk-width-1-3">
<div class="md-card">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions">
<i class="fas fa-lg fa-info-circle"></i>
<i class="fas fa-lg fa-download uk-margin-left"></i>
<i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
</div>
<h3 class="md-card-toolbar-heading-text">
<!--Card Heading-->
</h3>
</div>
<div class="md-card-content">
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>
</div>
</div>
<div class="uk-width-1-3">
<div class="md-card">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions">
<i class="fas fa-lg fa-info-circle"></i>
<i class="fas fa-lg fa-download uk-margin-left"></i>
<i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
</div>
<h3 class="md-card-toolbar-heading-text">
<!--Card Heading-->
</h3>
</div>
<div class="md-card-content">
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>
</div>
</div>
<div class="uk-width-1-3">
<div class="md-card">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions">
<i class="fas fa-lg fa-info-circle"></i>
<i class="fas fa-lg fa-download uk-margin-left"></i>
<i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
</div>
<h3 class="md-card-toolbar-heading-text">
<!--Card Heading-->
</h3>
</div>
<div class="md-card-content">
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>
</div>
</div>
</div>
</div>
</div>
<div class="uk-width-1-5 uk-padding-remove">
<div id="sidebar_main" class="md-card dark-grey-box infoBox uk-sticky" uk-height-viewport="offset-bottom: 0">
<div id="sidebar_main" class="md-card dark-grey-box infoBox">
<div class="md-card-content">
<h3 class="uk-text-center">{{countryName | uppercase}}</h3>

View File

@ -25,6 +25,8 @@ export class CountryPageComponent implements OnInit {
ngOnInit(): void {
window.scroll(0,0);
this.countryName = this.route.snapshot.paramMap.get('countryName');
this.linkToCountryInOpenAIRE = 'https://www.openaire.eu/item/' + this.countryName.replace(' ', '-');
console.log('Country name: ', this.countryName);

View File

@ -1,4 +1,4 @@
<table *ngIf="countries" class="uk-table uk-table-hover">
<table *ngIf="countries" class="uk-table uk-table-hover uk-table-divider uk-table-small">
<thead>
<tr>
<th width="12,5%" class="" (click)="sortBy('country')">

View File

@ -115,7 +115,7 @@
<div class="">
<!--Overview cards-->
<div *ngIf="overviewData?.overview" class="uk-width-1-1 indicatorCards">
<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="">
<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="">
<div class="uk-row-first">
<div class="md-card">
<div class="md-card-content">

View File

@ -19,6 +19,9 @@ export class HomeComponent implements OnInit {
constructor(private dataService: DataService) { }
ngOnInit(): void {
window.scroll(0,0);
this.dataService.getOverviewData().subscribe(
overviewData => {
this.overviewData = overviewData;

View File

@ -1,54 +1,178 @@
<header id="header_main">
<nav class="uk-navbar">
<div class="uk-container uk-container-large uk-container-center">
<a href="#" class="uk-float-left" id="mobile_navigation_toggle" data-uk-offcanvas="{target:'#mobile_navigation'}"><i class="material-icons">&#xE5D2;</i></a>
<a href="/" class="uk-navbar-brand">
<img src="../../../assets/img/Logo-COLOR.svg" alt="" width="152" height="30">
</a>
<div class="uk-navbar-flip">
<ul class="uk-navbar-nav" id="main_navigation">
<li>
<a href="#sect-overview">
About
</a>
</li>
<li>
<a href="#sect-features">
Help
</a>
</li>
<li>
<a href="#sect-gallery">
Sign In
</a>
</li>
</ul>
<!--<header id="header_main">-->
<!--<nav class="uk-navbar">-->
<!--<div class="uk-container uk-container-large uk-container-center">-->
<!--<a href="#" class="uk-float-left" id="mobile_navigation_toggle" data-uk-offcanvas="{target:'#mobile_navigation'}"><i class="material-icons">&#xE5D2;</i></a>-->
<!--<a href="/" class="uk-navbar-brand">-->
<!--<img src="../../../assets/img/Logo-COLOR.svg" alt="" width="152" height="30">-->
<!--</a>-->
<!--<div class="uk-navbar-flip">-->
<!--<ul class="uk-navbar-nav" id="main_navigation">-->
<!--<li>-->
<!--<a href="#sect-overview">-->
<!--About-->
<!--</a>-->
<!--</li>-->
<!--<li>-->
<!--<a href="#sect-features">-->
<!--Help-->
<!--</a>-->
<!--</li>-->
<!--<li>-->
<!--<a href="#sect-gallery">-->
<!--Sign In-->
<!--</a>-->
<!--</li>-->
<!--</ul>-->
<!--</div>-->
<!--</div>-->
<!--</nav>-->
<!--</header>-->
<!--<div id="mobile_navigation" class="uk-offcanvas">-->
<!--<div class="uk-offcanvas-bar">-->
<!--<ul>-->
<!--<li>-->
<!--<a href="#sect-overview" data-uk-smooth-scroll="{offset: 48}">-->
<!--<span class="menu_icon"><i class="material-icons">&#xE417;</i></span>-->
<!--<span class="menu_title">About</span>-->
<!--</a>-->
<!--</li>-->
<!--<li>-->
<!--<a href="#sect-features" data-uk-smooth-scroll="{offset: 48}">-->
<!--<span class="menu_icon"><i class="material-icons">&#xE896;</i></span>-->
<!--<span class="menu_title">Help</span>-->
<!--</a>-->
<!--</li>-->
<!--<li>-->
<!--<a href="#sect-gallery" data-uk-smooth-scroll="{offset: 48}">-->
<!--<span class="menu_icon"><i class="material-icons">&#xE410;</i></span>-->
<!--<span class="menu_title">Sign In</span>-->
<!--</a>-->
<!--</li>-->
<!--</ul>-->
<!--</div>-->
<!--</div>-->
<div>
<div class="uk-offcanvas-content">
<!--MOBILE-->
<div class="tm-header-mobile uk-hidden@m">
<nav class="uk-navbar-container uk-navbar" uk-navbar="">
<div class="uk-navbar-left">
<a class="uk-navbar-toggle" href="#tm-mobile" uk-toggle="">
<div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon">
</div>
</a>
</div>
<div class="uk-navbar-center">
<a class="uk-navbar-item uk-logo" [routerLink]="['/home']">
<img src="../../../assets/img/Logo-COLOR.svg" alt="Open Science Observatory"
class="uk-responsive-height"> </a>
</div>
</nav>
<div id="tm-mobile" uk-offcanvas="" mode="slide" overlay="" class="uk-offcanvas">
<div class="uk-offcanvas-bar">
<button class="uk-offcanvas-close uk-close uk-icon" type="button" uk-close=""></button>
<div class="uk-child-width-1-1 uk-grid" uk-grid="">
<div>
<div>
<a>Sign in| Register</a>
<!--<span *ngIf="getIsUserLoggedIn()">{{getUserName()}}</span>-->
<ul class="uk-list uk-margin-top">
<li>
<a class="uk-search-input" [routerLink]="['home']" [routerLinkActive]="['uk-active']">About</a>
</li>
<li>
<a class="uk-search-input" >Methodology</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
<div id="mobile_navigation" class="uk-offcanvas">
<div class="uk-offcanvas-bar">
<ul>
<li>
<a href="#sect-overview" data-uk-smooth-scroll="{offset: 48}">
<span class="menu_icon"><i class="material-icons">&#xE417;</i></span>
<span class="menu_title">About</span>
</a>
</li>
<li>
<a href="#sect-features" data-uk-smooth-scroll="{offset: 48}">
<span class="menu_icon"><i class="material-icons">&#xE896;</i></span>
<span class="menu_title">Help</span>
</a>
</li>
<li>
<a href="#sect-gallery" data-uk-smooth-scroll="{offset: 48}">
<span class="menu_icon"><i class="material-icons">&#xE410;</i></span>
<span class="menu_title">Sign In</span>
</a>
</li>
</ul>
<!--LAPTOP-->
<!--<div class="tm-toolbar uk-visible@m">-->
<!--<div class="uk-container uk-flex uk-flex-middle uk-container-expand">-->
<!--<div class="uk-margin-auto-left">-->
<!--<div class="uk-grid-medium uk-child-width-auto uk-flex-middle uk-grid uk-grid-stack"-->
<!--uk-grid="margin: uk-margin-small-top">-->
<!--<div class="uk-first-column">-->
<!--<div class="uk-panel inner">-->
<!--<ul class="uk-subnav uk-subnav-line">-->
<!--<li><a class="home-icon" href="https://{{ inBeta ? 'beta.' : '' }}openaire.eu" target="_blank">-->
<!--<span class="uk-responsive-height">-->
<!--<svg xml:space="preserve" enable-background="new 0 0 20 20" height="20px" id="Layer_1" version="1.1" viewBox="0 0 48 48" width="20px" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M44.715,23.711c-0.381,0.382-1,0.382-1.381,0l-8.939-8.938 c-0.064-0.051-0.119-0.106-0.17-0.171l-3.83-3.829c-0.064-0.051-0.119-0.106-0.17-0.171L24,4.377L4.667,23.711 c-0.381,0.382-1,0.382-1.381,0c-0.381-0.381-0.381-1,0-1.381L23.191,2.425c0.031-0.047,0.053-0.101,0.094-0.144 C23.482,2.085,23.742,1.994,24,2c0.258-0.006,0.518,0.084,0.715,0.281c0.043,0.042,0.062,0.096,0.096,0.144L30,7.616V4.997 c0,0,0,0,0,0c0-0.552,0.447-1,1-1h4c0.277,0,0.527,0.112,0.707,0.293C35.889,4.471,36,4.721,36,4.997v8.619l8.715,8.714 C45.096,22.711,45.096,23.33,44.715,23.711z M34,5.997h-2v3.619l2,2V5.997z M10,21.997c0.552,0,1,0.448,1,1v19c0,1.105,0.896,2,2,2 h6l0,0v-13c0-0.553,0.447-1,1-1h8c0.553,0,1,0.447,1,1v13l0,0h6c1.105,0,2-0.895,2-2v-19c0-0.552,0.447-1,1-1s1,0.448,1,1v19 c0,2.209-1.791,4-4,4H13c-2.209,0-4-1.791-4-4v-19C9,22.444,9.448,21.997,10,21.997z M27,43.996v-12h-6v12l0,0H27L27,43.996z" fill="#fff" fill-rule="evenodd" id="home"></path></svg>-->
<!--</span></a></li>-->
<!--<li uk-tooltip="title: Search in OA. Link your research; pos: bottom-left; cls: uk-active tooltipStyling uk-width-auto">-->
<!--<a href="https://{{ inBeta ? 'beta.' : '' }}explore.openaire.eu" target="_blank">Explore</a></li>-->
<!--<li uk-tooltip="title: Content Provider Dashboard; pos: bottom-left; cls: uk-active tooltipStyling uk-width-auto" class="custom-provide-li">-->
<!--<a href="https://{{ inBeta ? 'beta.' : '' }}provide.openaire.eu/" target="_blank">Provide</a></li>-->
<!--<li uk-tooltip="title: Research Community Dashboard; pos: bottom-left; cls: uk-active tooltipStyling uk-width-auto">-->
<!--<a href="https://{{ inBeta ? 'beta.' : '' }}connect.openaire.eu" target="_blank">Connect</a></li>-->
<!--<li uk-tooltip="title: Monitoring Dashboard; pos: bottom-left; cls: uk-active tooltipStyling uk-width-auto">-->
<!--<a href="https://monitor.openaire.eu" target="_blank">Monitor</a></li>-->
<!--<li uk-tooltip="title: APIs; pos: bottom-left; cls: uk-active tooltipStyling uk-width-auto">-->
<!--<a href="https://develop.openaire.eu" target="_blank">Develop</a></li>-->
<!--</ul>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<div class="tm-header uk-visible@m tm-header-transparent" uk-header="">
<div class="uk-navbar-container uk-sticky uk-navbar-transparent" uk-sticky="top:0" media="768"
cls-active="uk-active uk-navbar-sticky" style="" animation="uk-animation-slide-top"
top=".tm-header + [class*=&quot;uk-section&quot;]" cls-inactive="uk-navbar-transparent">
<div class="uk-container uk-container-expand">
<nav class="uk-navbar" uk-navbar="{&quot;align&quot;:&quot;left&quot;}">
<div class="uk-navbar-left">
<a [routerLink]="['home']" class="uk-logo uk-navbar-item">
<img src="../../../assets/img/Logo-COLOR.png" alt="Open Science Observatory" class="uk-responsive-height">
</a>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav" >
<li class="uk-parent" [routerLinkActive]="['uk-active']">
<a [routerLink]="['home']" [routerLinkActive]="['uk-active']">
About
</a>
</li>
<li class="uk-parent" [routerLinkActive]="['uk-active']">
<a [routerLink]="['home']" [routerLinkActive]="['uk-active']">
Methodology
</a>
</li>
<li class="uk-parent" [routerLinkActive]="['uk-active']">
<a [routerLink]="['home']" [routerLinkActive]="['uk-active']">
Sign In
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="uk-sticky-placeholder" style="height: 84px; margin: 0px;" hidden="hidden"></div>
</div>
</div>
</div>

View File

@ -77,6 +77,14 @@ a:hover, a:focus, a:active {
display: inline-block;
}
.uk-nav > li > a {
padding: 5px 15px;
}
.uk-nav-side > li > a {
color: #444;
}
.mapControls .text {
opacity: 0.5;
}
@ -261,7 +269,7 @@ a.backToOriginalInfoBox, a.backToOriginalInfoBox:hover, a.backToOriginalInfoBox:
/*}*/
.uk-subnav-pill > .uk-active > * {
.uk-subnav-pill > .uk-active > a {
/*background: #1F73F7;*/
background: #2A2D34;
}
@ -285,3 +293,84 @@ a.backToOriginalInfoBox, a.backToOriginalInfoBox:hover, a.backToOriginalInfoBox:
.actionButtons {
margin-top: -50px;
}
.md-card .md-card-toolbar {
height: 48px;
}
.md-card .md-card-toolbar .md-card-toolbar-actions {
padding-top: 15px;
}
/*.uk-table td {*/
/*border-bottom: 1px solid #e0e0e0;*/
/*}*/
.uk-table th {
text-transform: none;
}
/**************** HEADER ****************/
/*.tm-header .uk-navbar-container {*/
/*padding-top: 10px;*/
/*padding-bottom: 15px;*/
/*}*/
.tm-header .uk-navbar-left {
position: relative;
z-index: 9999 !important;
}
.navbar .brand, .uk-logo {
font-size: 24px;
font-family: 'Open Sans';
color: #666;
text-decoration: none;
}
.tm-header .uk-logo {
position: relative;
z-index: 1000 !important;
padding-left: 100px;
}
.uk-logo > img {
max-height: 70px;
}
/********************************************/
#sidebar_main {
position: fixed;
right: 0;
top:0;
bottom:0;
overflow-x: hidden;
overflow-y: auto;
/*background-color: #222;*/
/*width: 260px;*/
width: 20%;
z-index:1;
}
#left-col {
position: fixed;
left: 0;
top:0;
bottom:0;
overflow-x: hidden;
overflow-y: auto;
background-color: #222;
width: 260px;
z-index:1;
}
.bar-wrap {
padding: 2rem;
}
#right-col {
margin-left: 260px;
}

BIN
src/assets/img/Logo-BLACK.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

BIN
src/assets/img/Logo-COLOR.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

BIN
src/assets/img/Logo-WHITE.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

View File

@ -14,9 +14,9 @@
<!-- uikit -->
<link rel="stylesheet" href="assets/css/uikit.almost-flat.min.css" media="all">
<!--<link rel="stylesheet" href="assets/css/uikit.almost-flat.min.css" media="all">-->
<!-- UIkit CSS -->
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.2.3/dist/css/uikit.min.css" />-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.2.3/dist/css/uikit.min.css" />
<!-- altair landing page -->
<link rel="stylesheet" href="assets/css/main.css" media="all">
@ -24,7 +24,8 @@
</head>
<body class="header_sticky">
<body class="">
<!--<body class="header_sticky">-->
<!--<body class="header_sticky header_shadow">-->
<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->