add links to FOS items, changes on SDG json file and page

This commit is contained in:
Alex Martzios 2022-04-15 16:32:14 +03:00
parent cb4b3334be
commit caad9e3349
7 changed files with 94 additions and 48 deletions

View File

@ -36,7 +36,7 @@
<div class="uk-padding-small">
<div class="uk-margin-small-bottom">Search results for '{{keyword}}'</div>
<span class="uk-display-inline-block">
<a [attr.uk-tooltip]="'Remove'" (click)="clearKeyword()">
<a [attr.uk-tooltip]="'Remove'" (click)="clearKeyword()" class="uk-link-reset">
<span class="uk-label uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{keyword}}</span>
<icon class="uk-text-muted" name="close" flex="true" ratio="0.7"></icon>
@ -49,30 +49,38 @@
<div class="uk-margin-top uk-padding-small">
<div class="uk-grid uk-grid-large" uk-grid>
<div class="uk-width-1-4">
<!-- <div *ngFor="let item of fos; index as i" class="uk-margin-small-bottom">
<a class="uk-text-capitalize" (click)="changeDisplayedFos(i)">
{{item.id}}
</a>
</div> -->
<ul class="uk-list">
<ul class="uk-nav uk-nav-default">
<li *ngFor="let item of fos; index as i"
class="uk-margin-small-bottom uk-text-capitalize"
[class]="index == i ? 'uk-active':''"
(click)="changeDisplayedFos(i)">
<a>{{item.id}}</a>
<a class="uk-padding-remove">{{item.id}}</a>
</li>
</ul>
</div>
<div *ngIf="fos[index]" class="uk-width-3-4">
<div class="uk-text-capitalize">
<h2 class="uk-h4 uk-margin-remove">{{fos[index].id}}</h2>
<h2 class="uk-h4 uk-margin-remove">
<a [routerLink]="properties.searchLinkToAdvancedResults" [queryParams]="{f0: 'fos', fv0: fos[index].id}" target="_blank"
class="uk-link-reset">
{{fos[index].id}}
</a>
</h2>
</div>
<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-medium-bottom" uk-grid="masonry: false">
<div *ngFor="let child of fos[index].children">
<div class="whole-child uk-text-capitalize">
<h3 class="uk-h6 uk-margin-small-bottom">{{child.id}}</h3>
<h3 class="uk-h6 uk-margin-small-bottom">
<a [routerLink]="properties.searchLinkToAdvancedResults" [queryParams]="{f0: 'fos', fv0: child.id}" target="_blank"
class="uk-link-reset">
{{child.id}}
</a>
</h3>
<div *ngFor="let subChild of child.children" style="margin-bottom: 5px;">
{{subChild.id}}
<a [routerLink]="properties.searchLinkToAdvancedResults" [queryParams]="{f0: 'fos', fv0: subChild.id}" target="_blank"
class="uk-link-reset">
{{subChild.id}}
</a>
</div>
</div>
</div>
@ -86,11 +94,22 @@
<ng-container *ngFor="let item of viewResults;">
<div
class="uk-margin-large-bottom uk-padding uk-padding-remove-top uk-padding-remove-horizontal uk-text-capitalize custom-bottom-border">
<h2 class="uk-h4 uk-margin-remove" [innerHTML]="highlightKeyword(item.id)"></h2>
<h2 class="uk-h4 uk-margin-remove">
<a [routerLink]="properties.searchLinkToAdvancedResults" [queryParams]="{f0: 'fos', fv0: item.id}" target="_blank"
class="uk-link-reset" [innerHTML]="highlightKeyword(item.id)">
</a>
</h2>
<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-medium-bottom" uk-grid="masonry: false">
<div *ngFor="let subItem of item.children">
<h3 class="uk-h6 uk-margin-small-bottom" [innerHTML]="highlightKeyword(subItem.id)"></h3>
<div *ngFor="let subSubItem of subItem.children" style="margin-bottom: 5px;" [innerHTML]="highlightKeyword(subSubItem.id)">
<h3 class="uk-h6 uk-margin-small-bottom">
<a [routerLink]="properties.searchLinkToAdvancedResults" [queryParams]="{f0: 'fos', fv0: subItem.id}" target="_blank"
class="uk-link-reset" [innerHTML]="highlightKeyword(subItem.id)">
</a>
</h3>
<div *ngFor="let subSubItem of subItem.children" style="margin-bottom: 5px;">
<a [routerLink]="properties.searchLinkToAdvancedResults" [queryParams]="{f0: 'fos', fv0: subSubItem.id}" target="_blank"
class="uk-link-reset" [innerHTML]="highlightKeyword(subSubItem.id)">
</a>
</div>
</div>
</div>

@ -1 +1 @@
Subproject commit aa210384bc1df7b11595243096fd9fd5c8e01ae8
Subproject commit d17f9b4d5c548a8f5f36cc7049f1b27ac23874d3

View File

@ -9,6 +9,12 @@
}
.sdg-card {
color: #F9F9F9 !important;
width: 265px;
height: 235px;
}
.sdg-card img {
height: 40px;
width: auto;
}
.sdg-1 {
background-color: #E6233D;

View File

@ -39,25 +39,29 @@
<loading></loading>
</div>
<div *ngIf="!loading">
<div *ngIf="displayedSdgs && displayedSdgs.length" class="uk-padding-small uk-grid uk-child-width-1-4@l uk-child-width-1-2@m" uk-grid>
<div *ngIf="displayedSdgs && displayedSdgs.length" class="uk-padding-small uk-margin-auto@m uk-grid uk-child-width-1-4@xl uk-child-width-1-4@l uk-child-width-1-3@m uk-child-width-1-2@s" uk-grid>
<div *ngFor="let sdg of displayedSdgs">
<a [routerLink]="properties.searchLinkToAdvancedResults" [queryParams]="{f0: 'sdg', fv0: sdg.id}" target="_blank">
<a [routerLink]="properties.searchLinkToAdvancedResults" [queryParams]="{f0: 'sdg', fv0: sdg.id}" target="_blank"
class="uk-link-reset">
<div class="uk-card uk-card-default uk-padding-small" [class]="'sdg-card sdg-' + sdg.code">
<div class="uk-margin-bottom uk-flex uk-flex-middle">
<div class="uk-text-bold uk-h4 uk-margin-remove" style="color: inherit;">
{{sdg.code}}
<div class="uk-height-1-1 uk-flex uk-flex-column uk-flex-between">
<div class="uk-flex uk-flex-middle">
<div class="uk-text-bold uk-h4 uk-margin-remove" style="color: inherit;">
{{sdg.code}}
</div>
<div class="uk-text-bold uk-text-uppercase uk-text-small uk-margin-small-left">
<span [innerHTML]="sdg.html"></span>
<!-- {{sdg.label}} -->
</div>
</div>
<div class="uk-text-bold uk-text-uppercase uk-margin-small-left">
{{sdg.label}}
</div>
</div>
<div class="uk-text-center">
<div class="uk-margin-bottom">
<div class="uk-text-center">
<img [src]="'../../assets/explore-assets/sdgs/g' + sdg.code + '.png'" alt="">
</div>
<div>
<span class="uk-text-large uk-text-bold uk-margin-small-bottom">{{sdg.number == null ? '0' : sdg.number | number}}</span>
<p class="uk-text-small uk-margin-remove">Research Items</p>
<div class="uk-text-center">
<div>
<span class="uk-text-large uk-text-bold uk-margin-small-bottom">{{sdg.number == null ? '0' : sdg.number | number}}</span>
<p class="uk-text-small uk-margin-remove">Research Items</p>
</div>
</div>
</div>
</div>

@ -1 +1 @@
Subproject commit fbbae0418315e06d6ce5a0d193fd08c8ea617b6b
Subproject commit cc2719364d8d553a8ea6585ff651b3858fc1d6a0

@ -1 +1 @@
Subproject commit 1200683a6b345f1b453859e3136e4df227c40fc8
Subproject commit 0690007b7b3eb567b09b09c6f2968d5abc700cc9

View File

@ -3,82 +3,99 @@
{
"code": "1",
"id": "1. No poverty",
"label": "No poverty"
"label": "No poverty",
"html": "No <br/> poverty"
},
{
"code": "2",
"id": "2. Zero hunger",
"label": "Zero hunger"
"label": "Zero hunger",
"html": "Zero <br/> hunger"
},{
"code": "3",
"id": "3. Good health",
"label": "Good health"
"label": "Good health",
"html": "Good <br/> health"
},
{
"code": "4",
"id": "4. Education",
"label": "Education"
"label": "Education",
"html": "Education"
},
{
"code": "5",
"id": "5. Gender equality",
"label": "Gender equality"
"label": "Gender equality",
"html": "Gender <br/> equality"
},{
"code": "6",
"id": "6. Clean water",
"label": "Clean water"
"label": "Clean water",
"html": "Clean <br/> water"
},
{
"code": "7",
"id": "7. Clean energy",
"label": "Clean energy"
"label": "Clean energy",
"html": "Clean <br/> energy"
},
{
"code": "8",
"id": "8. Economic growth",
"label": "Economic growth"
"label": "Economic growth",
"html": "Economic <br/> growth"
},{
"code": "9",
"id": "9. Industry and infrastructure",
"label": "Industry and infrastructure"
"label": "Industry and infrastructure",
"html": "Industry and <br/> infrastructure"
},
{
"code": "10",
"id": "10. No inequality",
"label": "No inequality"
"label": "No inequality",
"html": "No <br/> inequality"
},
{
"code": "11",
"id": "11. Sustainability",
"label": "Sustainability"
"label": "Sustainability",
"html": "Sustainability"
},{
"code": "12",
"id": "12. Responsible consumption",
"label": "Responsible consumption"
"label": "Responsible consumption",
"html": "Responsible <br/> consumption"
},
{
"code": "13",
"id": "13. Climate action",
"label": "Climate action"
"label": "Climate action",
"html": "Climate <br/> action"
},
{
"code": "14",
"id": "14. Life underwater",
"label": "Life underwater"
"label": "Life underwater",
"html": "Life <br/> underwater"
},{
"code": "15",
"id": "15. Life on land",
"label": "Life on land"
"label": "Life on land",
"html": "Life on <br/> land"
},
{
"code": "16",
"id": "16. Peace & justice",
"label": "Peace & justice"
"label": "Peace & justice",
"html": "Peace & <br/> justice"
},
{
"code": "17",
"id": "17. Partnership",
"label": "Partnership"
"label": "Partnership",
"html": "Partnership"
}
]
}