Project

General

Profile

« Previous | Next » 

Revision 58610

New design for the current version of the open science observatory

View differences:

home.component.html
1 1
<!--MAP AND OVERVIEW NUMBERS SECTION-->
2 2
<section class="section greySection" id="sect-overview">
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 uk-margin-bottom" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
3
  <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}">
4 4

  
5 5
    <div class="uk-grid uk-grid-small uk-margin-bottom uk-grid-match" uk-height-viewport="offset-bottom: 25">
6 6

  
......
14 14
      </div>
15 15

  
16 16
      <div class="uk-width-1-5">
17
        <div class="md-card dark-grey-box infoBox">
18
          <div *ngIf="!countrySelectedName" class="md-card-content">
19
            <h3 class="uk-text-center">OPENAIRE MONITOR OBSERVATORY</h3>
20
            <div>This tool allows you to:</div>
21
            <ul>
22
              <li>
23
                better understand the European Open Data landscape
24
              </li>
25
              <li>
26
                find data catalogues and datasets analyse and visualise available metadata
27
              </li>
28
              <li>
29
                find data catalogues and datasets analyse and visualise available metadata
30
              </li>
31
              <li>
32
                access the raw data
33
              </li>
34
            </ul>
35
            <div class="uk-text-center uk-margin-medium-top">
36
              <button class="md-btn md-btn-primary">Learn More</button>
17
        <div class="md-card infoBox">
18
          <ng-container *ngIf="!countrySelectedName">
19
            <div class="md-card-toolbar">
20
              <h3 class="uk-text-center">OPENAIRE MONITOR OBSERVATORY</h3>
37 21
            </div>
38
          </div>
39
          <div *ngIf="countrySelectedName" class="md-card-content">
40
            <h3 class="uk-text-center"><a class="backToOriginalInfoBox uk-float-left" (click)="deselectCountry()"><i class="fas fa-angle-left"></i></a>{{countrySelectedName | uppercase}}</h3>
41
            <div class="numbers">
42
              <div class="uk-margin-medium-top">
43
                <div class="number">
44
                  <ng-container *ngIf="countrySelectedOverview.repositories?.oa !=null">{{countrySelectedOverview.repositories.oa | number}}</ng-container>
45
                  <ng-container *ngIf="countrySelectedOverview.repositories===null || countrySelectedOverview.repositories.oa===null">--</ng-container>
46
                </div>
47
                <div class="uk-margin-top">number of OA repositories</div>
22
            <div *ngIf="!countrySelectedName" class="md-card-content">
23
              <div>An OpenAIRE service to:</div>
24
              <ul>
25
                <li>
26
                  Better understand the European open research landscape
27
                </li>
28
                <li>
29
                  Track trends for open access to publications, data, software
30
                </li>
31
                <li>
32
                  Reveal hidden potential on existing resources
33
                </li>
34
                <li>
35
                  View open collaboration patterns
36
                </li>
37
              </ul>
38
              <div class="uk-text-center uk-margin-medium-top uk-margin-medium-bottom">
39
                <button class="md-btn md-btn-primary">Learn More</button>
48 40
              </div>
49
              <div class="uk-margin-medium-top">
50
                <div class="number">
51
                  <ng-container *ngIf="countrySelectedOverview.journals?.oa !=null">{{countrySelectedOverview.journals.oa | number}}</ng-container>
52
                  <ng-container *ngIf="countrySelectedOverview.journals===null || countrySelectedOverview.journals.oa===null">--</ng-container>
53
                </div>
54
                <div class="uk-margin-top">number of OA journals</div>
41
              <div class="uk-text-meta uk-text-small">
42
                <span class="uk-margin-right" style="opacity: 0.8; float: left; margin-top: 7px;">
43
                  <img src="../../../assets/img/Open_Research_Graph.svg">
44
                </span>
45
                <span>Powered by <a target="_blank" href="" style="text-decoration: underline">OpenAIRE Open Research Graph</a></span>
55 46
              </div>
56
              <div class="uk-margin-medium-top">
57
                <div class="number">
58
                  <ng-container *ngIf="countrySelectedOverview.policies?.oa !=null">{{countrySelectedOverview.policies.oa | number}}</ng-container>
59
                  <ng-container *ngIf="countrySelectedOverview.policies===null || countrySelectedOverview.policies.oa===null">--</ng-container>
60
                </div>
61
                <div class="uk-margin-top">number of organizations with OA policies</div>
62
              </div>
63 47
            </div>
64
            <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
65
            <div class="graphs">
66
              <div class="uk-grid">
67
                <div class="uk-width-1-2">
68
                  <ng-container *ngIf="countrySelectedOverview.publications?.percentage !=null">
69
                    <app-gauge-chart [chartData]="countrySelectedOverview.publications.percentage" [color]="'#5086BA'"></app-gauge-chart>
70
                  </ng-container>
71
                  <ng-container *ngIf="countrySelectedOverview.publications===null || countrySelectedOverview.publications.percentage===null">
72
                    <app-gauge-chart [chartData]="0" [color]="'#5086BA'"></app-gauge-chart>
73
                  </ng-container>
74
                  <!--<div class="epc_chart" data-percent="65" data-bar-color="#009688">-->
75
                    <!--<span class="epc_chart_text"><span class="countUpMe">65</span>%</span>-->
76
                    <!--<canvas height="220" width="220" style="height: 110px; width: 110px;"></canvas>-->
77
                  <!--</div>-->
78
                  <div class="uk-text-center">OA publications</div>
48
            <div></div>
49
          </ng-container>
50

  
51
          <ng-container *ngIf="countrySelectedName">
52
            <div class="md-card-toolbar">
53
              <h3 class="uk-text-center uk-margin-small-top">
54
                <a class="backToOriginalInfoBox uk-float-left" (click)="deselectCountry()"><i class="fas fa-angle-left"></i></a>{{countrySelectedName | uppercase}}
55
              </h3>
56
            </div>
57
            <div *ngIf="countrySelectedName" class="md-card-content">
58
              <div class="numbers">
59
                <div class="uk-margin-small-top">
60

  
61
                  <div class="indicator">
62
                    <span class="number publications" *ngIf="countrySelectedOverview.publications?.oa !=null">{{countrySelectedOverview.publications.oa | number}}</span>
63
                    <span class="number publications" *ngIf="countrySelectedOverview.publications===null || countrySelectedOverview.publications.oa===null">--</span>
64
                    <span><i>OA publications</i> from institutional repositories</span>
65
                  </div>
66

  
67
                  <div class="indicator uk-margin-small-top">
68
                    <span class="number publications" *ngIf="countrySelectedOverview.publications?.oa !=null">{{countrySelectedOverview.publications.oa | number}}</span>
69
                    <span class="number publications" *ngIf="countrySelectedOverview.publications===null || countrySelectedOverview.publications.oa===null">--</span>
70
                    <span><i>OA publications</i> affiliated to an organization in the country</span>
71
                  </div>
72

  
73
                  <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
74

  
75
                  <div class="indicator">
76
                    <span class="number datasets" *ngIf="countrySelectedOverview.datasets?.oa !=null">{{countrySelectedOverview.datasets.oa | number}}</span>
77
                    <span class="number datasets" *ngIf="countrySelectedOverview.datasets===null || countrySelectedOverview.datasets.oa===null">--</span>
78
                    <span><i>OA datasets</i> from institutional repositories</span>
79
                  </div>
80

  
81
                  <div class="indicator uk-margin-small-top">
82
                    <span class="number datasets" *ngIf="countrySelectedOverview.datasets?.oa !=null">{{countrySelectedOverview.datasets.oa | number}}</span>
83
                    <span class="number datasets" *ngIf="countrySelectedOverview.datasets===null || countrySelectedOverview.datasets.oa===null">--</span>
84
                    <span><i>OA datasets</i> affiliated to an organization in the country</span>
85
                  </div>
86

  
87
                  <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
88

  
89
                  <div class="indicator">
90
                    <span class="number repositories" *ngIf="countrySelectedOverview.repositories?.oa !=null">{{countrySelectedOverview.repositories.oa | number}}</span>
91
                    <span class="number repositories" *ngIf="countrySelectedOverview.repositories===null || countrySelectedOverview.repositories.oa===null">--</span>
92
                    <span><i>repositories</i> from openDOAR & re3data</span>
93
                  </div>
94

  
95
                  <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
96

  
97
                  <div class="indicator">
98
                    <span class="number journals" *ngIf="countrySelectedOverview.journals?.oa !=null">{{countrySelectedOverview.journals.oa | number}}</span>
99
                    <span class="number journals" *ngIf="countrySelectedOverview.journals===null || countrySelectedOverview.journals.oa===null">--</span>
100
                    <span><i>OA journals</i> from DOAJ</span>
101
                  </div>
102

  
103
                  <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
104

  
105
                  <div class="indicator">
106
                    <span class="number policies" *ngIf="countrySelectedOverview.policies?.oa !=null">{{countrySelectedOverview.policies.oa | number}}</span>
107
                    <span class="number policies" *ngIf="countrySelectedOverview.policies===null || countrySelectedOverview.policies.oa===null">--</span>
108
                    <span>organisations with <i>OA policies</i></span>
109
                  </div>
110

  
79 111
                </div>
80
                <div class="uk-width-1-2">
81
                  <ng-container *ngIf="countrySelectedOverview.datasets?.percentage !=null">
82
                    <app-gauge-chart [chartData]="countrySelectedOverview.datasets.percentage" [color]="'#44653D'"></app-gauge-chart>
83
                  </ng-container>
84
                  <ng-container *ngIf="countrySelectedOverview.datasets===null || countrySelectedOverview.datasets.percentage===null">
85
                    <app-gauge-chart [chartData]="0" [color]="'#44653D'"></app-gauge-chart>
86
                  </ng-container>
87
                  <!--<div class="epc_chart" data-percent="43" data-bar-color="#009688">-->
88
                    <!--<span class="epc_chart_text"><span class="countUpMe">43</span>%</span>-->
89
                    <!--<canvas height="220" width="220" style="height: 110px; width: 110px;"></canvas>-->
90
                  <!--</div>-->
91
                  <div class="uk-text-center">OA datasets</div>
92
                </div>
112

  
93 113
              </div>
114

  
115
              <div class="uk-text-center uk-margin-medium-top">
116
                <a class="" [routerLink]="['/countryDashboard/' + countrySelectedName]">Detailed View <i class="fas fa-arrow-right uk-margin-small-left"></i></a>
117
              </div>
118

  
119
              <div class="uk-text-meta uk-text-small uk-margin-medium-top">
120
                <span class="uk-margin-right" style="opacity: 0.8; float: left; margin-top: 7px;">
121
                  <img src="../../../assets/img/Open_Research_Graph.svg">
122
                </span>
123
                <span>Powered by <a target="_blank" href="" style="text-decoration: underline">OpenAIRE Open Research Graph</a></span>
124
              </div>
94 125
            </div>
95
            <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
96
            <div class="uk-text-center uk-margin-medium-top">
97
              <button class="md-btn md-btn-primary" [routerLink]="['/countryDashboard/' + countrySelectedName]">Visit Country Page <i class="fas fa-arrow-right uk-margin-small-left"></i></button>
98
            </div>
99
          </div>
126
            <div></div>
127
          </ng-container>
100 128
        </div>
101 129
      </div>
102 130

  
......
121 149
              <div class="md-card-content">
122 150
                <div class="uk-margin-top">
123 151
                  <div class="uk-float-right uk-margin-small-right">
124
                    <img src="../../../assets/img/icons/PUBLICATIONS.svg" width="30" height="30">
152
                    <img src="../../../assets/img/icons/publications-icon.svg" width="40" height="40">
125 153
                  </div>
126
                  <h2 class="uk-margin-remove">
154
                  <h3 class="uk-margin-remove">
127 155
                    <span *ngIf="overviewData.overview.publications?.oa" class="number">{{overviewData.overview.publications.oa | number}}</span>
128 156
                    <span *ngIf="!overviewData.overview.publications || !overviewData.overview.publications.oa" class="number">--</span>
129
                  </h2>
157
                  </h3>
130 158
                </div>
131 159
                <div class="uk-margin-top">
132 160
                  <!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
133
                  <span class="">Number of OA publications</span>
161
                  <span class=""><i>OA publications</i></span>
134 162
                </div>
135 163
                <div *ngIf="overviewData.overview.publications?.percentage" class="uk-margin-top">
136
                  <span class="number">{{overviewData.overview.publications.percentage | number}}%</span> are OA
164
                  <span class="number">{{overviewData.overview.publications.percentage | number :'1.0-1'}}%</span> OA
165
                  <div class="progress uk-margin-small-top">
166
                    <div [ngStyle]="{'width': overviewData.overview.publications.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
167
                  </div>
137 168
                </div>
138 169
              </div>
139 170
            </div>
......
143 174
              <div class="md-card-content">
144 175
                <div class="uk-margin-top">
145 176
                  <div class="uk-float-right uk-margin-small-right">
146
                    <img src="../../../assets/img/icons/DATASETS.svg" width="30" height="30">
177
                    <img src="../../../assets/img/icons/datasets-icon.svg" width="33" height="40">
147 178
                  </div>
148
                  <h2 class="uk-margin-remove">
179
                  <h3 class="uk-margin-remove">
149 180
                    <span *ngIf="overviewData.overview.datasets?.oa" class="number">{{overviewData.overview.datasets.oa | number}}</span>
150 181
                    <span *ngIf="!overviewData.overview.datasets || !overviewData.overview.datasets.oa" class="number">--</span>
151
                  </h2>
182
                  </h3>
152 183
                </div>
153 184
                <div class="uk-margin-top">
154 185
                  <!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
155
                  <span class="">Number of OA datasets</span>
186
                  <span class=""><i>OA datasets</i></span>
156 187
                </div>
157 188
                <div *ngIf="overviewData.overview.datasets?.percentage" class="uk-margin-top">
158
                  <span class="number">{{overviewData.overview.datasets.percentage | number}}%</span> are OA
189
                  <span class="number">{{overviewData.overview.datasets.percentage | number :'1.0-1'}}%</span> OA
190
                  <div class="progress uk-margin-small-top">
191
                    <div [ngStyle]="{'width': overviewData.overview.datasets.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
192
                  </div>
159 193
                </div>
160 194
              </div>
161 195
            </div>
......
165 199
              <div class="md-card-content">
166 200
                <div class="uk-margin-top">
167 201
                  <div class="uk-float-right uk-margin-small-right">
168
                    <img src="../../../assets/img/icons/REPOSITORIES.svg" width="30" height="30">
202
                    <img src="../../../assets/img/icons/repositories-icon.svg" width="43" height="40">
169 203
                  </div>
170
                  <h2 class="uk-margin-remove">
204
                  <h3 class="uk-margin-remove">
171 205
                    <span *ngIf="overviewData.overview.repositories?.oa" class="number">{{overviewData.overview.repositories.oa | number}}</span>
172 206
                    <span *ngIf="!overviewData.overview.repositories || !overviewData.overview.repositories.oa" class="number">--</span>
173
                  </h2>
207
                  </h3>
174 208
                </div>
175 209
                <div class="uk-margin-top">
176
                  <!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
177
                  <span class="">Number of OA repositories</span>
210
                  <span class=""><i>repositories</i> from openDOAR & re3data</span>
178 211
                </div>
179
                <!--<div *ngIf="overviewData.overview.repositories?.percentage" class="uk-margin-top">-->
180
                  <!--<span class="number">{{overviewData.overview.repositories.percentage | number}}%</span> are OA-->
181
                <!--</div>-->
212
                <div *ngIf="overviewData.overview.repositories?.percentage" class="uk-margin-top">
213
                  <span class="number">{{overviewData.overview.repositories.percentage | number : '1.0-1'}}%</span> Certified
214
                  <div class="progress uk-margin-small-top">
215
                    <div [ngStyle]="{'width': overviewData.overview.repositories.percentage+'%'}" class="progress-bar progress-bar-repositories animate-progress-bar"></div>
216
                  </div>
217
                </div>
182 218
              </div>
183 219
            </div>
184 220
          </div>
......
187 223
              <div class="md-card-content">
188 224
                <div class="uk-margin-top">
189 225
                  <div class="uk-float-right uk-margin-small-right">
190
                    <img src="../../../assets/img/icons/JOURNAL.svg" width="30" height="30">
226
                    <img src="../../../assets/img/icons/journals-icon.svg" width="43" height="40">
191 227
                  </div>
192
                  <h2 class="uk-margin-remove">
228
                  <h3 class="uk-margin-remove">
193 229
                    <span *ngIf="overviewData.overview.journals?.oa" class="number">{{overviewData.overview.journals.oa | number}}</span>
194 230
                    <span *ngIf="!overviewData.overview.journals || !overviewData.overview.journals.oa" class="number">--</span>
195
                  </h2>
231
                  </h3>
196 232
                </div>
197 233
                <div class="uk-margin-top">
198
                  <!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
199
                  <span class="">Number of OA journals</span>
234
                  <span class=""><i>OA journals</i> from DOAJ</span>
200 235
                </div>
201
                <!--<div *ngIf="overviewData.overview.journals?.percentage" class="uk-margin-top">-->
202
                  <!--<span class="number">{{overviewData.overview.journals.percentage | number}}%</span> are OA-->
203
                <!--</div>-->
236
                <div *ngIf="overviewData.overview.journals?.percentage" class="uk-margin-top">
237
                  <span class="number">{{overviewData.overview.journals.percentage | number : '1.0-1'}}%</span> Certified
238
                  <div class="progress uk-margin-small-top">
239
                    <div [ngStyle]="{'width': overviewData.overview.journals.percentage+'%'}" class="progress-bar progress-bar-journals animate-progress-bar"></div>
240
                  </div>
241
                </div>
204 242
              </div>
205 243
            </div>
206 244
          </div>
......
209 247
              <div class="md-card-content">
210 248
                <div class="uk-margin-top">
211 249
                  <div class="uk-float-right uk-margin-small-right">
212
                    <img src="../../../assets/img/icons/POLICES.svg" width="30" height="30">
250
                    <img src="../../../assets/img/icons/policies-icon.svg" width="36" height="40">
213 251
                  </div>
214
                  <h2 class="uk-margin-remove">
252
                  <h3 class="uk-margin-remove">
215 253
                    <span *ngIf="overviewData.overview.policies?.oa" class="number">{{overviewData.overview.policies.oa | number}}</span>
216 254
                    <span *ngIf="!overviewData.overview.policies || !overviewData.overview.policies.oa" class="number">--</span>
217
                  </h2>
255
                  </h3>
218 256
                </div>
219 257
                <div class="uk-margin-top">
220 258
                  <!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
221
                  <span class="">Number of organizations with OA policies</span>
259
                  <span class="">organizations with <i>OA policies</i></span>
222 260
                </div>
223 261
                <!--<div *ngIf="overviewData.overview.policies?.percentage" class="uk-margin-top">-->
224 262
                  <!--<span class="number">{{overviewData.overview.policies.percentage | number}}%</span> are OA-->

Also available in: Unified diff