Project

General

Profile

« Previous | Next » 

Revision 58825

Working on the new version of the oso. Work on the home page almost done

View differences:

countries-table.component.html
2 2
  <thead>
3 3
    <tr>
4 4
      <th width="12,5%" class="" (click)="sortBy('country')">
5
        <span *ngIf="!isSortedBy || isSortedBy!='country'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>
6
        <span *ngIf="isSortedBy && isSortedBy=='country' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>
7
        <span *ngIf="isSortedBy && isSortedBy=='country' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>
5 8
        Country
6
        <span *ngIf="isSortedBy && isSortedBy=='country' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
7
        <span *ngIf="isSortedBy && isSortedBy=='country' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
8 9
      </th>
9
      <th *ngIf="type=='overview'" class="uk-text-center" width="12,5%" (click)="sortBy('repositories')">
10
        <i class="fa fa-sort-numeric-desc m-r-10 uk-margin-right"></i>OA repositories
11
        <span *ngIf="isSortedBy && isSortedBy=='repositories' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
12
        <span *ngIf="isSortedBy && isSortedBy=='repositories' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
10
      <th width="12,5%" (click)="sortBy('repositories')">
11
        <span *ngIf="!isSortedBy || isSortedBy!='repositories'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>
12
        <span *ngIf="isSortedBy && isSortedBy=='repositories' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>
13
        <span *ngIf="isSortedBy && isSortedBy=='repositories' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>
14
        OA repositories
13 15
      </th>
14
      <th *ngIf="type=='overview'" class="uk-text-center" width="12,5%" (click)="sortBy('journals')">
15
        <i class="fa fa-sort-numeric-desc m-r-10 uk-margin-right"></i>OA journals
16
        <span *ngIf="isSortedBy && isSortedBy=='journals' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
17
        <span *ngIf="isSortedBy && isSortedBy=='journals' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
16
      <th width="12,5%" (click)="sortBy('journals')">
17
        <span *ngIf="!isSortedBy || isSortedBy!='journals'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>
18
        <span *ngIf="isSortedBy && isSortedBy=='journals' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>
19
        <span *ngIf="isSortedBy && isSortedBy=='journals' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>
20
        OA journals
18 21
      </th>
19
      <th *ngIf="type=='overview'" class="uk-text-center" width="12,5%" (click)="sortBy('policies')">
20
        <i class="fa fa-sort-numeric-desc m-r-10 uk-margin-right"></i>OA policies
21
        <span *ngIf="isSortedBy && isSortedBy=='policies' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
22
        <span *ngIf="isSortedBy && isSortedBy=='policies' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
22
      <!--<th *ngIf="type=='overview'" class="uk-text-center" width="12,5%" (click)="sortBy('policies')">-->
23
        <!--<span *ngIf="!isSortedBy || isSortedBy!='policies'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>-->
24
        <!--<span *ngIf="isSortedBy && isSortedBy=='policies' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>-->
25
        <!--<span *ngIf="isSortedBy && isSortedBy=='policies' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>-->
26
        <!--OA policies-->
27
      <!--</th>-->
28
      <th class="uk-text-center" width="12,5%" (click)="sortBy('publications')">
29
        <span *ngIf="!isSortedBy || isSortedBy!='publications'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>
30
        <span *ngIf="isSortedBy && isSortedBy=='publications' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>
31
        <span *ngIf="isSortedBy && isSortedBy=='publications' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>
32
        OA publications
23 33
      </th>
24
      <th *ngIf="type=='overview' || type=='openScience'" class="uk-text-center" width="12,5%" (click)="sortBy('publications')">
25
        <i class="fa fa-sort-numeric-desc m-r-10 uk-margin-right"></i>OA publications
26
        <span *ngIf="isSortedBy && isSortedBy=='publications' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
27
        <span *ngIf="isSortedBy && isSortedBy=='publications' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
34
      <th class="uk-text-center" width="12,5%" (click)="sortBy('datasets')">
35
        <span *ngIf="!isSortedBy || isSortedBy!='datasets'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>
36
        <span *ngIf="isSortedBy && isSortedBy=='datasets' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>
37
        <span *ngIf="isSortedBy && isSortedBy=='datasets' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>
38
        OA data
28 39
      </th>
29
      <th *ngIf="type=='overview' || type=='openScience'" class="uk-text-center" width="12,5%" (click)="sortBy('datasets')">
30
        <i class="fa fa-sort-numeric-desc m-r-10 uk-margin-right"></i>OA data
31
        <span *ngIf="isSortedBy && isSortedBy=='datasets' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
32
        <span *ngIf="isSortedBy && isSortedBy=='datasets' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
40
      <th class="uk-text-center" width="12,5%" (click)="sortBy('software')">
41
        <span *ngIf="!isSortedBy || isSortedBy!='software'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>
42
        <span *ngIf="isSortedBy && isSortedBy=='software' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>
43
        <span *ngIf="isSortedBy && isSortedBy=='software' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>
44
        OA software
33 45
      </th>
34
      <th *ngIf="type=='overview' || type=='openScience'" class="uk-text-center" width="12,5%" (click)="sortBy('software')">
35
        <i class="fa fa-sort-numeric-desc m-r-10 uk-margin-right"></i>OA software
36
        <span *ngIf="isSortedBy && isSortedBy=='software' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
37
        <span *ngIf="isSortedBy && isSortedBy=='software' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
46
      <th class="uk-text-center" width="12,5%" (click)="sortBy('other')">
47
        <span *ngIf="!isSortedBy || isSortedBy!='other'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>
48
        <span *ngIf="isSortedBy && isSortedBy=='other' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>
49
        <span *ngIf="isSortedBy && isSortedBy=='other' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>
50
        OA other
38 51
      </th>
39
      <th *ngIf="type=='overview' || type=='openScience'" class="uk-text-center" width="12,5%" (click)="sortBy('otherProducts')">
40
        <i class="fa fa-sort-numeric-desc m-r-10 uk-margin-right"></i>OA other research products
41
        <span *ngIf="isSortedBy && isSortedBy=='otherProducts' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
42
        <span *ngIf="isSortedBy && isSortedBy=='otherProducts' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
43
      </th>
44 52
    </tr>
45 53
  </thead>
46 54
  <tbody>
47
    <ng-container *ngIf="isPercentage">
48
      <tr *ngFor="let countryOverview of countries">
49
        <td class=""><a [routerLink]="['/countryDashboard/' + countryOverview.country]">{{countryOverview.country}}</a></td>
50
        <td *ngIf="type=='overview'" class="uk-text-center">
51
          <ng-container *ngIf="countryOverview.repositories?.oa !=null">{{countryOverview.repositories.oa | number}}</ng-container>
52
          <ng-container *ngIf="countryOverview.repositories===null || countryOverview.repositories.oa===null">--</ng-container>
53
        </td>
54
        <td *ngIf="type=='overview'" class="uk-text-center">
55
          <ng-container *ngIf="countryOverview.journals?.oa !=null">{{countryOverview.journals.oa | number}}</ng-container>
56
          <ng-container *ngIf="countryOverview.journals===null || countryOverview.journals.oa===null">--</ng-container>
57
        </td>
58
        <td *ngIf="type=='overview'" class="uk-text-center">
59
          <ng-container *ngIf="countryOverview.policies?.oa !=null">{{countryOverview.policies.oa | number}}</ng-container>
60
          <ng-container *ngIf="countryOverview.policies===null || countryOverview.policies.oa===null">--</ng-container>
61
        </td>
62
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
63
          <ng-container *ngIf="countryOverview.publications===null || countryOverview.publications.percentage===null">--</ng-container>
64
          <ng-container *ngIf="countryOverview.publications?.percentage !=null">
65
            {{countryOverview.publications.percentage | number}}%
66
            <!--<span style="display: inline-block; float: right; padding-right: 10px;">-->
67
              <!--<span style="float:left; padding-right: 5px;">{{countryOverview.publications.percentage | number}}% </span>-->
68
              <!--<ng-container *ngIf="countryOverview.publications?.percentage !=null">-->
69
                <!--<div class="progress">-->
70
                  <!--<div [ngStyle]="{'width': countryOverview.publications.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>-->
71
                <!--</div>-->
72
              <!--</ng-container>-->
73
            <!--</span>-->
74

  
75
          </ng-container>
76
        </td>
77
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
78
          <ng-container *ngIf="countryOverview.datasets===null || countryOverview.datasets.percentage===null">--</ng-container>
79
          <ng-container *ngIf="countryOverview.datasets?.percentage !=null">
80
            {{countryOverview.datasets.percentage | number}}%
81
            <!--<span style="display: inline-block; float: right; padding-right: 10px;">-->
82
              <!--<span style="float:left; padding-right: 5px;">{{countryOverview.datasets.percentage | number}}% </span>-->
83
              <!--<ng-container *ngIf="countryOverview.datasets?.percentage !=null">-->
84
                <!--<div class="progress">-->
85
                  <!--<div [ngStyle]="{'width': countryOverview.datasets.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>-->
86
                <!--</div>-->
87
              <!--</ng-container>-->
88
            <!--</span>-->
89

  
90
          </ng-container>
91
        </td>
92
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
93
          <ng-container *ngIf="countryOverview.software===null || countryOverview.software.percentage===null">--</ng-container>
94
          <ng-container *ngIf="countryOverview.software?.percentage !=null">
95
            {{countryOverview.software.percentage | number}}%
96
            <!--<span style="display: inline-block; float: right; padding-right: 10px;">-->
97
              <!--<span style="float:left; padding-right: 5px;">{{countryOverview.software.percentage | number}}% </span>-->
98
              <!--<ng-container *ngIf="countryOverview.software?.percentage !=null">-->
99
                <!--<div class="progress">-->
100
                  <!--<div [ngStyle]="{'width': countryOverview.software.percentage+'%'}" class="progress-bar progress-bar-software animate-progress-bar"></div>-->
101
                <!--</div>-->
102
              <!--</ng-container>-->
103
            <!--</span>-->
104

  
105
          </ng-container>
106
        </td>
107
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
108
          <ng-container *ngIf="countryOverview.otherProducts===null || countryOverview.otherProducts.percentage===null">--</ng-container>
109
          <ng-container *ngIf="countryOverview.otherProducts?.percentage !=null">
110
            {{countryOverview.otherProducts.percentage | number}}%
111
            <!--<span style="display: inline-block; float: right; padding-right: 10px;">-->
112
              <!--<span style="float:left; padding-right: 5px;">{{countryOverview.otherProducts.percentage | number}}% </span>-->
113
              <!--<ng-container *ngIf="countryOverview.otherProducts?.percentage !=null">-->
114
                <!--<div class="progress">-->
115
                  <!--<div [ngStyle]="{'width': countryOverview.otherProducts.percentage+'%'}" class="progress-bar progress-bar-otherProducts animate-progress-bar"></div>-->
116
                <!--</div>-->
117
              <!--</ng-container>-->
118
            <!--</span>-->
119

  
120
          </ng-container>
121
        </td>
122
      </tr>
123
    </ng-container>
124
    <ng-container *ngIf="!isPercentage">
125
      <tr *ngFor="let countryOverview of countries">
126
        <td class=""><a [routerLink]="['/countryDashboard/' + countryOverview.country]">{{countryOverview.country}}</a></td>
127
        <td *ngIf="type=='overview'" class="uk-text-center">
128
          <ng-container *ngIf="countryOverview.repositories?.oa !=null">{{countryOverview.repositories.oa | number}}</ng-container>
129
          <ng-container *ngIf="countryOverview.repositories===null || countryOverview.repositories.oa===null">--</ng-container>
130
        </td>
131
        <td *ngIf="type=='overview'" class="uk-text-center">
132
          <ng-container *ngIf="countryOverview.journals?.oa !=null">{{countryOverview.journals.oa | number}}</ng-container>
133
          <ng-container *ngIf="countryOverview.journals===null || countryOverview.journals.oa===null">--</ng-container>
134
        </td>
135
        <td *ngIf="type=='overview'" class="uk-text-center">
136
          <ng-container *ngIf="countryOverview.policies?.oa !=null">{{countryOverview.policies.oa | number}}</ng-container>
137
          <ng-container *ngIf="countryOverview.policies===null || countryOverview.policies.oa===null">--</ng-container>
138
        </td>
139
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
140
          <ng-container *ngIf="countryOverview.publications===null || countryOverview.publications.oa===null">--</ng-container>
141
          <ng-container *ngIf="countryOverview.publications?.oa !=null">
142
            {{countryOverview.publications.oa | number}}
143
            <!--<span style="display: inline-block; float: right; padding-right: 10px;">-->
144
              <!--<span style="float:left; padding-right: 5px;">{{countryOverview.publications.oa | number}} </span>-->
145
              <!--<ng-container *ngIf="countryOverview.publications?.percentage !=null">-->
146
                <!--<div class="progress">-->
147
                  <!--<div [ngStyle]="{'width': countryOverview.publications.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>-->
148
                <!--</div>-->
149
              <!--</ng-container>-->
150
            <!--</span>-->
151

  
152
          </ng-container>
153
        </td>
154
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
155
          <ng-container *ngIf="countryOverview.datasets===null || countryOverview.datasets.oa===null">--</ng-container>
156
          <ng-container *ngIf="countryOverview.datasets?.oa !=null">
157
            {{countryOverview.datasets.oa | number}}
158
            <!--<span style="display: inline-block; float: right; padding-right: 10px;">-->
159
              <!--<span style="float:left; padding-right: 5px;">{{countryOverview.datasets.oa | number}} </span>-->
160
              <!--<ng-container *ngIf="countryOverview.datasets?.percentage !=null">-->
161
                <!--<div class="progress">-->
162
                  <!--<div [ngStyle]="{'width': countryOverview.datasets.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>-->
163
                <!--</div>-->
164
              <!--</ng-container>-->
165
            <!--</span>-->
166

  
167
          </ng-container>
168
        </td>
169
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
170
          <ng-container *ngIf="countryOverview.software===null || countryOverview.software.oa===null">--</ng-container>
171
          <ng-container *ngIf="countryOverview.software?.oa !=null">
172
            {{countryOverview.software.oa | number}}
173
            <!--<span style="display: inline-block; float: right; padding-right: 10px;">-->
174
              <!--<span style="float:left; padding-right: 5px;">{{countryOverview.software.oa | number}} </span>-->
175
              <!--<ng-container *ngIf="countryOverview.software?.percentage !=null">-->
176
                <!--<div class="progress">-->
177
                  <!--<div [ngStyle]="{'width': countryOverview.software.percentage+'%'}" class="progress-bar progress-bar-software animate-progress-bar"></div>-->
178
                <!--</div>-->
179
              <!--</ng-container>-->
180
            <!--</span>-->
181

  
182
          </ng-container>
183
        </td>
184
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
185
          <ng-container *ngIf="countryOverview.otherProducts===null || countryOverview.otherProducts.oa===null">--</ng-container>
186
          <ng-container *ngIf="countryOverview.otherProducts?.oa !=null">
187
            {{countryOverview.otherProducts.oa | number}}
188
            <!--<span style="display: inline-block; float: right; padding-right: 10px;">-->
189
              <!--<span style="float:left; padding-right: 5px;">{{countryOverview.otherProducts.oa | number}} </span>-->
190
              <!--<ng-container *ngIf="countryOverview.otherProducts?.percentage !=null">-->
191
                <!--<div class="progress">-->
192
                  <!--<div [ngStyle]="{'width': countryOverview.otherProducts.percentage+'%'}" class="progress-bar progress-bar-otherProducts animate-progress-bar"></div>-->
193
                <!--</div>-->
194
              <!--</ng-container>-->
195
            <!--</span>-->
196

  
197
          </ng-container>
198
        </td>
199
      </tr>
200
    </ng-container>
55
    <tr *ngFor="let countryOverview of countries">
56
      <td class=""><a [routerLink]="['/countryDashboard/' + countryOverview.code]">{{countryOverview.name}}</a></td>
57
      <td class="uk-text-center">
58
        <ng-container *ngIf="countryOverview.repositories===null">--</ng-container>
59
        <ng-container *ngIf="countryOverview.repositories!=null">
60
          {{countryOverview.repositories | number}}<ng-container *ngIf="isPercentage">%</ng-container>
61
        </ng-container>
62
      </td>
63
      <td class="uk-text-center">
64
        <ng-container *ngIf="countryOverview.journals===null">--</ng-container>
65
        <ng-container *ngIf="countryOverview.journals!=null">
66
          {{countryOverview.journals | number}}<ng-container *ngIf="isPercentage">%</ng-container>
67
        </ng-container>
68
      </td>
69
      <!--<td class="uk-text-center">-->
70
      <!--<ng-container *ngIf="countryOverview.policies?.oa !=null">{{countryOverview.policies.oa | number}}</ng-container>-->
71
      <!--<ng-container *ngIf="countryOverview.policies===null || countryOverview.policies.oa===null">&#45;&#45;</ng-container>-->
72
      <!--</td>-->
73
      <td class="uk-text-center">
74
        <ng-container *ngIf="countryOverview.publications===null">--</ng-container>
75
        <ng-container *ngIf="countryOverview.publications!=null">
76
          {{countryOverview.publications | number}}<ng-container *ngIf="isPercentage">%</ng-container>
77
          <!--<span style="display: inline-block; float: right; padding-right: 10px;">-->
78
          <!--<span style="float:left; padding-right: 5px;">{{countryOverview.publications.percentage | number}}% </span>-->
79
          <!--<ng-container *ngIf="countryOverview.publications?.percentage !=null">-->
80
          <!--<div class="progress">-->
81
          <!--<div [ngStyle]="{'width': countryOverview.publications.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>-->
82
          <!--</div>-->
83
          <!--</ng-container>-->
84
          <!--</span>-->
85
        </ng-container>
86
      </td>
87
      <td class="uk-text-center">
88
        <ng-container *ngIf="countryOverview.datasets===null">--</ng-container>
89
        <ng-container *ngIf="countryOverview.datasets!=null">
90
          {{countryOverview.datasets | number}}<ng-container *ngIf="isPercentage">%</ng-container>
91
        </ng-container>
92
      </td>
93
      <td class="uk-text-center">
94
        <ng-container *ngIf="countryOverview.software===null">--</ng-container>
95
        <ng-container *ngIf="countryOverview.software!=null">
96
          {{countryOverview.software | number}}<ng-container *ngIf="isPercentage">%</ng-container>
97
        </ng-container>
98
      </td>
99
      <td class="uk-text-center">
100
        <ng-container *ngIf="countryOverview.other===null">--</ng-container>
101
        <ng-container *ngIf="countryOverview.other!=null">
102
          {{countryOverview.other | number}}<ng-container *ngIf="isPercentage">%</ng-container>
103
        </ng-container>
104
      </td>
105
    </tr>
201 106
  </tbody>
202 107
</table>

Also available in: Unified diff