MaDgIK
/
open-science-observatory-ui
13
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed some small css issues and added a beta label to the logo

This commit is contained in:
Stefania Martziou 2020-06-17 20:07:08 +00:00
parent 5a5af78ae6
commit 5bab9b15c7
8 changed files with 120 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/domain/countries-lat-lon.ts
View File

@ -185,7 +185,8 @@ export const latlong = new Map()
.set('RE', {latitude: -21.1, longitude: 55.6})
.set('RO', {latitude: 46, longitude: 25})
.set('RS', {latitude: 44, longitude: 21})
.set('RU', {latitude: 60, longitude: 100})
// .set('RU', {latitude: 60, longitude: 100})
.set('RU', {latitude: 55, longitude: 40})
.set('RW', {latitude: -2, longitude: 30})
.set('SA', {latitude: 25, longitude: 45})
.set('SB', {latitude: -8, longitude: 159})

16
src/app/pages/continentoverview/continent-overview.component.html
View File

@ -135,8 +135,8 @@
<div class="publicationsDot uk-inline"></div>
<div class="uk-inline uk-margin-left">
<span>
<ng-container *ngIf="europeOverviewData.publications?.oa"><span class="number uk-margin-small-right">{{europeOverviewData.publications?.oa | number}}</span> OA</ng-container><br>
<ng-container *ngIf="europeOverviewData.publications?.total"><span class="number uk-margin-small-right">{{europeOverviewData.publications?.total | number}}</span> total</ng-container>
<ng-container *ngIf="europeOverviewData.publications?.oa">OA: <span class="number">{{europeOverviewData.publications?.oa | number}}</span></ng-container><br>
<ng-container *ngIf="europeOverviewData.publications?.total">Total: <span class="number">{{europeOverviewData.publications?.total | number}}</span></ng-container>
</span>
</div>
</div>
@ -144,8 +144,8 @@
<div class="datasetsDot"></div>
<div class="uk-inline uk-margin-left">
<span>
<ng-container *ngIf="europeOverviewData.datasets?.oa"><span class="number uk-margin-small-right">{{europeOverviewData.datasets?.oa | number}}</span> OA</ng-container><br>
<ng-container *ngIf="europeOverviewData.datasets?.total"><span class="number uk-margin-small-right">{{europeOverviewData.datasets?.total | number}}</span> total</ng-container>
<ng-container *ngIf="europeOverviewData.datasets?.oa">OA: <span class="number">{{europeOverviewData.datasets?.oa | number}}</span></ng-container><br>
<ng-container *ngIf="europeOverviewData.datasets?.total">Total: <span class="number">{{europeOverviewData.datasets?.total | number}}</span></ng-container>
</span>
</div>
</div>
@ -153,8 +153,8 @@
<div class="softwareDot"></div>
<div class="uk-inline uk-margin-left">
<span>
<ng-container *ngIf="europeOverviewData.software?.oa"><span class="number uk-margin-small-right">{{europeOverviewData.software?.oa | number}}</span> OA</ng-container><br>
<ng-container *ngIf="europeOverviewData.software?.total"><span class="number uk-margin-small-right">{{europeOverviewData.software?.total | number}}</span> total</ng-container>
<ng-container *ngIf="europeOverviewData.software?.oa">OA: <span class="number">{{europeOverviewData.software?.oa | number}}</span></ng-container><br>
<ng-container *ngIf="europeOverviewData.software?.total">Total: <span class="number">{{europeOverviewData.software?.total | number}}</span></ng-container>
</span>
</div>
</div>
@ -162,8 +162,8 @@
<div class="otherDot"></div>
<div class="uk-inline uk-margin-left">
<span>
<ng-container *ngIf="europeOverviewData.other?.oa"><span class="number uk-margin-small-right">{{europeOverviewData.other?.oa | number}}</span> OA</ng-container><br>
<ng-container *ngIf="europeOverviewData.other?.total"><span class="number uk-margin-small-right">{{europeOverviewData.other?.total | number}}</span> total</ng-container>
<ng-container *ngIf="europeOverviewData.other?.oa">OA: <span class="number">{{europeOverviewData.other?.oa | number}}</span></ng-container><br>
<ng-container *ngIf="europeOverviewData.other?.total">Total: <span class="number">{{europeOverviewData.other?.total | number}}</span></ng-container>
</span>
</div>
</div>

11
src/app/pages/countrypage/country-page.component.html
View File

@ -27,11 +27,12 @@
</div>
</div>
<div class="actionButtonsCountryPage uk-text-right">
<a class=""><i class="fas fa-code uk-margin-small-right"></i>Embed</a>
<!--<a class="uk-margin-left"><i class="fas fa-download uk-margin-small-right"></i>Download CSV</a>-->
<a class="uk-margin-left"><i class="fas fa-file-pdf uk-margin-small-right"></i>Download PDF</a>
</div>
// TODO uncomment when implemented
<!--<div class="actionButtonsCountryPage uk-text-right">-->
<!--<a class=""><i class="fas fa-code uk-margin-small-right"></i>Embed</a>-->
<!--&lt;!&ndash;<a class="uk-margin-left"><i class="fas fa-download uk-margin-small-right"></i>Download CSV</a>&ndash;&gt;-->
<!--<a class="uk-margin-left"><i class="fas fa-file-pdf uk-margin-small-right"></i>Download PDF</a>-->
<!--</div>-->
</div>
</div>

8
src/app/pages/home/countries-table.component.html
View File

@ -136,13 +136,13 @@
<span *ngIf="isSortedBy && isSortedBy=='licence' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>
Licence
</th>
<th class="uk-text-center" width="20%" (click)="sortBy('gold')">
<th *ngIf="entity==='publication'" class="uk-text-center" width="20%" (click)="sortBy('gold')">
<span *ngIf="!isSortedBy || isSortedBy!='gold'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>
<span *ngIf="isSortedBy && isSortedBy=='gold' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>
<span *ngIf="isSortedBy && isSortedBy=='gold' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>
Gold
</th>
<th class="uk-text-center" width="20%" (click)="sortBy('green')">
<th *ngIf="entity==='publication'" class="uk-text-center" width="20%" (click)="sortBy('green')">
<span *ngIf="!isSortedBy || isSortedBy!='green'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>
<span *ngIf="isSortedBy && isSortedBy=='green' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>
<span *ngIf="isSortedBy && isSortedBy=='green' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>
@ -167,14 +167,14 @@
<ng-container *ngIf="!isPercentage">{{countryOverview.licence.oa | number}}</ng-container>
</ng-container>
</td>
<td class="uk-text-center">
<td *ngIf="entity==='publication'" class="uk-text-center">
<ng-container *ngIf="countryOverview.gold===null">--</ng-container>
<ng-container *ngIf="countryOverview.gold!=null">
<ng-container *ngIf="isPercentage">{{countryOverview.gold.percentage | number :'1.0-1'}}%</ng-container>
<ng-container *ngIf="!isPercentage">{{countryOverview.gold.oa | number}}</ng-container>
</ng-container>
</td>
<td class="uk-text-center">
<td *ngIf="entity==='publication'" class="uk-text-center">
<ng-container *ngIf="countryOverview.green===null">--</ng-container>
<ng-container *ngIf="countryOverview.green!=null">
<ng-container *ngIf="isPercentage">{{countryOverview.green.percentage | number :'1.0-1'}}%</ng-container>

2
src/app/pages/home/home.component.html
View File

@ -2,7 +2,7 @@
<div class="uk-visible@m">
<!--MAP AND OVERVIEW NUMBERS SECTION-->
<section class="section greySection" id="sect-overview">
<div class="uk-container uk-container-large uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up uk-padding-remove uk-margin-bottom" 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-margin-bottom" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
<div class="uk-grid uk-grid-small uk-margin-bottom uk-grid-match" uk-height-viewport="offset-bottom: 25">

27
src/app/shared/topmenu/top-menu.component.html
View File

@ -6,6 +6,9 @@
<div class="tm-header-mobile uk-hidden@m">
<ng-container *ngIf="isHomeRoute() ; else smallHeader">
<div class="uk-hidden@m">
<a href="/"><img alt="BETA" class="medium-beta-indication-nonFixed" src="../../../assets/img/beta_flag.svg"></a>
</div>
<nav class="uk-navbar-container uk-navbar" uk-navbar>
<div class="uk-navbar-right">
@ -21,8 +24,8 @@
<li class="uk-active"><a [routerLink]="['/overview','europe']">OA in Europe</a></li>
<!--<li class="uk-active"><a href="#">About</a></li>-->
<li class="uk-active"><a routerLink="/methodology">Methodology</a></li>
<li class="uk-nav-divider"></li>
<li class="uk-active"><a routerLink="/home">Sign In</a></li>
<!--<li class="uk-nav-divider"></li>-->
<!--<li class="uk-active"><a routerLink="/home">Sign In</a></li>-->
</ul>
</div>
</li>
@ -41,6 +44,9 @@
</ng-container>
<ng-template #smallHeader>
<div class="uk-hidden@m">
<a href="/"><img alt="BETA" class="medium-beta-indication-fixed" src="../../../assets/img/beta_flag.svg"></a>
</div>
<nav class="uk-navbar-container uk-navbar smallHeader" uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" routerLink="/home">
@ -94,8 +100,8 @@
<li class="uk-active"><a [routerLink]="['/overview', 'europe']">OA in Europe</a></li>
<!--<li class="uk-active"><a href="#">About</a></li>-->
<li class="uk-active"><a routerLink="/methodology">Methodology</a></li>
<li class="uk-nav-divider"></li>
<li class="uk-active"><a routerLink="/home">Sign In</a></li>
<!--<li class="uk-nav-divider"></li>-->
<!--<li class="uk-active"><a routerLink="/home">Sign In</a></li>-->
</ul>
</div>
</li>
@ -111,6 +117,9 @@
<!--LAPTOP & PAD LANDSCAPE-->
<div class="uk-visible@m">
<a href="/"><img alt="BETA" class="large-beta-indication" src="../../../assets/img/beta_flag.svg"></a>
</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"
@ -141,11 +150,11 @@
Methodology
</a>
</li>
<li class="uk-parent" [routerLinkActive]="['uk-active']">
<a routerLink="/home" [routerLinkActive]="['uk-active']">
Sign In
</a>
</li>
<!--<li class="uk-parent" [routerLinkActive]="['uk-active']">-->
<!--<a routerLink="/home" [routerLinkActive]="['uk-active']">-->
<!--Sign In-->
<!--</a>-->
<!--</li>-->
</ul>

42
src/assets/css/os-observatory-custom.css
View File

@ -41,6 +41,30 @@ h3 {
color: #000;
}
.large-beta-indication {
height: 83px;
position: fixed;
top: 0;
left: 0;
z-index: 10000;
}
.medium-beta-indication-nonFixed {
height: 65px;
position: absolute;
top: 0;
left: 0;
z-index: 10000;
}
.medium-beta-indication-fixed {
height: 65px;
position: fixed;
top: 0;
left: 0;
z-index: 10000;
}
/*#sect-overview, #sect-tabs {*/
/*padding: 20px 0;*/
/*}*/
@ -363,9 +387,12 @@ div.indicator span {
}
.dataView.uk-subnav-pill > * > * {
padding: 6px 10px;
width: 16px;
height: 16px;
padding: 8px;
border-radius: 50%;
border: 1px solid;
display: inline-block;
}
.tabContent hr {
@ -457,6 +484,19 @@ a.otherSubnav {
background: #CCF4F4;
}
/*a.publicationsSubnav, a.datasetsSubnav, a.softwareSubnav, a.otherSubnav {*/
/*width: 16px;*/
/*height: 16px;*/
/*padding: 8px;*/
/*!*border-radius: 50%;*!*/
/*!*border: 1px solid;*!*/
/*display: inline-block;*/
/*}*/
a.publicationsSubnav img, a.datasetsSubnav img, a.softwareSubnav img, a.otherSubnav img {
vertical-align: baseline;
}
/**************** HEADER ****************/

40
src/assets/img/beta_flag.svg Normal file
View File

@ -0,0 +1,40 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 118 118" style="enable-background:new 0 0 118 118;" xml:space="preserve">
<style type="text/css">
.st0{clip-path:url(#SVGID_2_);}
.st1{fill:#FFE250;}
.st2{fill:none;stroke:#EFC82A;stroke-width:3;stroke-dasharray:8;}
.st3{enable-background:new ;}
</style>
<g>
<defs>
<rect id="SVGID_1_" y="0" width="118" height="118"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<g class="st0">
<g transform="translate(27 32)">
<g transform="translate(-161.906 166.693) rotate(-45)">
<rect x="0" y="0" transform="matrix(-1 2.535182e-06 -2.535182e-06 -1 523.3979 37.2033)" class="st1" width="523.4" height="37.2"/>
<rect x="1.5" y="1.5" transform="matrix(-1 2.535182e-06 -2.535182e-06 -1 523.3979 37.2033)" class="st2" width="520.4" height="34.2"/>
</g>
<g class="st3">
<path d="M3.9,21.3l2.2-2.2c1-1,1.9-1.6,2.6-1.8c0.7-0.2,1.4,0.1,2,0.7c0.4,0.4,0.7,0.9,0.7,1.3s0,0.9-0.3,1.3l0,0
c0.5-0.3,1.1-0.5,1.5-0.4c0.5,0.1,0.9,0.3,1.4,0.8c0.6,0.6,0.9,1.4,0.8,2.2c-0.1,0.8-0.6,1.6-1.4,2.4L11,28.4L3.9,21.3z
M8.2,22.6l0.9-0.9c0.4-0.4,0.6-0.8,0.7-1.1s-0.1-0.6-0.3-0.9c-0.3-0.3-0.6-0.4-0.9-0.3c-0.3,0.1-0.7,0.3-1.1,0.8l-0.8,0.8
L8.2,22.6z M9.4,23.8l1.8,1.8l1-1c0.4-0.4,0.6-0.8,0.7-1.2c0-0.4-0.1-0.7-0.4-1c-0.6-0.6-1.3-0.5-2.1,0.4L9.4,23.8z"/>
<path d="M21.7,17.7l-4.1,4.1l-7.1-7.1l4.1-4.1l1.2,1.2l-2.6,2.6l1.6,1.6l2.4-2.4l1.2,1.2l-2.4,2.4l1.8,1.8l2.6-2.6L21.7,17.7z"
/>
<path d="M25.9,13.5L24.4,15l-5.8-5.8l-1.9,1.9l-1.2-1.2l5.3-5.3L22,5.7l-1.9,1.9L25.9,13.5z"/>
<path d="M33.3,6.1L31.1,5l-2.6,2.6l1.2,2.2L28,11.4l-4.6-9.6l1.8-1.8l9.6,4.6L33.3,6.1z M29.4,4.1c-2-1.1-3.1-1.6-3.4-1.8
c-0.3-0.1-0.5-0.3-0.6-0.3c0.3,0.5,1,1.8,2.1,4L29.4,4.1z"/>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB