Project

General

Profile

« Previous | Next » 

Revision 58904

Working on the new version of the oso - almost done with tha mobile version of the pages

View differences:

home.component.html
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}">
1
<!--LAPTOP & PAD LANDSCAPE-->
2
<div class="uk-visible@m">
3
  <!--MAP AND OVERVIEW NUMBERS SECTION-->
4
  <section class="section greySection" id="sect-overview">
5
    <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 6

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

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

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

  
13 15

  
14 16

  
15
      </div>
17
        </div>
16 18

  
17
      <div class="uk-width-1-5">
18
        <div class="md-card infoBox">
19
          <ng-container *ngIf="!selectedCountry">
20
            <div class="md-card-toolbar">
21
              <h3 class="uk-text-center">OPENAIRE MONITOR OBSERVATORY</h3>
22
            </div>
23
            <div *ngIf="!selectedCountry" class="md-card-content">
24
              <div>An OpenAIRE service to:</div>
25
              <ul>
26
                <li>
27
                  Better understand the European open research landscape
28
                </li>
29
                <li>
30
                  Track trends for open access to publications, data, software
31
                </li>
32
                <li>
33
                  Reveal hidden potential on existing resources
34
                </li>
35
                <li>
36
                  View open collaboration patterns
37
                </li>
38
              </ul>
39
              <div class="uk-text-center uk-margin-medium-top uk-margin-medium-bottom">
40
                <button class="md-btn md-btn-primary">Learn More</button>
19
        <div class="uk-width-1-5">
20
          <div class="md-card infoBox">
21
            <ng-container *ngIf="!selectedCountry">
22
              <div class="md-card-toolbar">
23
                <h3 class="uk-text-center">OPENAIRE MONITOR OBSERVATORY</h3>
41 24
              </div>
25
              <div *ngIf="!selectedCountry" class="md-card-content">
26
                <div>An OpenAIRE service to:</div>
27
                <ul>
28
                  <li>
29
                    Better understand the European open research landscape
30
                  </li>
31
                  <li>
32
                    Track trends for open access to publications, data, software
33
                  </li>
34
                  <li>
35
                    Reveal hidden potential on existing resources
36
                  </li>
37
                  <li>
38
                    View open collaboration patterns
39
                  </li>
40
                </ul>
41
                <div class="uk-text-center uk-margin-medium-top uk-margin-medium-bottom">
42
                  <button class="md-btn md-btn-primary">Learn More</button>
43
                </div>
42 44

  
43
            </div>
44
            <div></div>
45
          </ng-container>
45
              </div>
46
              <div></div>
47
            </ng-container>
46 48

  
47
          <ng-container *ngIf="selectedCountry">
48
            <div class="md-card-toolbar">
49
              <h3 class="uk-text-center uk-margin-small-top">
50
                <a class="backToOriginalInfoBox uk-float-left" (click)="deselectCountry()"><i class="fas fa-angle-left"></i></a>
51
                <img src="../../../assets/img/flags/{{selectedCountry.code | lowercase}}-flag-round.png" class="small-flag-image uk-margin-small-right" width="24" style="margin-top: -3px">
52
                <span>{{selectedCountry.name | uppercase}}</span>
53
              </h3>
54
            </div>
55
            <div *ngIf="!selectedCountryData" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-5x loader" aria-hidden="true"></i></div>
56
            <!--<div *ngIf="!selectedCountryData" class="loading-big">-->
49
            <ng-container *ngIf="selectedCountry">
50
              <div class="md-card-toolbar">
51
                <h3 class="uk-text-center uk-margin-small-top">
52
                  <a class="backToOriginalInfoBox uk-float-left" (click)="deselectCountry()"><i class="fas fa-angle-left"></i></a>
53
                  <img src="../../../assets/img/flags/{{selectedCountry.code | lowercase}}-flag-round.png" class="small-flag-image uk-margin-small-right" width="24" style="margin-top: -3px">
54
                  <span>{{selectedCountry.name | uppercase}}</span>
55
                </h3>
56
              </div>
57
              <div *ngIf="!selectedCountryData" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-5x loader" aria-hidden="true"></i></div>
58
              <!--<div *ngIf="!selectedCountryData" class="loading-big">-->
57 59
              <!--<div uk-spinner="ratio: 2" class="uk-overlay uk-position-center uk-dark" style="margin: auto"></div>-->
58 60
              <!--&lt;!&ndash;<div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">&ndash;&gt;-->
59
                <!--&lt;!&ndash;{{ loadingMessage }}&ndash;&gt;-->
61
              <!--&lt;!&ndash;{{ loadingMessage }}&ndash;&gt;-->
60 62
              <!--&lt;!&ndash;</div>&ndash;&gt;-->
61 63
              <!--<div class="transparentFilm"></div>-->
62
            <!--</div>-->
63
            <div *ngIf="selectedCountryData" class="md-card-content">
64
              <div class="numbers">
65
                <div class="uk-margin-small-top">
64
              <!--</div>-->
65
              <div *ngIf="selectedCountryData" class="md-card-content">
66
                <div class="numbers">
67
                  <div class="uk-margin-small-top">
66 68

  
67
                  <div class="indicator">
68
                    <span class="number publications" *ngIf="selectedCountryData.publicationsAffiliated!=null">{{selectedCountryData.publicationsAffiliated | number}}</span>
69
                    <span class="number publications" *ngIf="selectedCountryData.publicationsAffiliated===null">--</span>
70
                    <span><i>OA publications</i> affiliated to an organization in the country</span>
71
                  </div>
69
                    <div class="indicator">
70
                      <span class="number publications" *ngIf="selectedCountryData.publicationsAffiliated!=null">{{selectedCountryData.publicationsAffiliated | number}}</span>
71
                      <span class="number publications" *ngIf="selectedCountryData.publicationsAffiliated===null">--</span>
72
                      <span><i>OA publications</i> affiliated to an organization in the country</span>
73
                    </div>
72 74

  
73
                  <div class="indicator uk-margin-small-top">
74
                    <span class="number publications" *ngIf="selectedCountryData.publicationsDeposited!=null">{{selectedCountryData.publicationsDeposited | number}}</span>
75
                    <span class="number publications" *ngIf="selectedCountryData.publicationsDeposited===null">--</span>
76
                    <span><i>OA publications</i> from institutional repositories</span>
77
                  </div>
75
                    <div class="indicator uk-margin-small-top">
76
                      <span class="number publications" *ngIf="selectedCountryData.publicationsDeposited!=null">{{selectedCountryData.publicationsDeposited | number}}</span>
77
                      <span class="number publications" *ngIf="selectedCountryData.publicationsDeposited===null">--</span>
78
                      <span><i>OA publications</i> from institutional repositories</span>
79
                    </div>
78 80

  
79
                  <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
81
                    <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
80 82

  
81
                  <div class="indicator">
82
                    <span class="number datasets" *ngIf="selectedCountryData.datasetsAffiliated!=null">{{selectedCountryData.datasetsAffiliated | number}}</span>
83
                    <span class="number datasets" *ngIf="selectedCountryData.datasetsAffiliated===null">--</span>
84
                    <span><i>OA datasets</i> affiliated to an organization in the country</span>
85
                  </div>
83
                    <div class="indicator">
84
                      <span class="number datasets" *ngIf="selectedCountryData.datasetsAffiliated!=null">{{selectedCountryData.datasetsAffiliated | number}}</span>
85
                      <span class="number datasets" *ngIf="selectedCountryData.datasetsAffiliated===null">--</span>
86
                      <span><i>OA datasets</i> affiliated to an organization in the country</span>
87
                    </div>
86 88

  
87
                  <div class="indicator uk-margin-small-top">
88
                    <span class="number datasets" *ngIf="selectedCountryData.datasetsDeposited!=null">{{selectedCountryData.datasetsDeposited | number}}</span>
89
                    <span class="number datasets" *ngIf="selectedCountryData.datasetsDeposited===null">--</span>
90
                    <span><i>OA datasets</i> from institutional repositories</span>
91
                  </div>
89
                    <div class="indicator uk-margin-small-top">
90
                      <span class="number datasets" *ngIf="selectedCountryData.datasetsDeposited!=null">{{selectedCountryData.datasetsDeposited | number}}</span>
91
                      <span class="number datasets" *ngIf="selectedCountryData.datasetsDeposited===null">--</span>
92
                      <span><i>OA datasets</i> from institutional repositories</span>
93
                    </div>
92 94

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

  
95
                  <div class="indicator">
96
                    <span class="number repositories" *ngIf="selectedCountryData.repositories!=null">{{selectedCountryData.repositories | number}}</span>
97
                    <span class="number repositories" *ngIf="selectedCountryData.repositories===null">--</span>
98
                    <span><i>repositories</i> from openDOAR & re3data</span>
99
                  </div>
97
                    <div class="indicator">
98
                      <span class="number repositories" *ngIf="selectedCountryData.repositories!=null">{{selectedCountryData.repositories | number}}</span>
99
                      <span class="number repositories" *ngIf="selectedCountryData.repositories===null">--</span>
100
                      <span><i>repositories</i> from openDOAR & re3data</span>
101
                    </div>
100 102

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

  
103
                  <div class="indicator">
104
                    <span class="number journals" *ngIf="selectedCountryData.journals!=null">{{selectedCountryData.journals | number}}</span>
105
                    <span class="number journals" *ngIf="selectedCountryData.journals===null">--</span>
106
                    <span><i>journals</i> from DOAJ</span>
107
                  </div>
105
                    <div class="indicator">
106
                      <span class="number journals" *ngIf="selectedCountryData.journals!=null">{{selectedCountryData.journals | number}}</span>
107
                      <span class="number journals" *ngIf="selectedCountryData.journals===null">--</span>
108
                      <span><i>journals</i> from DOAJ</span>
109
                    </div>
108 110

  
109
                  <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
111
                    <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
110 112

  
111
                  <div class="indicator">
112
                    <span class="number policies" *ngIf="selectedCountryData.policies!=null">{{selectedCountryData.policies | number}}</span>
113
                    <span class="number policies" *ngIf="selectedCountryData.policies===null">--</span>
114
                    <span>organisations with <i>OA policies</i></span>
113
                    <div class="indicator">
114
                      <span class="number policies" *ngIf="selectedCountryData.policies!=null">{{selectedCountryData.policies | number}}</span>
115
                      <span class="number policies" *ngIf="selectedCountryData.policies===null">--</span>
116
                      <span>organisations with <i>OA policies</i></span>
117
                    </div>
118

  
115 119
                  </div>
116 120

  
117 121
                </div>
118 122

  
119
              </div>
123
                <div class="uk-text-center uk-margin-medium-top">
124
                  <!--<button [routerLink]="['/countryDashboard/' + countrySelectedName]" class="md-btn md-btn-primary">View Details</button>-->
125
                  <button [routerLink]="['/countryDashboard/' + selectedCountry.code]" class="md-btn md-btn-primary">View Details</button>
126
                  <!--<a class="" [routerLink]="['/countryDashboard/' + countrySelectedName]">Detailed View <i class="fas fa-arrow-right uk-margin-small-left"></i></a>-->
127
                </div>
120 128

  
121
              <div class="uk-text-center uk-margin-medium-top">
122
                <!--<button [routerLink]="['/countryDashboard/' + countrySelectedName]" class="md-btn md-btn-primary">View Details</button>-->
123
                <button [routerLink]="['/countryDashboard/' + selectedCountry.code]" class="md-btn md-btn-primary">View Details</button>
124
                <!--<a class="" [routerLink]="['/countryDashboard/' + countrySelectedName]">Detailed View <i class="fas fa-arrow-right uk-margin-small-left"></i></a>-->
125 129
              </div>
126

  
127
            </div>
128
            <div></div>
129
          </ng-container>
130
              <div></div>
131
            </ng-container>
132
          </div>
130 133
        </div>
131
      </div>
132 134

  
133 135

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

  
140 144
    </div>
145
    <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}">
141 146

  
142
  </div>
143
  <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}">
144

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

  
271 275
    </div>
276
  </section>
272 277

  
273
  </div>
274
</section>
275 278

  
279
  <!--OA IN EUROPE SECTION-->
280
  <section class="section greySection" id="sect-tabs">
281
    <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}">
276 282

  
277
<!--OA IN EUROPE SECTION-->
278
<section class="section greySection" id="sect-tabs">
279
  <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}">
283
      <h3>OA in Europe</h3>
280 284

  
281
    <h3>OA in Europe</h3>
285
      <div class="dataContainer">
286
        <div class="uk-margin tabContent">
287
          <app-data-view></app-data-view>
288
          <!--<app-countries-table [isPercentage]="false" [type]="'overview'" [countries]="overviewData.countries"></app-countries-table>-->
289
        </div>
290
      </div>
282 291

  
283
    <div class="dataContainer">
284
      <div class="uk-margin tabContent">
285
        <app-data-view></app-data-view>
286
        <!--<app-countries-table [isPercentage]="false" [type]="'overview'" [countries]="overviewData.countries"></app-countries-table>-->
292
    </div>
293
  </section>
294
</div>
295

  
296

  
297
<!--MOBILE & PAD PORTRAIT-->
298
<div class="uk-hidden@m">
299

  
300
  <section class="section">
301
    <div class="uk-container uk-container-expand uk-container-center ">
302

  
303
      <!--<div class="uk-margin-top">-->
304
        <!--<form class="uk-search uk-search-default searchForCountry">-->
305
          <!--<span uk-search-icon></span>-->
306
          <!--<input class="uk-search-input" type="search" placeholder="Search for a country...">-->
307
        <!--</form>-->
308
      <!--</div>-->
309

  
310
      <div class="uk-margin-top">
311
        <div class="uk-autocomplete uk-form uk-search uk-search-default searchForCountry" data-uk-autocomplete="{source:'https://getuikit.com/v2/tests/components/_autocomplete.json'}">
312
          <span uk-search-icon></span>
313
          <input class="uk-search-input" type="search" placeholder="Search for a country...">
314
          <!--<input type="text">-->
315
        </div>
287 316
      </div>
317

  
318

  
288 319
    </div>
320
  </section>
289 321

  
290
    <!--<div class="">-->
291
      <!--<ul class="uk-tab uk-tab-large uk-flex-center" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">-->
292
        <!--<li class="uk-active" aria-expanded="true"><a href="#">Overview</a></li>-->
293
        <!--<li aria-expanded="false"><a href="#">Open Science</a></li>-->
294
        <!--<li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li>-->
295
        <!--<li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>-->
296
        <!--<li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>-->
297
        <!--&lt;!&ndash;<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>&ndash;&gt;-->
298
      <!--</ul>-->
322
  <section class="section">
323
    <div class="uk-container uk-container-expand uk-container-center ">
299 324

  
300
      <!--<ul *ngIf="overviewData?.countries" id="team_tabbed" class="uk-switcher dataContainer">-->
301
        <!--&lt;!&ndash;OVERVIEW tab&ndash;&gt;-->
302
        <!--<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">-->
303
          <!--<div class="uk-margin tabContent">-->
304
            <!--<app-data-view [type]="'overview'" [countries]="overviewData.countries"></app-data-view>-->
305
            <!--&lt;!&ndash;<app-countries-table [isPercentage]="false" [type]="'overview'" [countries]="overviewData.countries"></app-countries-table>&ndash;&gt;-->
306
          <!--</div>-->
307
        <!--</li>-->
308
        <!--&lt;!&ndash;OPEN SCIENCE tab&ndash;&gt;-->
309
        <!--<li aria-hidden="true" style="animation-duration: 200ms;">-->
310
          <!--<div class="uk-margin tabContent">-->
311
            <!--<app-data-view [type]="'openScience'" [countries]="overviewData.countries"></app-data-view>-->
312
            <!--&lt;!&ndash;<app-countries-table [isPercentage]="false" [type]="'openScience'" [countries]="overviewData.countries"></app-countries-table>&ndash;&gt;-->
313
          <!--</div>-->
314
        <!--</li>-->
315
        <!--<li aria-hidden="true">-->
316
          <!--<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="">-->
317
          <!--</div>-->
318
        <!--</li>-->
319
        <!--<li aria-hidden="true">-->
320
          <!--<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="">-->
321
          <!--</div>-->
322
        <!--</li>-->
323
        <!--<li aria-hidden="true">-->
324
          <!--<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="">-->
325
          <!--</div>-->
326
        <!--</li>-->
327
      <!--</ul>-->
328
    <!--</div>-->
325
      <h3>OA in Europe</h3>
329 326

  
330
  </div>
331
</section>
327
      <div *ngIf="europeOverviewData" class="md-card chartCard overviewMobile">
328
        <div class="md-card-content">
329

  
330

  
331
          <div class="uk-grid uk-margin-top">
332
            <div class="uk-width-1-5">
333
              <img src="../../../assets/img/icons/publications-icon.svg" width="30" height="30">
334
            </div>
335
            <div class="uk-width-2-5">
336
              <div *ngIf="europeOverviewData.publications?.oa" class="number big">{{europeOverviewData.publications.oa | number}}</div>
337
              <div *ngIf="!europeOverviewData.publications || !europeOverviewData.publications.oa" class="number big">--</div>
338
              <div class="uk-margin-small-top">OA PUBLICATIONS</div>
339
            </div>
340
            <div *ngIf="europeOverviewData.publications?.percentage" class="uk-width-2-5">
341
              <div class="progress">
342
                <div [ngStyle]="{'width': europeOverviewData.publications.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
343
              </div>
344
              <div class="uk-margin-small-top">
345
                <span class="number">{{europeOverviewData.publications.percentage | number :'1.0-1'}}%</span> OA
346
              </div>
347
            </div>
348
          </div>
349

  
350
          <div class="uk-grid uk-margin-medium-top">
351
            <div class="uk-width-1-5">
352
              <img src="../../../assets/img/icons/datasets-icon.svg" width="30" height="30">
353
            </div>
354
            <div class="uk-width-2-5">
355
              <div *ngIf="europeOverviewData.datasets?.oa" class="number big">{{europeOverviewData.datasets.oa | number}}</div>
356
              <div *ngIf="!europeOverviewData.datasets || !europeOverviewData.datasets.oa" class="number big">--</div>
357
              <div class="uk-margin-small-top">OA DATASETS</div>
358
            </div>
359
            <div *ngIf="europeOverviewData.datasets?.percentage" class="uk-width-2-5">
360
              <div class="progress">
361
                <div [ngStyle]="{'width': europeOverviewData.datasets.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
362
              </div>
363
              <div class="uk-margin-small-top">
364
                <span class="number">{{europeOverviewData.datasets.percentage | number :'1.0-1'}}%</span> OA
365
              </div>
366
            </div>
367
          </div>
368

  
369
          <div class="uk-grid uk-margin-medium-top">
370
            <div class="uk-width-1-5">
371
              <img src="../../../assets/img/icons/repositories-icon.svg" width="30" height="30">
372
            </div>
373
            <div class="uk-width-2-5">
374
              <div *ngIf="europeOverviewData.repositories?.oa" class="number big">{{europeOverviewData.repositories.oa | number}}</div>
375
              <div *ngIf="!europeOverviewData.repositories || !europeOverviewData.repositories.oa" class="number big">--</div>
376
              <div class="uk-margin-small-top">VALIDATED REPOSITORIES</div>
377
            </div>
378
            <div *ngIf="europeOverviewData.repositories?.percentage" class="uk-width-2-5">
379
              <div class="progress">
380
                <div [ngStyle]="{'width': europeOverviewData.repositories.percentage+'%'}" class="progress-bar progress-bar-repositories animate-progress-bar"></div>
381
              </div>
382
              <div class="uk-margin-small-top">
383
                <span class="number">{{europeOverviewData.repositories.percentage | number :'1.0-1'}}%</span> VALIDATED
384
              </div>
385
            </div>
386
          </div>
387

  
388
          <div class="uk-grid uk-margin-medium-top">
389
            <div class="uk-width-1-5">
390
              <img src="../../../assets/img/icons/journals-icon.svg" width="30" height="30">
391
            </div>
392
            <div class="uk-width-2-5">
393
              <div *ngIf="europeOverviewData.journals?.oa" class="number big">{{europeOverviewData.journals.oa | number}}</div>
394
              <div *ngIf="!europeOverviewData.journals || !europeOverviewData.journals.oa" class="number big">--</div>
395
              <div class="uk-margin-small-top">VALIDATED JOURNALS</div>
396
            </div>
397
            <div *ngIf="europeOverviewData.journals?.percentage" class="uk-width-2-5">
398
              <div class="progress">
399
                <div [ngStyle]="{'width': europeOverviewData.journals.percentage+'%'}" class="progress-bar progress-bar-journals animate-progress-bar"></div>
400
              </div>
401
              <div class="uk-margin-small-top">
402
                <span class="number">{{europeOverviewData.journals.percentage | number : '1.0-1'}}%</span> Validated
403
              </div>
404
            </div>
405
          </div>
406

  
407
          <div class="uk-grid uk-margin-medium-top uk-margin-bottom">
408
            <div class="uk-width-1-5">
409
              <img src="../../../assets/img/icons/policies-icon.svg" width="30" height="30">
410
            </div>
411
            <div class="uk-width-2-5">
412
              <div *ngIf="europeOverviewData.policies?.oa" class="number big">{{europeOverviewData.policies.oa | number}}</div>
413
              <div *ngIf="!europeOverviewData.policies || !europeOverviewData.policies.oa" class="number big">--</div>
414
              <div class="uk-margin-small-top">OA POLICIES</div>
415
            </div>
416
            <div class="uk-width-2-5">
417

  
418
            </div>
419
          </div>
420

  
421
        </div>
422
      </div>
423

  
424
    </div>
425
  </section>
426

  
427
  <section class="section">
428
    <div class="uk-container uk-container-expand uk-container-center ">
429

  
430
      <h3>Leading Open Science</h3>
431

  
432
      <div *ngIf="leadingOpenScienceData" class="uk-grid uk-grid-small uk-grid-match uk-child-width-1-2">
433

  
434
        <div *ngFor="let data of leadingOpenScienceData" class="uk-margin-small-top">
435
          <div class="md-card leadingOpenScienceCard">
436
            <a [routerLink]="['/countryDashboard/' + data.code]" class="el-link uk-position-cover uk-margin-remove-adjacent"></a>
437
            <div class="md-card-content">
438
              <div class="uk-flex">
439
                <img src="../../../assets/img/flags/{{data.code | lowercase}}-flag.svg" width="15">
440
                <span class="countryName uk-margin-small-left">{{data.name}}</span>
441
              </div>
442
              <div class="indicator uk-margin-top">
443
                <!--<span class="number publications">18,165</span>-->
444
                <span class="number publications" *ngIf="data.publicationsAffiliated!=null">{{data.publicationsAffiliated | number}}</span>
445
                <span class="number publications" *ngIf="data.publicationsAffiliated===null">--</span>
446
                <span><i>OA publications</i> affiliated to an organization in the country</span>
447
              </div>
448
              <div class="indicator uk-margin-top">
449
                <!--<span class="number publications">18,165</span>-->
450
                <span class="number publications" *ngIf="data.publicationsDeposited!=null">{{data.publicationsDeposited | number}}</span>
451
                <span class="number publications" *ngIf="data.publicationsDeposited===null">--</span>
452
                <span><i>OA publications</i> from institutional repositories</span>
453
              </div>
454
            </div>
455
          </div>
456
        </div>
457

  
458
      </div>
459

  
460
    </div>
461
  </section>
462

  
463
  <section class="section">
464
    <div class="uk-container uk-container-expand uk-container-center ">
465
      <div class="goToDetailedViewLink">
466
        <a class="" [routerLink]="['/overview/' + 'europe']">Detailed View of OA in Europe<i class="fas fa-arrow-right uk-margin-small-left"></i></a>
467
      </div>
468
    </div>
469
  </section>
470
</div>
471

  
472

  
473

  

Also available in: Unified diff