Project

General

Profile

1
<!--MAP AND OVERVIEW NUMBERS SECTION-->
2
<section class="section greySection" id="sect-overview">
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

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

    
7
      <div class="uk-width-4-5">
8

    
9
        <!--Map Container-->
10
        <app-map-overview *ngIf="overviewData?.countries" (emitSelectedCountry)="countrySelected($event)"></app-map-overview>
11

    
12

    
13

    
14
      </div>
15

    
16
      <div class="uk-width-1-5">
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>
21
            </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>
40
              </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>
46
              </div>
47
            </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

    
111
                </div>
112

    
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>
125
            </div>
126
            <div></div>
127
          </ng-container>
128
        </div>
129
      </div>
130

    
131

    
132
      <!--<div class="uk-width-large-3-5 uk-container-center uk-text-center">-->
133
        <!--<h2 class="heading_b">-->
134
          <!--Our Team-->
135
          <!--<span class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>-->
136
        <!--</h2>-->
137
      <!--</div>-->
138
    </div>
139

    
140
  </div>
141
  <div class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
142

    
143
    <div class="">
144
      <!--Overview cards-->
145
      <div *ngIf="overviewData?.overview" class="uk-width-1-1 indicatorCards">
146
        <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="">
147
          <div class="uk-row-first">
148
            <div class="md-card">
149
              <div class="md-card-content">
150
                <div class="uk-margin-top">
151
                  <div class="uk-float-right uk-margin-small-right">
152
                    <img src="../../../assets/img/icons/publications-icon.svg" width="40" height="40">
153
                  </div>
154
                  <h3 class="uk-margin-remove">
155
                    <span *ngIf="overviewData.overview.publications?.oa" class="number">{{overviewData.overview.publications.oa | number}}</span>
156
                    <span *ngIf="!overviewData.overview.publications || !overviewData.overview.publications.oa" class="number">--</span>
157
                  </h3>
158
                </div>
159
                <div class="uk-margin-top">
160
                  <!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
161
                  <span class=""><i>OA publications</i></span>
162
                </div>
163
                <div *ngIf="overviewData.overview.publications?.percentage" class="uk-margin-top">
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>
168
                </div>
169
              </div>
170
            </div>
171
          </div>
172
          <div class="">
173
            <div class="md-card">
174
              <div class="md-card-content">
175
                <div class="uk-margin-top">
176
                  <div class="uk-float-right uk-margin-small-right">
177
                    <img src="../../../assets/img/icons/datasets-icon.svg" width="33" height="40">
178
                  </div>
179
                  <h3 class="uk-margin-remove">
180
                    <span *ngIf="overviewData.overview.datasets?.oa" class="number">{{overviewData.overview.datasets.oa | number}}</span>
181
                    <span *ngIf="!overviewData.overview.datasets || !overviewData.overview.datasets.oa" class="number">--</span>
182
                  </h3>
183
                </div>
184
                <div class="uk-margin-top">
185
                  <!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
186
                  <span class=""><i>OA datasets</i></span>
187
                </div>
188
                <div *ngIf="overviewData.overview.datasets?.percentage" class="uk-margin-top">
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>
193
                </div>
194
              </div>
195
            </div>
196
          </div>
197
          <div class="">
198
            <div class="md-card">
199
              <div class="md-card-content">
200
                <div class="uk-margin-top">
201
                  <div class="uk-float-right uk-margin-small-right">
202
                    <img src="../../../assets/img/icons/repositories-icon.svg" width="43" height="40">
203
                  </div>
204
                  <h3 class="uk-margin-remove">
205
                    <span *ngIf="overviewData.overview.repositories?.oa" class="number">{{overviewData.overview.repositories.oa | number}}</span>
206
                    <span *ngIf="!overviewData.overview.repositories || !overviewData.overview.repositories.oa" class="number">--</span>
207
                  </h3>
208
                </div>
209
                <div class="uk-margin-top">
210
                  <span class=""><i>repositories</i> from openDOAR & re3data</span>
211
                </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>
218
              </div>
219
            </div>
220
          </div>
221
          <div class="">
222
            <div class="md-card">
223
              <div class="md-card-content">
224
                <div class="uk-margin-top">
225
                  <div class="uk-float-right uk-margin-small-right">
226
                    <img src="../../../assets/img/icons/journals-icon.svg" width="43" height="40">
227
                  </div>
228
                  <h3 class="uk-margin-remove">
229
                    <span *ngIf="overviewData.overview.journals?.oa" class="number">{{overviewData.overview.journals.oa | number}}</span>
230
                    <span *ngIf="!overviewData.overview.journals || !overviewData.overview.journals.oa" class="number">--</span>
231
                  </h3>
232
                </div>
233
                <div class="uk-margin-top">
234
                  <span class=""><i>OA journals</i> from DOAJ</span>
235
                </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>
242
              </div>
243
            </div>
244
          </div>
245
          <div class="">
246
            <div class="md-card">
247
              <div class="md-card-content">
248
                <div class="uk-margin-top">
249
                  <div class="uk-float-right uk-margin-small-right">
250
                    <img src="../../../assets/img/icons/policies-icon.svg" width="36" height="40">
251
                  </div>
252
                  <h3 class="uk-margin-remove">
253
                    <span *ngIf="overviewData.overview.policies?.oa" class="number">{{overviewData.overview.policies.oa | number}}</span>
254
                    <span *ngIf="!overviewData.overview.policies || !overviewData.overview.policies.oa" class="number">--</span>
255
                  </h3>
256
                </div>
257
                <div class="uk-margin-top">
258
                  <!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
259
                  <span class="">organizations with <i>OA policies</i></span>
260
                </div>
261
                <!--<div *ngIf="overviewData.overview.policies?.percentage" class="uk-margin-top">-->
262
                  <!--<span class="number">{{overviewData.overview.policies.percentage | number}}%</span> are OA-->
263
                <!--</div>-->
264
              </div>
265
            </div>
266
          </div>
267
        </div>
268
      </div>
269
    </div>
270

    
271
  </div>
272
</section>
273

    
274

    
275
<!--TABS SECTION-->
276
<section class="section greySection" id="sect-tabs">
277
  <div class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
278

    
279
    <div class="">
280
      <ul class="uk-tab uk-tab-large uk-flex-center" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
281
        <li class="uk-active" aria-expanded="true"><a href="#">Overview</a></li>
282
        <li aria-expanded="false"><a href="#">Open Science</a></li>
283
        <li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li>
284
        <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>
285
        <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>
286
        <!--<li class="uk-tab-responsive uk-active uk-hidden" aria-haspopup="true" aria-expanded="false"><a>Developers</a><div class="uk-dropdown uk-dropdown-small" aria-hidden="true"><ul class="uk-nav uk-nav-dropdown"></ul><div></div></div></li>-->
287
      </ul>
288

    
289
      <ul *ngIf="overviewData?.countries" id="team_tabbed" class="uk-switcher">
290
        <!--OVERVIEW tab-->
291
        <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
292
          <div class="uk-margin tabContent">
293
            <app-data-view [type]="'overview'" [countries]="overviewData.countries"></app-data-view>
294
            <!--<app-countries-table [isPercentage]="false" [type]="'overview'" [countries]="overviewData.countries"></app-countries-table>-->
295
          </div>
296
        </li>
297
        <!--OPEN SCIENCE tab-->
298
        <li aria-hidden="true" style="animation-duration: 200ms;">
299
          <div class="uk-margin tabContent">
300
            <app-data-view [type]="'openScience'" [countries]="overviewData.countries"></app-data-view>
301
            <!--<app-countries-table [isPercentage]="false" [type]="'openScience'" [countries]="overviewData.countries"></app-countries-table>-->
302
          </div>
303
        </li>
304
        <li aria-hidden="true">
305
          <div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">
306
          </div>
307
        </li>
308
        <li aria-hidden="true">
309
          <div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">
310
          </div>
311
        </li>
312
        <li aria-hidden="true">
313
          <div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">
314
          </div>
315
        </li>
316
      </ul>
317
    </div>
318

    
319
  </div>
320
</section>
(9-9/10)