From caad9e3349ae40aa5aa8558647f29929529e3ccb Mon Sep 17 00:00:00 2001
From: Alex Martzios <alexandros.martzios@gmail.com>
Date: Fri, 15 Apr 2022 16:32:14 +0300
Subject: [PATCH] add links to FOS items, changes on SDG json file and page

---
 explore/src/app/fos/fos.component.html | 47 +++++++++++++++++-------
 explore/src/app/openaireLibrary        |  2 +-
 explore/src/app/sdg/sdg.component.css  |  6 +++
 explore/src/app/sdg/sdg.component.html | 32 +++++++++-------
 explore/src/assets/common-assets       |  2 +-
 explore/src/assets/openaire-theme      |  2 +-
 explore/src/assets/vocabulary/sdg.json | 51 +++++++++++++++++---------
 7 files changed, 94 insertions(+), 48 deletions(-)

diff --git a/explore/src/app/fos/fos.component.html b/explore/src/app/fos/fos.component.html
index c8afab55..63899aeb 100644
--- a/explore/src/app/fos/fos.component.html
+++ b/explore/src/app/fos/fos.component.html
@@ -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>
diff --git a/explore/src/app/openaireLibrary b/explore/src/app/openaireLibrary
index aa210384..d17f9b4d 160000
--- a/explore/src/app/openaireLibrary
+++ b/explore/src/app/openaireLibrary
@@ -1 +1 @@
-Subproject commit aa210384bc1df7b11595243096fd9fd5c8e01ae8
+Subproject commit d17f9b4d5c548a8f5f36cc7049f1b27ac23874d3
diff --git a/explore/src/app/sdg/sdg.component.css b/explore/src/app/sdg/sdg.component.css
index 1126c1ad..ebd593ee 100644
--- a/explore/src/app/sdg/sdg.component.css
+++ b/explore/src/app/sdg/sdg.component.css
@@ -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;
diff --git a/explore/src/app/sdg/sdg.component.html b/explore/src/app/sdg/sdg.component.html
index e02a38a2..285dc97a 100644
--- a/explore/src/app/sdg/sdg.component.html
+++ b/explore/src/app/sdg/sdg.component.html
@@ -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>
diff --git a/explore/src/assets/common-assets b/explore/src/assets/common-assets
index fbbae041..cc271936 160000
--- a/explore/src/assets/common-assets
+++ b/explore/src/assets/common-assets
@@ -1 +1 @@
-Subproject commit fbbae0418315e06d6ce5a0d193fd08c8ea617b6b
+Subproject commit cc2719364d8d553a8ea6585ff651b3858fc1d6a0
diff --git a/explore/src/assets/openaire-theme b/explore/src/assets/openaire-theme
index 1200683a..0690007b 160000
--- a/explore/src/assets/openaire-theme
+++ b/explore/src/assets/openaire-theme
@@ -1 +1 @@
-Subproject commit 1200683a6b345f1b453859e3136e4df227c40fc8
+Subproject commit 0690007b7b3eb567b09b09c6f2968d5abc700cc9
diff --git a/explore/src/assets/vocabulary/sdg.json b/explore/src/assets/vocabulary/sdg.json
index 9f588e71..4e682eea 100644
--- a/explore/src/assets/vocabulary/sdg.json
+++ b/explore/src/assets/vocabulary/sdg.json
@@ -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"
     }
   ]
 }