Merge branch 'new-theme' into new-theme-linking

1. searchFields.ts: Added fos & sdg refine filters for research results.
2. resultLandingInfo.ts: Added string arrays "fos" and "sdg".
3. HelperFunctions.class.ts: Added method for sdg sorting (splits value, keeps only number before dot and compares numerically).
4. searchResearchResults.service.ts: [Bug fix] when parsing "dateofacceptance", stringify it only if it has a value.
5. searchFilter.component.ts: When sorting filters, sort differently SDGs.
6. resultLanding.service.ts:
	a. [Bug fix] Fix in parsing subtitle.
	b. [Bug fix] Parsing of "Related organizations" was accidentally deleted when parsing of relations changed.
	c. Parse "FOS" and "SDGs" in their specific fields, separately from subjects.
7. resultLanding.component.ts:
	a. [Bug fix] Do not make call for opencitations (deprecated).
	b. Updated method "hasPrimaryInfo()": Description is now array and added checks for organizations.
8. resultLanding.component.html: Display of "FOS" and "SDGs" separately from subjects.
9. showPublisher.component.ts: [Bug fix] Remove from html name of developer!
10. parsingFunctions.class.ts: Parse "FOS" and "SDGs" in their specific fields, separately from subjects.
11. metrics.component.ts: [Bug fix] Default value of "metricsClicked" should be false.

dashboard/sharedComponents/page-content/page-content.component.ts

@@ -1,24 +1,74 @@
-import {ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit} from "@angular/core";
+import {Component, ElementRef, EventEmitter, HostListener, OnDestroy, OnInit, Output, ViewChild} from "@angular/core";
+import {Subscription} from "rxjs";
+
+declare var UIkit;
 
 @Component({
   selector: '[page-content]',
   template: `
-  <div id="page_content">
-    <div #header id="page_content_header" uk-sticky="show-on-up: true; animation: uk-animation-slide-top; media: @m" [attr.offset]="offset">
-      <div class="uk-container uk-container-large">
-        <ng-content select="[header]"></ng-content>
+    <div id="page_content">
+      <div id="header">
+        <div id="page_content_header" uk-sticky="media: @m" [attr.offset]="offset">
+          <div #header class="uk-container uk-container-large uk-padding-remove-vertical">
+            <ng-content select="[header]"></ng-content>
+          </div>
+        </div>
+      </div>
+      <div id="page_content_inner" class="uk-section uk-container uk-container-large">
+        <ng-content select="[inner]"></ng-content>
       </div>
     </div>
-    <div id="page_content_inner" class="uk-section uk-container uk-container-large">
-      <ng-content select="[inner]"></ng-content>
-    </div>
-  </div>
-  `
+  `,
 })
-export class PageContentComponent implements OnInit{
-  public offset: string;
+export class PageContentComponent implements OnInit, OnDestroy {
+  public offset: number;
+  public sticky: boolean = false;
+  @Output()
+  public stickyEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
+  @ViewChild("header") public header: ElementRef;
+  private current;
+  private subscriptions: any[] = [];
+  
+  constructor() {
+  }
   
   ngOnInit() {
-    this.offset = getComputedStyle(document.documentElement).getPropertyValue('--structure-header-height');
+    if (typeof window !== "undefined") {
+      this.current = window.pageYOffset;
+      this.initSticky();
+    }
+  }
+  
+  initSticky() {
+    this.clear();
+    this.subscriptions.push(UIkit.util.on(document, 'active', '#sticky-menu', (): void => {
+      this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--structure-header-height'));
+  
+    }));
+    this.subscriptions.push(UIkit.util.on(document, 'inactive', '#sticky-menu', (): void => {
+      this.offset = 0;
+    }));
+    this.subscriptions.push(UIkit.util.on(document, 'active', '#page_content_header', (): void => {
+      this.sticky = true;
+      this.stickyEmitter.emit(this.sticky);
+    }));
+    this.subscriptions.push(UIkit.util.on(document, 'inactive', '#page_content_header', (): void => {
+      this.sticky = false;
+      this.stickyEmitter.emit(this.sticky);
+    }));
+  }
+  
+  clear() {
+    this.subscriptions.forEach(subscription => {
+      if (subscription instanceof Subscription) {
+        subscription.unsubscribe();
+      } else if (subscription instanceof Function) {
+        subscription();
+      }
+    });
+  }
+  
+  ngOnDestroy() {
+    this.clear();
   }
 }

dashboard/sharedComponents/sidebar/sideBar.component.html

@@ -25,10 +25,10 @@
         <ul class="uk-list">
           <li [class.uk-active]="isTheActiveUrl(specialMenuItem.route)">
             <a [routerLink]="specialMenuItem.route" [queryParams]="specialMenuItem.params"
-               [queryParamsHandling]="queryParamsHandling" class="uk-text-center">
+               [queryParamsHandling]="queryParamsHandling" class="uk-flex uk-flex-center uk-flex-middle uk-flex-wrap">
               <span [class.uk-display-block]="!open" [innerHTML]="satinizeHTML(specialMenuItem.icon)"></span>
-              <span [ngClass]="specialMenuItem.customClass"
-                    [class.uk-margin-small-left]="open"
+              <span [ngClass]="specialMenuItem.customClass" class="uk-text-center"
+                    [class.uk-margin-small-left]="open" [class.uk-margin-small-top]="!open"
                     [class.uk-text-small]="!open">{{specialMenuItem.title}}</span>
             </a>
           </li>

deposit/searchResultsInDeposit.component.html

@@ -18,10 +18,9 @@
 </div>
 <ul class="uk-margin-top uk-list uk-margin search-results ">
   <li *ngFor="let result of results" class="uk-animation-fade">
-    <div class="uk-card uk-card-default uk-padding uk-card-hover">
-      <result-preview [properties]="properties" [showOrganizations]="true"
-                      [showSubjects]="true" [result]="getResultPreview(result)" [promoteWebsiteURL]="true">
-      </result-preview>
-    </div>
+		<result-preview [properties]="properties" [showOrganizations]="true"
+										[showSubjects]="true" [result]="getResultPreview(result)" [promoteWebsiteURL]="true"
+										[isCard]="true">
+		</result-preview>
   </li>
 </ul>

landingPages/landing-utils/metrics/metrics.component.ts

@@ -201,7 +201,7 @@ export class MetricsComponent {
   private sub: Subscription;
   private timeouts: any[] = [];
 
-  public metricsClicked: boolean = true;
+  public metricsClicked: boolean = false;
 
   public status: number;
   public state: number = -1;

landingPages/landing-utils/parsingFunctions.class.ts

@@ -559,11 +559,13 @@ export class ParsingFunctions {
   }
   
   // publication & dataset landing : for subjects and otherSubjects and classifiedSubjects
-  parseAllSubjects(_subjects: any): [string[], Map<string, string[]>, Map<string, string[]>] {
+  parseAllSubjects(_subjects: any): [string[], Map<string, string[]>, Map<string, string[]>, string[], string[]] {
     let subjects: string[];
     let otherSubjects: Map<string, string[]>;
     let classifiedSubjects: Map<string, string[]>;
-    
+    let fos: string[];
+    let sdg: string[];
+
     let subject;
     let length = Array.isArray(_subjects) ? _subjects.length : 1;
     
@@ -571,15 +573,27 @@ export class ParsingFunctions {
       subject = Array.isArray(_subjects) ? _subjects[i] : _subjects;
       if (subject.classid != "") {
         if (subject.inferred && subject.inferred == true) {
-          if (classifiedSubjects == undefined) {
-            classifiedSubjects = new Map<string, string[]>();
+          if(subject.classid === "SDG") {
+            if (sdg == undefined) {
+              sdg = new Array<string>();
+            }
+            sdg.push(subject.content+"");
+          } else if(subject.classid === "FOS") {
+            if (fos == undefined) {
+              fos = new Array<string>();
+            }
+            fos.push(subject.content+"");
+          } else {
+            if (classifiedSubjects == undefined) {
+              classifiedSubjects = new Map<string, string[]>();
+            }
+
+            if (!classifiedSubjects.has(subject.classname)) {
+              classifiedSubjects.set(subject.classname, new Array<string>());
+            }
+
+            classifiedSubjects.get(subject.classname).push(subject.content+"");
           }
-          
-          if (!classifiedSubjects.has(subject.classname)) {
-            classifiedSubjects.set(subject.classname, new Array<string>());
-          }
-          
-          classifiedSubjects.get(subject.classname).push(subject.content);
         } else {
           if (subject.classid == "keyword") {
             let content: string = subject.content+"";
@@ -636,7 +650,7 @@ export class ParsingFunctions {
         }
       }
     }
-    return [subjects, otherSubjects, classifiedSubjects];
+    return [subjects, otherSubjects, classifiedSubjects, fos, sdg];
   }
   
   parseContexts(_contexts: any): {

landingPages/landing-utils/showIdentifiers.component.ts

@@ -16,29 +16,31 @@ import {properties} from "../../../../environments/environment";
 @Component({
   selector: 'showIdentifiers',
   template: `
-    <div class="uk-text-muted">Persistent Identifiers</div>
+    <!-- <div class="uk-text-muted">Persistent Identifiers</div> -->
     <div class="uk-height-max-medium uk-overflow-auto uk-margin-small-top">
       <ng-container *ngFor="let key of keys let i=index">
-        <div [class.multi-line-ellipsis]="large.get(key) && !showAll" [class.lines-2]="keys.length === 1" [class.line-1]="keys.length > 1">
-          <p class="custom-break uk-margin-remove">
-          <span #content [id]="key">
-            <span class="uk-text-bold uk-text-uppercase">{{key}}: </span>
-            <ng-container *ngFor="let item of identifiers.get(key) let j=index">
-              <a *ngIf="key=='doi'" [href]="properties.doiURL + item" target="_blank" class="uk-display-inline">
-                {{item}} <span class="custom-external custom-icon"></span>
-              </a>
-              <a *ngIf="key=='pmc'" [href]="properties.pmcURL + item" target="_blank">
-                {{item}} <span class="custom-external custom-icon"></span>
-              </a>
-              <a *ngIf="key=='pmid'" [href]="properties.pmidURL + item" target="_blank">
-                {{item}} <span class="custom-external custom-icon"></span>
-              </a>
-              <a *ngIf="key=='handle'" [href]="properties.handleURL + item" target="_blank">
-                {{item}} <span class="custom-external custom-icon"></span>
-              </a>
-              <ng-container *ngIf="(j !== (identifiers.get(key).length - 1))">, </ng-container>
-            </ng-container>
-          </span>
+        <!-- <div [class.multi-line-ellipsis]="large.get(key) && !showAll" [class.lines-2]="keys.length === 1" [class.line-1]="keys.length > 1"> -->
+				<div *ngIf="!showAll" class="uk-flex-inline uk-flex-wrap uk-margin-medium-right">
+          <p class="uk-margin-remove">
+						<span #content [id]="key">
+							<span class="uk-text-muted uk-text-uppercase">{{key}}: </span>
+							<ng-container *ngFor="let item of identifiers.get(key) let j=index">
+								<!-- TODO: custom external link icons -->
+								<a *ngIf="key=='doi'" [href]="properties.doiURL + item" target="_blank" class="uk-display-inline">
+									{{item}} <span class="custom-external custom-icon"></span>
+								</a>
+								<a *ngIf="key=='pmc'" [href]="properties.pmcURL + item" target="_blank">
+									{{item}} <span class="custom-external custom-icon"></span>
+								</a>
+								<a *ngIf="key=='pmid'" [href]="properties.pmidURL + item" target="_blank">
+									{{item}} <span class="custom-external custom-icon"></span>
+								</a>
+								<a *ngIf="key=='handle'" [href]="properties.handleURL + item" target="_blank">
+									{{item}} <span class="custom-external custom-icon"></span>
+								</a>
+								<ng-container *ngIf="(j !== (identifiers.get(key).length - 1))">, </ng-container>
+							</ng-container>
+						</span>
           </p>
         </div>
       </ng-container>

landingPages/landing-utils/showPublisher.component.ts

@@ -54,7 +54,7 @@ import {EnvProperties} from "../../utils/properties/env-properties";
           <span>, </span>
         </ng-container>
         <span *ngIf="journal['lissn']" class="uk-display-inline-block">
-          <span class="uk-display-inline-block">lissn: {{journal['lissn']}}</span>(kostis)
+          <span class="uk-display-inline-block">lissn: {{journal['lissn']}}</span>
           <span>, </span>
         </span>
         <span *ngIf="journal && (journal['issn'] ||journal['lissn'] || journal['eissn'] )">

landingPages/organization/deletedByInference/deletedByInference.component.ts

@@ -24,7 +24,7 @@ import {properties} from "../../../../../environments/environment";
     </no-load-paging>
     <ul class="uk-list uk-list-divider  uk-margin">
       <li *ngFor="let result of results.slice((page-1)*pageSize, page*pageSize)">
-        <result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)"></result-preview>
+        <result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)" [isCard]="false"></result-preview>
       </li>
     </ul>
     <no-load-paging *ngIf="results.length > pageSize" [type]="type"

landingPages/result/deletedByInference/deletedByInference.component.ts

@@ -24,7 +24,7 @@ import {properties} from "../../../../../environments/environment";
     </no-load-paging>
     <ul class="uk-list uk-list-divider  uk-margin">
       <li *ngFor="let result of results.slice((page-1)*pageSize, page*pageSize)">
-        <result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)" [showOrcid]="false"></result-preview>
+        <result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)" [showOrcid]="false" [isCard]="false"></result-preview>
       </li>
     </ul>
     <no-load-paging *ngIf="results.length > pageSize" [type]="type"

landingPages/result/resultLanding.component.html

@@ -182,6 +182,26 @@
                       <showIdentifiers [identifiers]="resultLandingInfo.identifiers" [showViewAll]="true"></showIdentifiers>
                     </div>
                     <!-- Subjects -->
+                    <div *ngIf="resultLandingInfo.fos" class="uk-margin-medium-bottom">
+                      <div class="uk-text-muted">
+                        Fields of Science and Technology classification
+                      </div>
+                      <div class="uk-margin-small-top">
+                        <div *ngIf="resultLandingInfo.fos && resultLandingInfo.fos.length > 0">
+                          {{resultLandingInfo.fos.join(', ')}}
+                        </div>
+                      </div>
+                    </div>
+                    <div *ngIf="resultLandingInfo.sdg" class="uk-margin-medium-bottom">
+                      <div class="uk-text-muted">
+                        Sustainable Development Goals
+                      </div>
+                      <div class="uk-margin-small-top">
+                        <div *ngIf="resultLandingInfo.sdg && resultLandingInfo.sdg.length > 0">
+                          {{resultLandingInfo.sdg.join(', ')}}
+                        </div>
+                      </div>
+                    </div>
                     <div *ngIf="resultLandingInfo.subjects || resultLandingInfo.otherSubjects ||
                         resultLandingInfo.classifiedSubjects" class="uk-margin-medium-bottom">
                       <showSubjects [subjects]="resultLandingInfo.subjects"
@@ -369,7 +389,8 @@
                   <ul class="uk-list uk-list-divider uk-margin">
                     <li *ngFor="let item of researchResults.slice((relatedPage-1)*pageSize, relatedPage*pageSize)">
                       <result-preview [modal]="relationModal" [properties]="properties"
-                                      [result]="getResultPreview(item)"></result-preview>
+                                      [result]="getResultPreview(item)"
+																			[isCard]="false"></result-preview>
                     </li>
                   </ul>
                   <no-load-paging *ngIf="researchResults.length > pageSize"

landingPages/result/resultLanding.component.ts

@@ -380,7 +380,7 @@ export class ResultLandingComponent {
         this.seoService.createLinkForCanonicalURL(this.canonicalUrl);
         this.updateUrl(this.canonicalUrl);
         if ((this.type == "publication") && (this.properties.environment == "beta" || this.properties.environment == "development") && (typeof document !== 'undefined')) {
-          this.getOpenCitations();
+          // this.getOpenCitations();
         }
         this.addNoIndexFilter();
         if (this.resultLandingInfo.title) {
@@ -453,7 +453,10 @@ export class ResultLandingComponent {
   }
 
   public get hasPrimaryInfo(): boolean {
-    return !!this.resultLandingInfo && (!!this.resultLandingInfo.description || !!this.resultLandingInfo.identifiers || !!this.resultLandingInfo.subjects);
+        return !!this.resultLandingInfo && (
+      (!!this.resultLandingInfo.description && this.resultLandingInfo.description.length > 0)
+      || !!this.resultLandingInfo.identifiers || !!this.resultLandingInfo.subjects
+      || (!!this.resultLandingInfo.organizations && this.resultLandingInfo.organizations.length > 0));
   }
 
   public get hasSecondaryInfo(): boolean {

landingPages/result/resultLanding.service.ts

@@ -8,6 +8,7 @@ import {map} from "rxjs/operators";
 import {HostedByCollectedFrom, Organization} from "../../utils/result-preview/result-preview";
 import {Dates, Identifier, StringUtils} from "../../utils/string-utils.class";
 import {properties} from "../../../../environments/environment";
+import {HelperFunctions} from "../../utils/HelperFunctions.class";
 
 @Injectable()
 export class ResultLandingService {
@@ -151,18 +152,21 @@ export class ResultLandingService {
             if(!this.resultLandingInfo.title || data[1][i].classid == "main title") {
               this.resultLandingInfo.title = String(data[1][i].content);
             }
-            if(data[1][i].classid == "main title") {
-              break;
+            if(!this.resultLandingInfo.subtitle && data[1][i].classid === 'subtitle') {
+              this.resultLandingInfo.subtitle = String(data[1][i].content);
             }
+            // if(data[1][i].classid == "main title") {
+            //   break;
+            // }
           }
         }
+        if(this.resultLandingInfo.title === this.resultLandingInfo.subtitle) {
+          this.resultLandingInfo.subtitle = "";
+        }
         if(!this.resultLandingInfo.title) {
           this.resultLandingInfo.title = "";
         }
         // this.resultLandingInfo.title = (data[1][0] && data[1][0].content) ? String(data[1][0].content) : "";
-        if(data[1][1].classid === 'subtitle') {
-          this.resultLandingInfo.subtitle = (data[1][1] && data[1][1].content) ? String(data[1][1].content) : "";
-        }
       } else {
         this.resultLandingInfo.title = (data[1] && data[1].content) ? String(data[1].content) : "";
       }
@@ -191,6 +195,8 @@ export class ResultLandingService {
             }
 
             this.resultLandingInfo.relatedResults = this.parsingFunctions.parseResults(this.resultLandingInfo.relatedResults, relation, provenanceAction);
+          } else if(relation['to'].class && relation['to'].class.toLowerCase() == "hasauthorinstitution") {
+            this.resultLandingInfo.organizations = this.parseRelatedOrganizations(this.resultLandingInfo.organizations, relation);
           }
         }
       }
@@ -325,10 +331,20 @@ export class ResultLandingService {
 
     // res['result']['metadata']['oaf:entity']['oaf:result']['subject']
     if(data[7] != null) {
-      let subjectResults: [string[], Map<string, string[]>, Map<string, string[]>] = this.parsingFunctions.parseAllSubjects(data[7]);
+      let subjectResults: [string[], Map<string, string[]>, Map<string, string[]>, string[], string[]] = this.parsingFunctions.parseAllSubjects(data[7]);
       this.resultLandingInfo.subjects = subjectResults[0];
       this.resultLandingInfo.otherSubjects = subjectResults[1];
       this.resultLandingInfo.classifiedSubjects = subjectResults[2];
+      this.resultLandingInfo.fos = subjectResults[3];
+      if(this.resultLandingInfo.fos) {
+        this.resultLandingInfo.fos.sort((a, b) => a.localeCompare(b))
+      }
+      this.resultLandingInfo.sdg = subjectResults[4];
+      if(this.resultLandingInfo.sdg) {
+        this.resultLandingInfo.sdg.sort((a, b) => {
+          return HelperFunctions.sortSDGs(a, b);
+        })
+      }
 
       this.resultLandingInfo.showEgiNotebookButton = this.parsingFunctions.notebookInSubjects;
     }

orcid/my-orcid-links/searchMyOrcidResults.component.html

@@ -13,7 +13,8 @@
         <div class="uk-grid uk-grid-divider">
         <div class="uk-width-expand@m uk-width-1-1 uk-first-column">
           <result-preview [properties]="properties" [showOrcid]="false" [showOrganizations]="true"
-                          [showSubjects]="true" [result]="result" [promoteWebsiteURL]="true">
+                          [showSubjects]="true" [result]="result" [promoteWebsiteURL]="true"
+													[isCard]="false">
           </result-preview>
         </div>
 

orcid/orcid-work.component.ts

@@ -41,10 +41,10 @@ declare var UIkit: any;
            [class]="'uk-flex uk-flex-middle uk-flex-right uk-margin-right '+ ((showLoading || !isLoggedIn) ? 'uk-disabled ' : '') + (!isLoggedIn ? 'half-opacity' : '')">
           <icon *ngIf="!showLoading" name="add" ratio="1"></icon>
           <span *ngIf="showLoading" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
-          <span class="uk-margin-small-left uk-flex uk-flex-middle">Add to 
-            <span class="orcid-color space uk-flex uk-flex-middle">
-              <span>ORCID</span>
-              <img  class="space" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="orcid"  style="width:16px; height:16px" loading="lazy">{{" "}}
+          <span class="uk-margin-small-left uk-flex uk-flex-middle">Add to&#160;
+            <span class="orcid-color uk-flex uk-flex-middle">
+              <span>ORCID&#160;</span>
+              <img  class="" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="orcid"  style="width:16px; height:16px" loading="lazy">{{" "}}
             </span>
           </span>
         </a>
@@ -60,9 +60,9 @@ declare var UIkit: any;
             [class]="'uk-flex uk-flex-middle uk-flex-right uk-margin-right '+ (showLoading ? 'uk-disabled' : '')">
           <icon *ngIf="!showLoading" name="remove" ratio="0.8"></icon>
           <span *ngIf="showLoading" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
-          <span class="uk-margin-small-left uk-flex uk-flex-middle">Delete from 
+          <span class="uk-margin-small-left uk-flex uk-flex-middle">Delete from&#160;
             <span class="orcid-color space uk-flex uk-flex-middle">
-              <span>ORCID</span>
+              <span>ORCID&#160;</span>
               <img class="space" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="" loading="lazy">{{" "}}
             </span>
           </span>
@@ -84,7 +84,7 @@ declare var UIkit: any;
           </span>
           <span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading
             [top_margin]="false"></loading></span>
-          <span [class]="showLoading ? 'uk-margin-small-left' : 'space'">Add to 
+          <span [class]="showLoading ? 'uk-margin-small-left' : 'space'">Add to&#160;
             <span class="orcid-color">
               ORCID
             </span>
@@ -105,7 +105,7 @@ declare var UIkit: any;
         </span>
         <span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading
           [top_margin]="false"></loading></span>
-        <span [class]="showLoading ? 'uk-margin-small-left' : 'space'">Delete from
+        <span [class]="showLoading ? 'uk-margin-small-left' : 'space'">Delete from&#160;
             <span class="orcid-color">
               ORCID
             </span>
@@ -142,9 +142,9 @@ declare var UIkit: any;
 
     <ng-container *ngIf="pageType == 'my_search'">
       <span class="uk-margin-bottom uk-flex uk-flex-middle uk-flex-center">
-        <span>ORCID</span>
+        <span>ORCID&#160;</span>
         <img class="space" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="" loading="lazy">
-        <span class="space">ACTIONS</span>
+        <span class="space">&#160;ACTIONS</span>
       </span>
       
       <span [attr.uk-tooltip]="(!putCodes || putCodes.length == 0) 

orcid/recommend-orcid-links/searchResultsForOrcid.component.html

@@ -9,10 +9,9 @@
 </div>
 <ul class="uk-margin-top uk-list uk-margin search-results ">
   <li *ngFor="let result of results" class="uk-animation-fade">
-    <div class="uk-card uk-card-default uk-padding uk-card-hover">
-      <result-preview [properties]="properties" [showOrganizations]="true"
-                      [showSubjects]="true" [result]="getResultPreview(result)" [promoteWebsiteURL]="true">
-      </result-preview>
-    </div>
+		<result-preview [properties]="properties" [showOrganizations]="true"
+										[showSubjects]="true" [result]="getResultPreview(result)" [promoteWebsiteURL]="true"
+										[isCard]="true">
+		</result-preview>
   </li>
 </ul>

searchPages/searchUtils/modal-result/modal-result.component.ts

@@ -21,7 +21,8 @@ import {EnvProperties} from "../../../utils/properties/env-properties";
           <result-preview [modal]="modal" [properties]="properties"
                           [result]="getResultPreview(result)"
                           [showSubjects]="showSubjects"
-                          [showOrganizations]="showOrganizations"></result-preview>
+                          [showOrganizations]="showOrganizations"
+													[isCard]="false"></result-preview>
         </li>
       </ul>
       <no-load-paging *ngIf="totalResults > pageSize" [type]="type"

searchPages/searchUtils/newSearchPage.component.html

@@ -4,7 +4,7 @@
     refineFields.indexOf(customFilter.queryFieldName) ==
     -1) ||customFilter.isHiddenFilter)">
         <span class="uk-width-auto">
-          <span class="filter-tag uk-flex uk-flex-middle">
+          <span class="uk-label uk-flex uk-flex-middle">
               <span class="uk-margin-small-right uk-width-expand">{{customFilter.valueName}}</span>
           </span>
         </span>
@@ -15,9 +15,9 @@
           <span class="uk-width-auto">
             <a [attr.uk-tooltip]="'Remove ' + type.name" (click)="removeResultType(type.id)"
                [class.uk-disabled]="disabled">
-              <span class="filter-tag uk-flex uk-flex-middle">
+              <span class="uk-label uk-flex uk-flex-middle">
                   <span class="uk-margin-small-right uk-width-expand">{{type.name}}</span>
-                  <icon name="close" flex="true" ratio="0.7"></icon>
+                  <icon class="uk-text-muted" name="close" flex="true" ratio="0.7"></icon>
               </span>
             </a>
           </span>
@@ -30,9 +30,9 @@
           <span class="uk-width-auto">
             <a [attr.uk-tooltip]="'Remove ' + filter.selectedFromAndToValues" (click)="removeRangeFilter(filter)"
                [class.uk-disabled]="disabled">
-              <span class="filter-tag uk-flex uk-flex-middle">
+              <span class="uk-label uk-flex uk-flex-middle">
                   <span class="uk-margin-small-right uk-width-expand">{{filter.selectedFromAndToValues}}</span>
-                  <icon name="close" flex="true" ratio="0.7"></icon>
+                  <icon class="uk-text-muted" name="close" flex="true" ratio="0.7"></icon>
               </span>
             </a>
           </span>
@@ -46,9 +46,9 @@
                     class="uk-width-auto">
                 <a [attr.uk-tooltip]="'Remove ' + value.name" (click)="removeFilter(value, filter)"
                    [class.uk-disabled]="disabled">
-                  <span class="filter-tag uk-flex uk-flex-middle">
+                  <span class="uk-label uk-flex uk-flex-middle">
                       <span class="uk-margin-small-right uk-width-expand">{{value.name}}</span>
-                      <icon name="close" flex="true" ratio="0.7"></icon>
+                      <icon class="uk-text-muted" name="close" flex="true" ratio="0.7"></icon>
                   </span>
                 </a>
               </span>
@@ -153,7 +153,11 @@
 <schema2jsonld *ngIf="url" [URL]="url" type="search" [name]=pageTitleWithFilters
                [searchAction]=false [description]="metaDescription"></schema2jsonld>
 <div id="tm-main" class="uk-margin-medium-top" [class.uk-margin-top]="stickyForm">
-  <div uk-grid>
+  <ng-template #loading>
+    <loading></loading>
+  </ng-template>
+  <ng-template [ngIf]="searchUtils.refineStatus != errorCodes.LOADING || existingFiltersWithValues !== 0" [ngIfElse]="loading">
+    <div uk-grid>
     <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">
       <div class="uk-container uk-container-large">
         <div>
@@ -231,30 +235,32 @@
                     [href]="openaireLink+this.routerHelper.createQueryParamsString(this.parameterNames, this.parameterValues)"
                     target="_blank"> OpenAIRE - Explore</a>.
               </div>
-              <!-- Total results, number of pages -->
-              <h6 class="uk-margin-bottom">
-                <ng-container *ngIf="results && searchUtils.totalResults > 0">
-                  <span>{{searchUtils.totalResults|number}}</span>
-                  <span class="uk-text-muted uk-text-capitalize"> {{type}}, page </span>
-                  <span>{{searchUtils.page | number}}</span>
-                  <span class="uk-text-muted"> of {{(totalPages(searchUtils.totalResults)|number)}}</span>
-                </ng-container>
-                <ng-container *ngIf="!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING">
-                  <span>{{oldTotalResults|number}}</span>
-                  <span class="uk-text-muted uk-text-capitalize"> {{type}}, page </span>
-                  <span>{{searchUtils.page | number}}</span>
-                  <span class="uk-text-muted"> of {{(totalPages(oldTotalResults)|number)}}</span>
-                </ng-container>
-              </h6>
-              <!-- TODO Download results position-->
-              <div *ngIf="showDownload" class="uk-width-auto@m uk-margin-small-bottom">
-                <search-download
-                    *ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
-                    [isDisabled]="disabled"
-                    [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults"
-                    [piwikSiteId]="piwikSiteId">
-                </search-download>
-              </div>
+							<div class="uk-flex uk-flex-between uk-flex-middle uk-flex-wrap uk-margin-medium-top uk-margin-bottom">
+								<!-- Total results, number of pages -->
+								<h6 class="uk-margin-remove">
+									<ng-container *ngIf="results && searchUtils.totalResults > 0">
+										<span>{{searchUtils.totalResults|number}}</span>
+										<span class="uk-text-muted uk-text-capitalize"> {{type}}, page </span>
+										<span>{{searchUtils.page | number}}</span>
+										<span class="uk-text-muted"> of {{(totalPages(searchUtils.totalResults)|number)}}</span>
+									</ng-container>
+									<ng-container *ngIf="!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING">
+										<span>{{oldTotalResults|number}}</span>
+										<span class="uk-text-muted uk-text-capitalize"> {{type}}, page </span>
+										<span>{{searchUtils.page | number}}</span>
+										<span class="uk-text-muted"> of {{(totalPages(oldTotalResults)|number)}}</span>
+									</ng-container>
+								</h6>
+								<!-- Download results -->
+								<div *ngIf="showDownload" class="uk-margin-small-bottom uk-margin-small-top">
+									<search-download
+											*ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
+											[isDisabled]="disabled"
+											[type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults"
+											[piwikSiteId]="piwikSiteId">
+									</search-download>
+								</div>
+							</div>
               <!-- No Dashboard Filters -->
               <div
                   *ngIf="selectedRangeFilters+selectedFilters + selectedTypesNum  > 0 || (customFilter && (customFilter.selected == true || customFilter.isHiddenFilter))">
@@ -357,5 +363,6 @@
       </div>
     </div>
   </div>
+  </ng-template>
 </div>
 <modal-alert #removeCustomFilter (alertOutput)="closeCustomFilterModal()"></modal-alert>

searchPages/searchUtils/searchFilter.component.ts

@@ -10,7 +10,7 @@ import {
 import {Filter, Value} from './searchHelperClasses.class';
 import {ActivatedRoute, Router} from "@angular/router";
 import {SearchFields} from "../../utils/properties/searchFields";
-
+import {HelperFunctions} from "../../utils/HelperFunctions.class";
 @Component({
   selector: 'search-filter',
   templateUrl: 'searchFilter.component.html'
@@ -230,21 +230,24 @@ export class SearchFilterComponent implements OnInit, OnChanges {
   sort(values: Value[]) {
     let sorted: Value[] = values.slice();
     if (this.sortBy == "name") {
-      
       sorted.sort((n1, n2) => {
-        if (n1.name.toLowerCase() > n2.name.toLowerCase()) {
-          return 1;
+        if (this.filter.filterId === "sdg") {
+          return HelperFunctions.sortSDGs(n1.name.toLowerCase(), n2.name.toLowerCase());
+        } else {
+          if (n1.name.toLowerCase() > n2.name.toLowerCase()) {
+            return 1;
+          }
+          if (n1.name < n2.name) {
+            return -1;
+          }
+          return 0;
         }
-        
-        if (n1.name < n2.name) {
-          return -1;
-        }
-        
-        return 0;
       });
+      return sorted;
     }
     event.stopPropagation(); 
     this.sortedValues = Object.assign(sorted);
+
   }
   
   toggle() {

searchPages/searchUtils/searchResult.component.html

@@ -1,10 +1,9 @@
 <ul class="uk-list uk-list-xlarge uk-margin" [ngClass]="custom_class">
   <errorMessages [status]="[status]" [type]="'results'"></errorMessages>
   <li *ngFor="let result of previewResults" class="uk-animation-fade">
-    <div class="uk-card uk-card-default uk-card-body uk-card-hover">
-      <result-preview [properties]="properties" [showOrganizations]="showOrganizations"
-                      [showSubjects]="showSubjects" [result]="result" [showEnermaps]="showEnermaps">
-      </result-preview>
-    </div>
+		<result-preview [properties]="properties" [showOrganizations]="showOrganizations"
+										[showSubjects]="showSubjects" [result]="result" [showEnermaps]="showEnermaps"
+										[isCard]="true">
+		</result-preview>
   </li>
 </ul>

services/searchResearchResults.service.ts

@@ -341,7 +341,7 @@ export class SearchResearchResultsService {
         });
       }
       
-      var date: string = (resData.dateofacceptance) + ""; // transform to string in case it is an integer
+      var date: string = (resData.dateofacceptance ? resData.dateofacceptance : '') + ''; // transform to string in case it is an integer
       result.year = (date && (date).indexOf('-') !== -1) ? date.split('-')[0] : date;
 
       let abstracts = this.parsingFunctions.parseDescription(resData.description);

sharedComponents/navigationBar.component.html

@@ -92,148 +92,149 @@
       </div>
     </div>
   </div>
-  <div class="uk-visible@m">
-    <div class="uk-navbar-transparent" [ngClass]="portal + '-menu'"
-         uk-sticky="show-on-up: true" media="@m" cls-active="uk-active uk-navbar-sticky"
-         cls-inactive="uk-navbar-transparent"
+  <div id="main-menu" class="uk-visible@m">
+    <div id="sticky-menu" class="uk-navbar-container" [ngClass]="portal + '-menu'"
+         uk-sticky="show-on-up: true; top: #main-menu" media="@m" cls-active="uk-active uk-navbar-sticky"
          [attr.animation]="(header.stickyAnimation?'uk-animation-slide-top':null)">
       <div
           *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo  && header.badge">
         <img class="uk-position-top-left"
              [src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
-             alt="BETA" style="height: 100px; width: 100px; z-index: 1000">
+             alt="BETA" style="height: 65px; width: 65px; z-index: 1000">
       </div>
-      <nav class="uk-navbar uk-flex uk-navbar-container uk-padding-large uk-padding-remove-vertical" uk-navbar>
-        <ng-container *ngIf="!onlyTop">
-          <div class="uk-navbar-left">
-            <ng-container *ngIf="showLogo && isHeaderLeft">
-              <ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
-            </ng-container>
-          </div>
-          <div class="uk-navbar-center">
-            <ng-container *ngIf="showLogo && !isHeaderLeft">
-              <ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
-            </ng-container>
-            <ng-container *ngIf="!header.menuPosition || header.menuPosition === 'center'">
-              <ng-container *ngTemplateOutlet="mainMenu"></ng-container>
-            </ng-container>
-          </div>
-          <div class="uk-navbar-right">
-            <ng-container *ngIf="header.menuPosition === 'right'">
-              <ng-container *ngTemplateOutlet="mainMenu"></ng-container>
-            </ng-container>
-            <user-mini *ngIf="userMenu" [user]="user" [dark]="dark"
-                       [userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
-                       [cookieDomain]=properties.cookieDomain></user-mini>
-            <ng-content select="[extra-m]"></ng-content>
-          </div>
-          <ng-template #mainMenu>
-            <ul class="uk-navbar-nav" [class.uk-margin-right]="!userMenu">
-              <li class="uk-parent" *ngIf="showHomeMenuItem && currentRoute.route !== '/'">
-                <a routerLink="/">Home</a>
-              </li>
-              <ng-container *ngFor="let menu of menuItems">
-                <li class="uk-parent" [class.uk-active]="isTheActiveMenu(menu)"
-                    *ngIf="isAtleastOneEnabled(menu.rootItem.entitiesRequired,showEntity) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage)">
-                  <!--a routerLink="{{menu.rootItem.route}}"   [queryParams]=menu.rootItem.params class="" aria-expanded="false">{{menu.rootItem.title}}</a-->
-                  <a *ngIf="menu.rootItem.route.length > 0 && (isEnabled([menu.rootItem.route], showPage) || !menu.rootItem.routeRequired )"
-                     routerLink="{{menu.rootItem.route}}"
-                     [queryParams]="menu.rootItem.params"
-                     [fragment]="menu.rootItem.fragment"> {{menu.rootItem.title}}</a>
-                  <a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0"
-                     href="{{menu.rootItem.url}}" target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}"
-                     aria-expanded="false">{{menu.rootItem.title}}</a>
-                  <a *ngIf="(menu.rootItem.route.length == 0 && menu.rootItem.url.length == 0) || ( menu.rootItem.route.length >0 && menu.rootItem.routeRequired && !isEnabled([menu.rootItem.route], showPage) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage))">{{menu.rootItem.title}}</a>
-                  <div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown" uk-drop="pos: bottom-left">
-                    <div class="uk-height-max-medium uk-overflow-auto">
-                      <ul class="uk-nav uk-navbar-dropdown-nav">
-                        <ng-container *ngFor="let submenu of menu.items">
-                          <li *ngIf="isEnabled(submenu.entitiesRequired,showEntity) &&
-                            isEnabled(submenu.routeRequired, showPage) && (submenu.route.length > 0 ||
-                            submenu.url.length > 0)" [class.uk-active]="isTheActiveMenuItem(submenu)"
-                              [class.uk-parent]="submenu.items && submenu.items.length > 0">
-                            <a *ngIf="submenu.route.length > 0"
-                               routerLink="{{submenu.route}}" [queryParams]="submenu.params"
-                               [fragment]="submenu.fragment">{{submenu.title}}</a>
-                            <a *ngIf="submenu.route.length == 0 && submenu.url.length > 0"
-                               href="{{submenu.url}}"
-                               target="{{submenu.url.includes('http') ? '_blank' : '_self'}}">{{submenu.title}}</a>
-                            <ul *ngIf="submenu.items && submenu.items.length > 0" class="uk-nav-sub">
-                              <ng-container *ngFor="let subsubmenu of submenu.items">
-                                <li>
-                                  <a *ngIf="subsubmenu.route.length > 0"
-                                     routerLink="{{subsubmenu.route}}" [queryParams]="subsubmenu.params"
-                                     [fragment]="subsubmenu.fragment">{{subsubmenu.title}}</a>
-                                  <a *ngIf="subsubmenu.route.length == 0 && subsubmenu.url.length > 0"
-                                     href="{{subsubmenu.url}}" target="_blank">{{subsubmenu.title}}</a>
-                                </li>
-                              </ng-container>
-                            </ul>
-
-                          <li *ngIf="submenu.route.length == 0 && submenu.url.length == 0 && isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage)"
-                              class="uk-nav-header">{{submenu.title}}</li>
-                        </ng-container>
-                      </ul>
-                    </div>
-                  </div>
-                </li>
+      <div class="uk-container uk-container-expand">
+        <nav class="uk-navbar" uk-navbar>
+          <ng-container *ngIf="!onlyTop">
+            <div class="uk-navbar-left">
+              <ng-container *ngIf="showLogo && isHeaderLeft">
+                <ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
               </ng-container>
-              <!-- Custom menu items -->
-              <!-- TODO: Add to mobile menu as well! -->
-              <ng-container *ngIf="additionalMenuItems?.length > 0 && properties.environment == 'development'">
-                <ng-container *ngFor="let menu of additionalMenuItems">
-                  <li class="uk-parent">
-                    <!-- INTERNAL ROOT-->
-                    <a *ngIf="menu.type == 'internal' && menu.route && isEnabled([menu.route], showPage)"
-                       routerLink="{{menu.route}}"
-                       [queryParams]="menu.params"
-                       [fragment]="menu.fragment">
-                      {{menu.title}}
-                    </a>
-                    <!-- EXTERNAL ROOT-->
-                    <a *ngIf="menu.type == 'external' && menu.url"
-                       href="{{menu.url}}"
-                       target="_blank">
-                      {{menu.title}}
-                    </a>
-                    <!-- NO ACTION ROOT-->
-                    <a *ngIf="menu.type == 'noAction'">
-                      {{menu.title}}
-                    </a>
-                    <div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left"
-                         style="top: 80px; left: 0px;" id="{{menu._id}}" uk-toggle>
-                      <div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid="">
-                        <div class="uk-first-column uk-height-max-medium uk-overflow-auto">
-                          <ul class="uk-nav uk-navbar-dropdown-nav">
-                            <ng-container *ngFor="let submenu of menu.items">
-                              <li>
-                                <!-- INTERNAL CHILD -->
-                                <a *ngIf="submenu.type == 'internal' && submenu.route && isEnabled([submenu.route], showPage)"
-                                   routerLink="{{submenu.route}}"
-                                   [queryParams]="submenu.params"
-                                   [fragment]="submenu.fragment"
-                                   [class.uk-active]="isTheActiveMenuItem(submenu)">
-                                  {{submenu.title}}
-                                </a>
-                                <!-- EXTERNAL CHILD -->
-                                <a *ngIf="submenu.type == 'external' && submenu.url"
-                                   href="{{submenu.url}}"
-                                   target="_blank">
-                                  {{submenu.title}}
-                                </a>
-                              </li>
-                            </ng-container>
-                          </ul>
-                        </div>
+            </div>
+            <div class="uk-navbar-center">
+              <ng-container *ngIf="showLogo && !isHeaderLeft">
+                <ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
+              </ng-container>
+              <ng-container *ngIf="!header.menuPosition || header.menuPosition === 'center'">
+                <ng-container *ngTemplateOutlet="mainMenu"></ng-container>
+              </ng-container>
+            </div>
+            <div class="uk-navbar-right">
+              <ng-container *ngIf="header.menuPosition === 'right'">
+                <ng-container *ngTemplateOutlet="mainMenu"></ng-container>
+              </ng-container>
+              <user-mini *ngIf="userMenu" [user]="user" [dark]="dark"
+                         [userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
+                         [cookieDomain]=properties.cookieDomain></user-mini>
+              <ng-content select="[extra-m]"></ng-content>
+            </div>
+            <ng-template #mainMenu>
+              <ul class="uk-navbar-nav" [class.uk-margin-right]="!userMenu">
+                <li class="uk-parent" *ngIf="showHomeMenuItem && currentRoute.route !== '/'">
+                  <a routerLink="/">Home</a>
+                </li>
+                <ng-container *ngFor="let menu of menuItems">
+                  <li class="uk-parent" [class.uk-active]="isTheActiveMenu(menu)"
+                      *ngIf="isAtleastOneEnabled(menu.rootItem.entitiesRequired,showEntity) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage)">
+                    <!--a routerLink="{{menu.rootItem.route}}"   [queryParams]=menu.rootItem.params class="" aria-expanded="false">{{menu.rootItem.title}}</a-->
+                    <a *ngIf="menu.rootItem.route.length > 0 && (isEnabled([menu.rootItem.route], showPage) || !menu.rootItem.routeRequired )"
+                       routerLink="{{menu.rootItem.route}}"
+                       [queryParams]="menu.rootItem.params"
+                       [fragment]="menu.rootItem.fragment"> {{menu.rootItem.title}}</a>
+                    <a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0"
+                       href="{{menu.rootItem.url}}" target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}"
+                       aria-expanded="false">{{menu.rootItem.title}}</a>
+                    <a *ngIf="(menu.rootItem.route.length == 0 && menu.rootItem.url.length == 0) || ( menu.rootItem.route.length >0 && menu.rootItem.routeRequired && !isEnabled([menu.rootItem.route], showPage) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage))">{{menu.rootItem.title}}</a>
+                    <div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown" uk-drop="pos: bottom-left">
+                      <div class="uk-height-max-medium uk-overflow-auto">
+                        <ul class="uk-nav uk-navbar-dropdown-nav">
+                          <ng-container *ngFor="let submenu of menu.items">
+                            <li *ngIf="isEnabled(submenu.entitiesRequired,showEntity) &&
+                              isEnabled(submenu.routeRequired, showPage) && (submenu.route.length > 0 ||
+                              submenu.url.length > 0)" [class.uk-active]="isTheActiveMenuItem(submenu)"
+                                [class.uk-parent]="submenu.items && submenu.items.length > 0">
+                              <a *ngIf="submenu.route.length > 0"
+                                 routerLink="{{submenu.route}}" [queryParams]="submenu.params"
+                                 [fragment]="submenu.fragment">{{submenu.title}}</a>
+                              <a *ngIf="submenu.route.length == 0 && submenu.url.length > 0"
+                                 href="{{submenu.url}}"
+                                 target="{{submenu.url.includes('http') ? '_blank' : '_self'}}">{{submenu.title}}</a>
+                              <ul *ngIf="submenu.items && submenu.items.length > 0" class="uk-nav-sub">
+                                <ng-container *ngFor="let subsubmenu of submenu.items">
+                                  <li>
+                                    <a *ngIf="subsubmenu.route.length > 0"
+                                       routerLink="{{subsubmenu.route}}" [queryParams]="subsubmenu.params"
+                                       [fragment]="subsubmenu.fragment">{{subsubmenu.title}}</a>
+                                    <a *ngIf="subsubmenu.route.length == 0 && subsubmenu.url.length > 0"
+                                       href="{{subsubmenu.url}}" target="_blank">{{subsubmenu.title}}</a>
+                                  </li>
+                                </ng-container>
+                              </ul>
+
+                            <li *ngIf="submenu.route.length == 0 && submenu.url.length == 0 && isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage)"
+                                class="uk-nav-header">{{submenu.title}}</li>
+                          </ng-container>
+                        </ul>
                       </div>
                     </div>
                   </li>
                 </ng-container>
-              </ng-container>
-            </ul>
-          </ng-template>
-        </ng-container>
-      </nav>
+                <!-- Custom menu items -->
+                <!-- TODO: Add to mobile menu as well! -->
+                <ng-container *ngIf="additionalMenuItems?.length > 0 && properties.environment == 'development'">
+                  <ng-container *ngFor="let menu of additionalMenuItems">
+                    <li class="uk-parent">
+                      <!-- INTERNAL ROOT-->
+                      <a *ngIf="menu.type == 'internal' && menu.route && isEnabled([menu.route], showPage)"
+                         routerLink="{{menu.route}}"
+                         [queryParams]="menu.params"
+                         [fragment]="menu.fragment">
+                        {{menu.title}}
+                      </a>
+                      <!-- EXTERNAL ROOT-->
+                      <a *ngIf="menu.type == 'external' && menu.url"
+                         href="{{menu.url}}"
+                         target="_blank">
+                        {{menu.title}}
+                      </a>
+                      <!-- NO ACTION ROOT-->
+                      <a *ngIf="menu.type == 'noAction'">
+                        {{menu.title}}
+                      </a>
+                      <div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left"
+                           style="top: 80px; left: 0px;" id="{{menu._id}}" uk-toggle>
+                        <div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid="">
+                          <div class="uk-first-column uk-height-max-medium uk-overflow-auto">
+                            <ul class="uk-nav uk-navbar-dropdown-nav">
+                              <ng-container *ngFor="let submenu of menu.items">
+                                <li>
+                                  <!-- INTERNAL CHILD -->
+                                  <a *ngIf="submenu.type == 'internal' && submenu.route && isEnabled([submenu.route], showPage)"
+                                     routerLink="{{submenu.route}}"
+                                     [queryParams]="submenu.params"
+                                     [fragment]="submenu.fragment"
+                                     [class.uk-active]="isTheActiveMenuItem(submenu)">
+                                    {{submenu.title}}
+                                  </a>
+                                  <!-- EXTERNAL CHILD -->
+                                  <a *ngIf="submenu.type == 'external' && submenu.url"
+                                     href="{{submenu.url}}"
+                                     target="_blank">
+                                    {{submenu.title}}
+                                  </a>
+                                </li>
+                              </ng-container>
+                            </ul>
+                          </div>
+                        </div>
+                      </div>
+                    </li>
+                  </ng-container>
+                </ng-container>
+              </ul>
+            </ng-template>
+          </ng-container>
+        </nav>
+      </div>
     </div>
     <!-- New navbar for featured menu items - test only -->
     <ng-container *ngIf="featuredMenuItems?.length > 0 && properties.environment == 'development'">
@@ -264,11 +265,10 @@
 </div>
 <ng-template #header_template let-mobile="mobile">
   <a *ngIf="!header.url" [routerLink]="header.route" [class.uk-padding-remove]="!isHeaderLeft"
-     class="uk-logo uk-navbar-item uk-text-center uk-text-bold">
+     class="uk-logo uk-navbar-item uk-text-center uk-text-bold" [class.uk-margin-medium-left]="!mobile">
     <img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)"
          [src]="!mobile?header.logoUrl:header.logoSmallUrl"
-         [alt]="header.title"
-         class="uk-width-1-1">
+         [alt]="header.title">
     <ng-container *ngIf="(mobile && !header.logoSmallUrl) || (!mobile && !header.logoUrl)">
       <div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="header.title">
         <p class="uk-margin-remove">{{header.title}}</p>
@@ -276,11 +276,10 @@
     </ng-container>
   </a>
   <a *ngIf="header.url" [href]="header.url" [class.uk-padding-remove]="!isHeaderLeft"
-     class="uk-logo uk-navbar-item uk-text-center uk-text-bold">
+     class="uk-logo uk-navbar-item uk-text-center uk-text-bold" [class..uk-margin-medium-left]="!mobile">
     <img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)"
          [src]="!mobile?header.logoUrl:header.logoSmallUrl"
-         [alt]="header.title"
-         class="uk-width-1-1">
+         [alt]="header.title">
     <ng-container *ngIf="(mobile && !header.logoSmallUrl) || (!mobile && !header.logoUrl)">
       <div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="header.title">
         <p class="uk-margin-remove">{{header.title}}</p>

sharedComponents/quick-contact/quick-contact.component.css

@@ -4,7 +4,7 @@
 	right: 5vw;
 }
 
-.uk-card > .uk-background-secondary:first-child {
+.uk-card > .uk-background-primary:first-child {
 	border-radius: 4px 4px 0 0;
 }
 

sharedComponents/quick-contact/quick-contact.component.html

@@ -5,7 +5,7 @@
 		<span class="uk-margin-small-left">Contact</span>
 	</a>
 	<div #drop id="quick-contact" class="uk-card uk-card-default uk-drop uk-overflow-auto" uk-drop="mode: click; pos: top-right; animation: uk-animation-fade">
-		<div class="uk-background-secondary uk-padding-small uk-text-center">
+		<div class="uk-background-primary uk-padding-small uk-text-center">
 			<div class="uk-text-small">
 				Send a message
 			</div>

utils/HelperFunctions.class.ts

@@ -70,4 +70,23 @@ export class HelperFunctions {
   public static getValues(value: any): any[] {
     return Object.keys(value).map(key => value[key]);
   }
+
+  public static sortSDGs(sgd1: string, sdg2: string): number {
+    let splitA: string[] = sgd1.split(".");
+    let numA: number;
+    if(splitA && splitA.length > 0) {
+      numA = +splitA[0];
+    }
+    let splitB: string[] = sdg2.split(".");
+    let numB: number;
+    if(splitB && splitB.length > 0) {
+      numB = +splitB[0];
+    }
+
+    if(numA && numB) {
+      return numA - numB;
+    } else {
+      return sgd1.localeCompare(sdg2);
+    }
+  }
 }

utils/entities/resultLandingInfo.ts

@@ -49,6 +49,8 @@ export class ResultLandingInfo {
   subjects: string[];
   otherSubjects: Map<string, string[]>;
   classifiedSubjects: Map<string, string[]>;          //<class of subject, subjects>
+  fos: string[];
+  sdg: string[];
   showEgiNotebookButton: boolean = false;
   
   // // percentage is for trust

utils/properties/searchFields.ts

@@ -14,7 +14,7 @@ export class SearchFields {
     "resultbestaccessright", "relfunder",
     "relfundinglevel0_id", "relfundinglevel1_id", "relfundinglevel2_id",
     "relproject",
-    "instancetypename", "resultlanguagename", "community", "resulthostingdatasource", "country"];
+    "instancetypename", "resultlanguagename", "community", "resulthostingdatasource", "country", "sdg", "fos"];
 
   public RESULT_ADVANCED_FIELDS: string[] = ["q", "resulttitle", "resultauthor", "authorid", "resultdescription", "resultsubject", "resultpublisher",
     "resultbestaccessright", "community", "collectedfromdatasourceid", "resulthostingdatasourceid", "resultdateofacceptance",
@@ -231,6 +231,22 @@ export class SearchFields {
       operator: "cu",
       equalityOperator: " exact ",
       filterType: "checkbox"
+    },
+    ["sdg"]: {
+      name: "Sustainable Development Goals (SDG)",
+      type: "refine",
+      param: "sdg",
+      operator: "sg",
+      equalityOperator: " exact ",
+      filterType: "checkbox"
+    },
+    ["fos"]: {
+      name: "Fields of Science and Technology classification (FOS)",
+      type: "refine",
+      param: "fos",
+      operator: "fs",
+      equalityOperator: " exact ",
+      filterType: "checkbox"
     }
   };
   

utils/rangeFilter/rangeFilter.component.html

@@ -25,8 +25,9 @@
                    [placeholder]="'e.g. ' + yearMax "/>
             <button type="submit" (click)="yearChanged()"
                     [ngStyle]="{'cursor': (rangeForm.valid && (yearFrom.dirty || yearTo.dirty)) ? 'pointer' : 'default'}"
-                    class="uk-icon uk-icon-button uk-margin-small-left uk-text-right uk-button-default"
-                    [disabled]="isDisabled || rangeForm.invalid || (!yearFrom.dirty && !yearTo.dirty)">
+                    class="uk-icon uk-icon-button uk-button-default uk-margin-small-left"
+                    [class.uk-disabled]="isDisabled || rangeForm.invalid || (!yearFrom.dirty && !yearTo.dirty)"
+										[disabled]="isDisabled || rangeForm.invalid || (!yearFrom.dirty && !yearTo.dirty)">
               <svg  width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
                     icon="chevron-right" ratio="1">
                 <polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline>
@@ -55,20 +56,20 @@
 
 <!--              Natalia's suggestion-->
               <div class="uk-margin-small uk-margin-top uk-text-left">
-                <ul class="uk-subnav uk-subnav-divider recentyears">
+                <ul class="uk-text-small uk-grid uk-grid-small uk-grid-divider" uk-grid>
 <!--                  + (isDisabled ? ' uk-disabled uk-text-muted' : '')"-->
                   <li>
                     <a *ngIf="actionRoute" [routerLink]="getRoute()"
                          [queryParams]="getParams(0,(stringToNum(filter.selectedToValue) ==
                   currentYear
                   &&stringToNum(filter.selectedFromValue)  == currentYear))"
-                    [class]="'portal-link uk-text-center '
+                    [class]="'uk-text-center '
                                 + ((stringToNum(filter.selectedFromValue) == currentYear && stringToNum(filter.selectedToValue)  == currentYear) ? ' uk-text-bold' : '')
                                 "
                     (click)="yearChanged(0)"
                   >This year</a>
                     <a *ngIf="!actionRoute"
-                       [class]="'portal-link uk-text-center '
+                       [class]="'uk-text-center '
                                 + ((stringToNum(filter.selectedFromValue) == currentYear && stringToNum(filter.selectedToValue)  == currentYear) ? ' uk-text-bold' : '')
                                 "
                        (click)="yearChanged(0)"
@@ -77,13 +78,13 @@
                   <li><a *ngIf="actionRoute" [routerLink]="getRoute()"
                          [queryParams]="getParams(4,(stringToNum(filter.selectedToValue) == currentYear
                   &&stringToNum(filter.selectedFromValue)  == currentYear-4))"
-                    [class]="'portal-link uk-text-center '
+                    [class]="'uk-text-center '
                                 + ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue)  == currentYear-4) ? ' uk-text-bold' : '')
                                 "
                     (click)="yearChanged(4)"
                   >Last 5 years</a>
                     <a *ngIf="!actionRoute"
-                       [class]="'portal-link uk-text-center '
+                       [class]="'uk-text-center '
                                 + ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue)  == currentYear-4) ? ' uk-text-bold' : '')
                                 "
                        (click)="yearChanged(4)"
@@ -91,13 +92,13 @@
                   </li>
                   <li><a *ngIf="actionRoute" [routerLink]="getRoute()"
                          [queryParams]="getParams(9,(stringToNum(filter.selectedToValue) == currentYear &&stringToNum(filter.selectedFromValue)  == currentYear-9))"
-                    [class]="'portal-link uk-text-center '
+                    [class]="'uk-text-center '
                                 + ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue)  == currentYear-9) ? ' uk-text-bold' : '')
                                 "
                     (click)="yearChanged(9)"
                   >Last 10 years</a>
                     <a *ngIf="!actionRoute"
-                       [class]="'portal-link uk-text-center '
+                       [class]="'uk-text-center '
                                 + ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue)  == currentYear-9) ? ' uk-text-bold' : '')
                                 "
                        (click)="yearChanged(9)"

utils/result-preview/result-preview.component.html

@@ -1,4 +1,5 @@
-<div *ngIf="result">
+<div *ngIf="result" [ngClass]="{'uk-card uk-card-default uk-card-hover': isCard}">
+	<div [ngClass]="{'uk-card-body': isCard}">
   <!-- Before title -->
   <div class="uk-grid uk-flex uk-flex-middle">
     <div   *ngIf="properties.enermapsURL && showEnermaps && result.enermapsId"  class=" uk-inline uk-width-auto  uk-text-center uk-visible-toggle">
@@ -119,49 +120,55 @@
     <div class="uk-margin-small-bottom">
       <span
           *ngIf="result.accessMode && result.accessMode.toLowerCase() !== 'not available'"
-          class="uk-label custom-label uk-text-truncate " [ngClass]="'label-' + accessClass(result.accessMode)"
+          class="uk-label uk-text-truncate " [ngClass]="'uk-label-' + accessClass(result.accessMode)"
           title="Access Mode">
         {{result.accessMode}}
       </span>{{' '}}
-      <span *ngIf="result.openAccessMandatePublications && (!result.openAccessMandateDatasets)"
-            class="uk-label custom-label label-open uk-text-truncate"
-            title="Open Access mandate for Publications">
-          Open Access mandate for Publications
-  </span>{{' '}}
+      <span 
+					*ngIf="result.openAccessMandatePublications && (!result.openAccessMandateDatasets)"
+					class="uk-label uk-label-success uk-text-truncate"
+					title="Open Access mandate for Publications">
+				Open Access mandate for Publications
+			</span>{{' '}}
       <span
           *ngIf="result.openAccessMandateDatasets != undefined && result.openAccessMandateDatasets && (result.openAccessMandatePublications == undefined || !result.openAccessMandatePublications)"
-          class="uk-label custom-label label-open uk-text-truncate " title="Open Access mandate for Research Data">
-          Open Access mandate for Research Data
-  </span>{{' '}}
+          class="uk-label uk-label-success uk-text-truncate " title="Open Access mandate for Research Data">
+				Open Access mandate for Research Data
+			</span>{{' '}}
       <span
           *ngIf="result.openAccessMandatePublications != undefined && result.openAccessMandatePublications && result.openAccessMandateDatasets != undefined && result.openAccessMandateDatasets"
-          class="uk-label custom-label label-open uk-text-truncate"
+          class="uk-label uk-label-success uk-text-truncate"
           title="Open Access mandate for Publications and Research Data">
-          Open Access mandate for Publications and Research Data
-  </span>{{' '}}
+				Open Access mandate for Publications and Research Data
+			</span>{{' '}}
       <span *ngIf="result.languages && result.languages.length > 0">
-    <span *ngFor="let language of result.languages"
-          class="uk-label custom-label label-language " title="Language">
-      {{language}}
-    </span>{{' '}}
-  </span>
+				<span
+						*ngFor="let language of result.languages"
+						class="uk-label" title="Language">
+					{{language}}
+				</span>{{' '}}
+			</span>
       <span *ngIf="result.programmingLanguages && result.programmingLanguages.length > 0">
-    <span *ngFor="let programmingLanguage of result.programmingLanguages"
-          class="uk-label custom-label label-language" title="Programming Language">
-      {{programmingLanguage}}
-    </span>{{" "}}
-  </span>
-      <span *ngIf="result.sc39" class="uk-label custom-label label-sc39" title="Special Clause 39">
-    Special Clause 39
-  </span>{{' '}}
-      <span *ngIf="result.compatibility && result.compatibility != '' && result.compatibility != 'not available'"
-            class="uk-label custom-label  label-compatibility" title="Compatibility">
-    {{result.compatibility}}
-  </span>{{' '}}
-      <span *ngIf="result.compatibility != undefined && result.compatibility != '' && result.compatibility ==
-      'not available'"
-            class="uk-label custom-label  label-danger" title="OpenAIRE Compatibility">Not yet registered</span>
-      {{' '}}
+				<span 
+						*ngFor="let programmingLanguage of result.programmingLanguages"
+						class="uk-label" title="Programming Language">
+					{{programmingLanguage}}
+				</span>{{" "}}
+			</span>
+			<span 
+					*ngIf="result.sc39" class="uk-label" title="Special Clause 39">
+				Special Clause 39
+			</span>{{' '}}
+			<span 
+					*ngIf="result.compatibility && result.compatibility != '' && result.compatibility != 'not available'"
+					class="uk-label" title="Compatibility">
+				{{result.compatibility}}
+			</span>{{' '}}
+			<span 
+					*ngIf="result.compatibility != undefined && result.compatibility != '' && result.compatibility == 'not available'"
+					class="uk-label uk-label-danger" title="OpenAIRE Compatibility">
+				Not yet registered
+			</span>{{' '}}
     </div>
     <!-- Authors -->
     <div *ngIf="result.authors" class="uk-flex uk-margin-small-bottom">
@@ -283,11 +290,13 @@
   </div>
     </div>
   </div>
+	</div>
   <!--&& loggedIn -->
   <div *ngIf="(result.pop_inf && result.DOI) ||
                 ((properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community') &&
                   ((showOrcid && result.identifiers && result.identifiers.size > 0) || result.orcidCreationDates?.length > 0))"
-       class="result-preview-bottom">
+				class="result-preview-bottom"
+				[ngClass]="{'uk-card-footer': isCard}">
     <!-- Impact Factors-->
     <span class="uk-flex uk-flex-top">
     <ng-container *ngIf="result.pop_inf && result.DOI">
@@ -362,6 +371,7 @@
       </div>
     </ng-container>
       <!-- && loggedIn    -->
+			<!-- TODO: change colors/opacity and disabled attr for ORCID buttons -->
     <span *ngIf="(properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community')
                  && showOrcid && result.identifiers && result.identifiers.size > 0"
           class="uk-width-1-3 uk-width-expand@s">

utils/result-preview/result-preview.component.ts

@@ -19,6 +19,7 @@ export class ResultPreviewComponent implements OnInit, OnChanges {
   @Input() modal: AlertModal = null;
   @Input() promoteWebsiteURL: boolean = false;
   @Input() hasLink: boolean = true;
+	@Input() isCard: boolean = false;
   public routerHelper: RouterHelper = new RouterHelper();
   public urlParam: string;
   public url: string;
@@ -142,11 +143,11 @@ export class ResultPreviewComponent implements OnInit, OnChanges {
   
   public accessClass(accessMode: string): string {
     if(accessMode.toLowerCase().indexOf('open') !== -1) {
-      return 'open';
+      return 'success';
     } else if(accessMode.toLowerCase() === 'not available') {
-      return 'unknown';
+      return 'disabled'; // unknown
     } else {
-      return 'closed';
+      return 'disabled'; // closed
     }
   }
   

utils/smooth-scroll.ts

@@ -1,4 +1,4 @@
-import {NavigationEnd, Router} from '@angular/router';
+import {ActivationStart, NavigationEnd, Router} from '@angular/router';
 import {Injectable} from '@angular/core';
 import {Subscription} from 'rxjs';
 
@@ -8,17 +8,20 @@ import {Subscription} from 'rxjs';
 export class SmoothScroll {
   private interval;
   private readonly sub;
-  private lastRoute;
+  private lastComponent;
+  private currentComponent: any;
   
   constructor(private router: Router) {
-    if(typeof window !== "undefined") {
+    if (typeof window !== "undefined") {
       this.sub = router.events.subscribe(event => {
-        if (event instanceof NavigationEnd) {
+        if (event instanceof ActivationStart) {
+          this.currentComponent = event.snapshot.component;
+        } else if (event instanceof NavigationEnd) {
           if (this.interval) {
             clearInterval(this.interval);
           }
           const fragment = router.parseUrl(router.url).fragment;
-          if (this.lastRoute !== this.getUrl(event.url)) {
+          if (this.lastComponent !== this.currentComponent) {
             window.scrollTo({top: 0});
           }
           if (fragment) {
@@ -49,16 +52,12 @@ export class SmoothScroll {
           } else {
             window.scrollTo({top: 0, behavior: 'smooth'});
           }
-          this.lastRoute = this.getUrl(event.url);
+          this.lastComponent = this.currentComponent;
         }
       });
     }
   }
   
-  private getUrl(url: string) {
-    return url.split('?')[0].split('#')[0];
-  }
-  
   public clearSubscriptions() {
     if (this.sub && this.sub instanceof Subscription) {
       this.sub.unsubscribe();

utils/tabs/tab.component.ts

@@ -7,9 +7,10 @@
 import { Component, Input } from '@angular/core';
 
 export interface TabIcon {
-	svg: string;
-	ratio: number;
-	fill: string;
+  name?: string;
+	svg?: string;
+	ratio?: number;
+  active: string;
 }
 
 @Component({

utils/tabs/tabs.component.ts

@@ -2,16 +2,17 @@
  * The main component that renders single TabComponent
  * instances.
  */
-import {Component, ContentChildren, EventEmitter, Input, Output, QueryList,} from '@angular/core';
+import {AfterContentInit, Component, ContentChildren, EventEmitter, Input, Output, QueryList,} from '@angular/core';
 import {TabComponent} from './tab.component';
 
 @Component({
   selector: 'my-tabs',
   template: `
     <ul class="uk-tab" [ngClass]="customClass" uk-tab="connect: .tabs-content">
-      <li *ngFor="let tab of tabs.toArray(); let i=index" [ngClass]="tab.customClass" [class.uk-active]="i === 0" (click)="selectTab(tab)">
+      <li *ngFor="let tab of tabs.toArray(); let i=index" [ngClass]="tab.customClass" [class.uk-active]="selected === tab.tabId" (click)="selectTab(tab)">
         <a class="uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center" [ngClass]="tab.tabIcon ? 'uk-flex-column' : ''">
-					<icon *ngIf="tab.tabIcon" [svg]="tab.tabIcon" [fill]="tab.tabIcon" class="uk-margin-small-bottom"></icon>
+					<icon *ngIf="tab.tabIcon" [svg]="tab.tabIcon.svg" [ratio]="tab.tabIcon.ratio?tab.tabIcon.ratio:1" class="uk-margin-small-bottom"
+                [ngClass]="(selected === tab.tabId)?tab.tabIcon.active:null"></icon>
           <div>{{tab.title}}</div>
           <div *ngIf="tab.num" class="number">{{tab.num | number}}</div>
         </a>
@@ -22,14 +23,21 @@ import {TabComponent} from './tab.component';
     </div>
   `
 })
-export class TabsComponent {
+export class TabsComponent implements AfterContentInit {
   @Input()
   public customClass: string;
   @ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
   @Output() public selectedActiveTab: EventEmitter<any> = new EventEmitter();
-
+  public selected: string;
+  
+  ngAfterContentInit() {
+    if(this.tabs.length > 0) {
+      this.selected = this.tabs.get(0).tabId;
+    }
+  }
+  
   selectTab(tab: TabComponent){
-    // activate the tab the user has clicked on.
+    this.selected = tab.tabId;
     this.selectedActiveTab.emit(tab.tabId);
   }
 }