Project

General

Profile

« Previous | Next » 

Revision 58853

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

View differences:

country-page.component.html
2 2
  <div class="uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up uk-padding-remove" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
3 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" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">-->
4 4

  
5

  
6 5
    <div class="uk-grid uk-grid-small">
7 6

  
8 7
      <div class="uk-width-4-5 uk-margin-medium-bottom">
9 8

  
10 9
        <div class="uk-container uk-container-expand uk-margin-medium-top">
10

  
11 11
          <ul class="uk-breadcrumb">
12 12
            <li><a [routerLink]="['/home']">Home</a></li>
13 13
            <li><span>{{countryName}}</span></li>
14 14
          </ul>
15
        </div>
16 15

  
17
        <div class="uk-container uk-container-expand uk-margin-top">
18
          <div class="actionButtonsCountryPage uk-text-right">
19
            <a class=""><i class="fas fa-code uk-margin-small-right"></i>Embed</a>
20
            <!--<a class="uk-margin-left"><i class="fas fa-download uk-margin-small-right"></i>Download CSV</a>-->
21
            <a class="uk-margin-left"><i class="fas fa-file-pdf uk-margin-small-right"></i>Download PDF</a>
16

  
17
          <div class="countryPageHeader">
18
            <div *ngIf="countryPageOverviewData && countryPageOverviewData.name" class="">
19
              <img src="../../../assets/img/flags/{{countryCode | lowercase}}-flag-round.png" class="flag-image" width="132" height="132">
20
              <div class="uk-inline uk-margin-left">
21
                <h1>{{countryPageOverviewData.name}}</h1>
22
                <span class="lastUpdateInfo">Info Last Updated: 21 May 2020</span>
23
              </div>
24
            </div>
25

  
26
            <div class="actionButtonsCountryPage uk-text-right">
27
              <a class=""><i class="fas fa-code uk-margin-small-right"></i>Embed</a>
28
              <!--<a class="uk-margin-left"><i class="fas fa-download uk-margin-small-right"></i>Download CSV</a>-->
29
              <a class="uk-margin-left"><i class="fas fa-file-pdf uk-margin-small-right"></i>Download PDF</a>
30
            </div>
22 31
          </div>
32

  
23 33
        </div>
24 34

  
35

  
25 36
        <div class="uk-container uk-container-expand uk-margin-top">
26 37
          <!--Overview cards-->
27 38
          <div class="uk-width-1-1 indicatorCards">
......
34 45

  
35 46
                    <!--top number-->
36 47
                    <div class="uk-margin-top">
37
                      <div class="uk-float-right uk-margin-small-right">
38
                        <img src="../../../assets/img/icons/publications-icon.svg" width="40" height="40">
39
                      </div>
48
                      <!--<div class="uk-float-right uk-margin-small-right">-->
49
                      <!--<img src="../../../assets/img/icons/publications-icon.svg" width="40" height="40">-->
50
                      <!--</div>-->
40 51
                      <h3 class="uk-margin-remove">
41
                        <span *ngIf="!countryData || !countryData.publications || !countryData.publications.oa" class="number">--</span>
42
                        <span *ngIf="countryData?.publications?.oa" class="number">{{countryData.publications.oa | number}}</span>
52
                        <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.publicationsAffiliated || !countryPageOverviewData.publicationsAffiliated.oa" class="number">--</span>
53
                        <span *ngIf="countryPageOverviewData?.publicationsAffiliated?.oa" class="number">{{countryPageOverviewData.publicationsAffiliated.oa | number}}</span>
43 54
                      </h3>
44 55
                    </div>
45 56
                    <div class="uk-margin-top">
46
                      <span class=""><i>OA publications from institutional repositories</i></span>
57
                      <span class=""><i>OA publications affiliated to an organization in the country</i></span>
47 58
                    </div>
48
                    <div *ngIf="countryData?.publications?.percentage" class="uk-margin-top">
49
                      <span class="number">{{countryData.publications.percentage | number :'1.0-1'}}%</span> OA
59
                    <div *ngIf="countryPageOverviewData?.publicationsAffiliated?.percentage" class="uk-margin-top">
60
                      <span class="number">{{countryPageOverviewData.publicationsAffiliated.percentage | number :'1.0-1'}}%</span> OA
50 61
                      <div class="progress uk-margin-small-top">
51
                        <div [ngStyle]="{'width': countryData.publications.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
62
                        <div [ngStyle]="{'width': countryPageOverviewData.publicationsAffiliated.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
52 63
                      </div>
53 64
                    </div>
54 65

  
......
56 67

  
57 68
                    <!--bottom number-->
58 69
                    <div class="uk-margin-top">
59
                      <!--<div class="uk-float-right uk-margin-small-right">-->
60
                        <!--<img src="../../../assets/img/icons/publications-icon.svg" width="40" height="40">-->
61
                      <!--</div>-->
70
                      <div class="uk-float-right uk-margin-small-right">
71
                        <img src="../../../assets/img/icons/publications-icon.svg" width="40" height="40">
72
                      </div>
62 73
                      <h3 class="uk-margin-remove">
63
                        <span *ngIf="!countryData || !countryData.publications || !countryData.publications.oa" class="number">--</span>
64
                        <span *ngIf="countryData?.publications?.oa" class="number">{{countryData.publications.oa | number}}</span>
74
                        <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.publicationsDeposited || !countryPageOverviewData.publicationsDeposited.oa" class="number">--</span>
75
                        <span *ngIf="countryPageOverviewData?.publicationsDeposited?.oa" class="number">{{countryPageOverviewData.publicationsDeposited.oa | number}}</span>
65 76
                      </h3>
66 77
                    </div>
67 78
                    <div class="uk-margin-top">
68
                      <span class=""><i>OA publications affiliated to an organization in the country</i></span>
79
                      <span class=""><i>OA publications from institutional repositories</i></span>
69 80
                    </div>
70
                    <div *ngIf="countryData?.publications?.percentage" class="uk-margin-top">
71
                      <span class="number">{{countryData.publications.percentage | number :'1.0-1'}}%</span> OA
81
                    <div *ngIf="countryPageOverviewData?.publicationsDeposited?.percentage" class="uk-margin-top">
82
                      <span class="number">{{countryPageOverviewData.publicationsDeposited.percentage | number :'1.0-1'}}%</span> OA
72 83
                      <div class="progress uk-margin-small-top">
73
                        <div [ngStyle]="{'width': countryData.publications.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
84
                        <div [ngStyle]="{'width': countryPageOverviewData.publicationsDeposited.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
74 85
                      </div>
75 86
                    </div>
87

  
76 88
                  </div>
77 89
                </div>
78 90
              </div>
......
83 95

  
84 96
                    <!--top number-->
85 97
                    <div class="uk-margin-top">
86
                      <div class="uk-float-right uk-margin-small-right">
87
                        <img src="../../../assets/img/icons/datasets-icon.svg" width="33" height="40">
88
                      </div>
98
                      <!--<div class="uk-float-right uk-margin-small-right">-->
99
                      <!--<img src="../../../assets/img/icons/datasets-icon.svg" width="33" height="40">-->
100
                      <!--</div>-->
89 101
                      <h3 class="uk-margin-remove">
90
                        <span *ngIf="!countryData || !countryData.datasets || !countryData.datasets.oa" class="number">--</span>
91
                        <span *ngIf="countryData?.datasets?.oa" class="number">{{countryData.datasets.oa | number}}</span>
102
                        <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.datasetsAffiliated || !countryPageOverviewData.datasetsAffiliated.oa" class="number">--</span>
103
                        <span *ngIf="countryPageOverviewData?.datasetsAffiliated?.oa" class="number">{{countryPageOverviewData.datasetsAffiliated.oa | number}}</span>
92 104
                      </h3>
93 105
                    </div>
94 106
                    <div class="uk-margin-top">
95
                      <span class=""><i>OA datasets from institutional repositories</i></span>
107
                      <span class=""><i>OA datasets affiliated to an organization in the country</i></span>
96 108
                    </div>
97
                    <div *ngIf="countryData?.datasets?.percentage" class="uk-margin-top">
98
                      <span class="number">{{countryData.datasets.percentage | number :'1.0-1'}}%</span> OA
109
                    <div *ngIf="countryPageOverviewData?.datasetsAffiliated?.percentage" class="uk-margin-top">
110
                      <span class="number">{{countryPageOverviewData.datasetsAffiliated.percentage | number :'1.0-1'}}%</span> OA
99 111
                      <div class="progress uk-margin-small-top">
100
                        <div [ngStyle]="{'width': countryData.datasets.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
112
                        <div [ngStyle]="{'width': countryPageOverviewData.datasetsAffiliated.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
101 113
                      </div>
102 114
                    </div>
103 115

  
......
105 117

  
106 118
                    <!--bottom number-->
107 119
                    <div class="uk-margin-top">
108
                      <!--<div class="uk-float-right uk-margin-small-right">-->
109
                        <!--<img src="../../../assets/img/icons/datasets-icon.svg" width="33" height="40">-->
110
                      <!--</div>-->
120
                      <div class="uk-float-right uk-margin-small-right">
121
                        <img src="../../../assets/img/icons/datasets-icon.svg" width="33" height="40">
122
                      </div>
111 123
                      <h3 class="uk-margin-remove">
112
                        <span *ngIf="!countryData || !countryData.datasets || !countryData.datasets.oa" class="number">--</span>
113
                        <span *ngIf="countryData?.datasets?.oa" class="number">{{countryData.datasets.oa | number}}</span>
124
                        <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.datasetsDeposited || !countryPageOverviewData.datasetsDeposited.oa" class="number">--</span>
125
                        <span *ngIf="countryPageOverviewData?.datasetsDeposited?.oa" class="number">{{countryPageOverviewData.datasetsDeposited.oa | number}}</span>
114 126
                      </h3>
115 127
                    </div>
116 128
                    <div class="uk-margin-top">
117
                      <span class=""><i>OA datasets affiliated to an organization in the country</i></span>
129
                      <span class=""><i>OA datasets from institutional repositories</i></span>
118 130
                    </div>
119
                    <div *ngIf="countryData?.datasets?.percentage" class="uk-margin-top">
120
                      <span class="number">{{countryData.datasets.percentage | number :'1.0-1'}}%</span> OA
131
                    <div *ngIf="countryPageOverviewData?.datasetsDeposited?.percentage" class="uk-margin-top">
132
                      <span class="number">{{countryPageOverviewData.datasetsDeposited.percentage | number :'1.0-1'}}%</span> OA
121 133
                      <div class="progress uk-margin-small-top">
122
                        <div [ngStyle]="{'width': countryData.datasets.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
134
                        <div [ngStyle]="{'width': countryPageOverviewData.datasetsDeposited.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
123 135
                      </div>
124 136
                    </div>
125 137
                  </div>
......
135 147
                        <img src="../../../assets/img/icons/repositories-icon.svg" width="43" height="40">
136 148
                      </div>
137 149
                      <h3 class="uk-margin-remove">
138
                        <span *ngIf="!countryData || !countryData.repositories || !countryData.repositories.oa" class="number">--</span>
139
                        <span *ngIf="countryData?.repositories?.oa" class="number">{{countryData.repositories.oa | number}}</span>
150
                        <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.repositories || !countryPageOverviewData.repositories.oa" class="number">--</span>
151
                        <span *ngIf="countryPageOverviewData?.repositories?.oa" class="number">{{countryPageOverviewData.repositories.oa | number}}</span>
140 152
                      </h3>
141 153
                    </div>
142 154
                    <div class="uk-margin-top">
143 155
                      <span class=""><i>repositories</i> from openDOAR & re3data</span>
144 156
                    </div>
145
                    <div *ngIf="countryData?.repositories?.percentage" class="uk-margin-top">
146
                      <span class="number">{{countryData.repositories.percentage | number :'1.0-1'}}%</span> Certified
157
                    <div *ngIf="countryPageOverviewData?.repositories?.percentage" class="uk-margin-top">
158
                      <span class="number">{{countryPageOverviewData.repositories.percentage | number :'1.0-1'}}%</span> Validated
147 159
                      <div class="progress uk-margin-small-top">
148
                        <div [ngStyle]="{'width': countryData.repositories.percentage+'%'}" class="progress-bar progress-bar-repositories animate-progress-bar"></div>
160
                        <div [ngStyle]="{'width': countryPageOverviewData.repositories.percentage+'%'}" class="progress-bar progress-bar-repositories animate-progress-bar"></div>
149 161
                      </div>
150 162
                    </div>
151 163
                  </div>
......
158 170
                        <img src="../../../assets/img/icons/journals-icon.svg" width="43" height="40">
159 171
                      </div>
160 172
                      <h3 class="uk-margin-remove">
161
                        <span *ngIf="!countryData || !countryData.journals || !countryData.journals.oa" class="number">--</span>
162
                        <span *ngIf="countryData?.journals?.oa" class="number">{{countryData.journals.oa | number}}</span>
173
                        <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.journals || !countryPageOverviewData.journals.oa" class="number">--</span>
174
                        <span *ngIf="countryPageOverviewData?.journals?.oa" class="number">{{countryPageOverviewData.journals.oa | number}}</span>
163 175
                        <!--<span *ngIf="overviewData.overview.journals?.oa" class="number">{{overviewData.overview.journals.oa | number}}</span>-->
164 176
                        <!--<span *ngIf="!overviewData.overview.journals || !overviewData.overview.journals.oa" class="number">--</span>-->
165 177
                      </h3>
......
167 179
                    <div class="uk-margin-top">
168 180
                      <span class=""><i>OA journals</i> from DOAJ</span>
169 181
                    </div>
170
                    <div *ngIf="countryData.journals?.percentage" class="uk-margin-top">
171
                      <span class="number">{{countryData.journals.percentage | number :'1.0-1'}}%</span> Certified
182
                    <div *ngIf="countryPageOverviewData?.journals?.percentage" class="uk-margin-top">
183
                      <span class="number">{{countryPageOverviewData.journals.percentage | number :'1.0-1'}}%</span> Validated
172 184
                      <div class="progress uk-margin-small-top">
173
                        <div [ngStyle]="{'width': countryData.journals.percentage+'%'}" class="progress-bar progress-bar-journals animate-progress-bar"></div>
185
                        <div [ngStyle]="{'width': countryPageOverviewData.journals.percentage+'%'}" class="progress-bar progress-bar-journals animate-progress-bar"></div>
174 186
                      </div>
175 187
                    </div>
176 188
                  </div>
......
503 515

  
504 516
          <div class="md-card-toolbar">
505 517
            <h3 class="uk-text-center uk-margin-small-top">
506
              {{countryName | uppercase}}
518
              Research overview
507 519
            </h3>
508 520
          </div>
509 521

  
......
518 530
              <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
519 531

  
520 532
              <div class="indicator">
521
                <span class="number primary" *ngIf="countryData?.funders?.oa">{{countryData.funders.oa}}</span>
522
                <span class="number primary" *ngIf="!countryData || !countryData.funders || !countryData.funders.oa">--</span>
533
                <span class="number primary" *ngIf="countryPageOverviewData?.funders">{{countryPageOverviewData.funders}}</span>
534
                <span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.funders">--</span>
523 535
                <span><i>funding sources</i></span>
524 536
              </div>
525 537

  
526 538
              <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
527 539

  
528 540
              <div class="indicator">
529
                <span class="number primary" *ngIf="countryData?.funders?.total">{{countryData.funders.total}}</span>
530
                <span class="number primary" *ngIf="!countryData || !countryData.funders || !countryData.funders.total">--</span>
541
                <span class="number primary" *ngIf="countryPageOverviewData?.fundingOrganizations">{{countryPageOverviewData.fundingOrganizations}}</span>
542
                <span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.fundingOrganizations">--</span>
531 543
                <span><i>funding organizations</i></span>
532 544
              </div>
533 545

  
534 546
              <hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
535 547

  
536 548
              <div class="indicator">
537
                <span class="number primary" *ngIf="countryData?.ecFundedOrganizations?.oa">{{countryData.ecFundedOrganizations.oa}}</span>
538
                <span class="number primary" *ngIf="!countryData || !countryData.ecFundedOrganizations || !countryData.ecFundedOrganizations.oa">--</span>
549
                <span class="number primary" *ngIf="countryPageOverviewData?.ec_fundedOrganizations">{{countryPageOverviewData.ec_fundedOrganizations}}</span>
550
                <span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.ec_fundedOrganizations">--</span>
539 551
                <span><i>organizations funded by the European commission since 2013</i></span>
540 552
              </div>
541 553

  
......
552 564
              <a class="uk-link" href="{{linkToCountryInOpenAIRE}}" target="_blank">Country page in <strong>OpenAIRE</strong><i class="fas fa-long-arrow-alt-right uk-margin-left"></i></a>
553 565
            </div>
554 566

  
555
            <div class="uk-text-meta uk-text-small uk-margin-medium-top">
556
                <span class="uk-margin-right" style="opacity: 0.8; float: left; margin-top: 7px;">
557
                  <img src="../../../assets/img/Open_Research_Graph.svg">
558
                </span>
559
              <span>Powered by <a target="_blank" href="" style="text-decoration: underline">OpenAIRE Open Research Graph</a></span>
560
            </div>
561

  
562 567
          </div>
563 568
        </div>
564 569
      </div>

Also available in: Unified diff