[Library | new-theme]: Redesign of project landing page and small upadates on result landing and common components.

1. addThis.component.ts: Updated social icons of addThis.
2. landing-header.component.ts: Added "uk-text-small" in subtitle.
3. metrics.component.ts: Added method "clickedMetrics()" to set "metricsClicked" | Added metricsClicked and metrics.infos conditions for loading table or iframes | Added customContainerClass and customIframeClass in <i-frame>.
4. project.component: Updated project landing page according to UI redesign.
5. project.module.ts: Import LoadingModule, IconsModule, InputModule.
6. project.service.ts: Use parsingFunctions.parseDescription.
7. projectService.module.ts: iconsService.registerIcons([link, graph]).
8. resultLanding.component.html: Small fixes in ui | Added right arrow on tooltips of actions that are links to other pages | Display of description updated as innerHtml (#7345).
9. orcid-work.component.ts: Added flex=true in <icon>.
10. input.component.ts: Added disabled?: boolean in Option interface and show disabled options as muted.
11. projectInfo.ts: Updated description to be string[] instead of string.
12. iframe.component.ts: Added @Input() customContainerClass: string = ""; and @Input() customIframeClass: string = "";
13. search-tab.component.ts: Updated according to redesign | Update "getEntityName()" to return values from OpenaireEntities.
14. tabs.component.ts: Added "uk-height-1-1" in custom tabs | In #mytabs::before set left:0.

landingPages/landing-utils/addThis.component.ts

@@ -17,7 +17,7 @@ declare var addthis: addthis;
 @Component({
   selector: 'addThis',
   template: `
-    <div class="addthis_inline_share_toolbox_lcx9"></div>
+<div class="addthis_inline_share_toolbox_lcx9_8cfy"></div>
   `
 })
 export class AddThisComponent implements OnInit {

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

@@ -51,7 +51,7 @@ import {AlertModal} from "../../../utils/modal/alert";
       </div>
       <showTitle [titleName]="title" classNames="uk-margin-remove-bottom"></showTitle>
       <div *ngIf="subTitle">
-        <span class="uk-text-meta" [innerHTML]="subTitle"></span>
+        <span class="uk-text-meta uk-text-small" [innerHTML]="subTitle"></span>
       </div>
       <div *ngIf="authors" class="uk-margin-top">
         <showAuthors [authorsLimit]="authorLimit" [modal]="modal" [showAll]="showAllAuthors" [authors]="authors"></showAuthors>

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

@@ -12,7 +12,7 @@ import {ClickEvent} from "../../../utils/click/click-outside-or-esc.directive";
   styleUrls: ['metrics.component.css'],
   template: `
     <div *ngIf="metrics && (pageViews >0 || metrics.totalViews > 0|| metrics.totalDownloads >0)" class="metrics">
-      <a class="m-badge uk-link-reset uk-display-block">
+      <a class="m-badge uk-link-reset uk-display-block" (click)="clickedMetrics()">
         <img src="assets/common-assets/logo-small-usage-counts.png" loading="lazy" alt="usage counts">
         <div class="number">{{total | number}}</div>
       </a>
@@ -38,7 +38,7 @@ import {ClickEvent} from "../../../utils/click/click-outside-or-esc.directive";
             </div>
           </div>
           <div class="uk-padding">
-            <div *ngIf="(metrics.totalViews > 0 && viewsFrameUrl) || (metrics.totalDownloads > 0 && downloadsFrameUrl)"
+            <div *ngIf="metricsClicked && (metrics.infos?.size > 0 || (metrics.totalViews > 0 && viewsFrameUrl) || (metrics.totalDownloads > 0 && downloadsFrameUrl))"
                  class="uk-position-relative uk-visible-toggle uk-slider uk-margin-small-top" tabIndex="1" uk-slider>
               <div class="uk-slider-container">
                 <ul class="uk-slider-items uk-child-width-1-1">
@@ -77,10 +77,12 @@ import {ClickEvent} from "../../../utils/click/click-outside-or-esc.directive";
                   </li>
                   <!--                remove check for datasources when with the new charts -->
                   <li *ngIf="metricsClicked && metrics.totalViews > 0 && viewsFrameUrl">
-                    <i-frame [height]="200" [url]=viewsFrameUrl [addClass]="false"></i-frame>
+                    <i-frame [height]="200" [url]=viewsFrameUrl [addClass]="false" 
+                             customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply"></i-frame>
                   </li>
                   <li *ngIf="metricsClicked && metrics.totalDownloads > 0 && downloadsFrameUrl">
-                    <i-frame [height]="200" [url]=downloadsFrameUrl [addClass]="false"></i-frame>
+                    <i-frame [height]="200" [url]=downloadsFrameUrl [addClass]="false" 
+                             customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply"></i-frame>
                   </li>
                 </ul>
               </div>
@@ -236,6 +238,11 @@ export class MetricsComponent {
     }
   }
 
+  public clickedMetrics() {
+    setTimeout( () => {
+      this.metricsClicked = true;
+    });
+  }
 
   public toggle(event) {
     this.metricsClicked = true;

landingPages/project/project.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input, ViewChild} from '@angular/core';
+import {ChangeDetectorRef, Component, Input, ViewChild} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Meta, Title} from '@angular/platform-browser';
 
@@ -27,6 +27,8 @@ import {SearchResult} from "../../utils/entities/searchResult";
 import {IndexInfoService} from "../../utils/indexInfo.service";
 import {Subscriber} from "rxjs";
 import {properties} from "../../../../environments/environment";
+import {Option} from "../../sharedComponents/input/input.component";
+import {OpenaireEntities} from "../../utils/properties/searchFields";
 
 @Component({
   selector: 'project',
@@ -78,8 +80,9 @@ export class ProjectComponent {
 
   @ViewChild('statisticsModal') statisticsModal;
   @ViewChild('linkProjectModal') linkProjectModal;
-  @ViewChild('shareResultsModal') shareResultsModal;
+  @ViewChild('embedResultsModal') embedResultsModal;
   @ViewChild('downloadReportModal') downloadReportModal;
+  @ViewChild('addThisModal') addThisModal
 
   // Request results for publications, research data and software only the one time (first time tab is clicked)
   private reloadPublications: boolean = true;
@@ -89,7 +92,7 @@ export class ProjectComponent {
   private reloadDmps: boolean = true;
 
   // Variables for entity selections on the right column
-  public share_research_results_type: string = "results";
+  public embed_research_results_type: string = "result";
   public download_research_results_type: string = "";
 
   // Variables for publications, research data, software tabs
@@ -119,12 +122,38 @@ export class ProjectComponent {
   public thresholdDescription: number = 670;
   public showNumDescription: number = 670;
 
-  // Organizations variables for view more/less functionality
+  // // Organizations variables for view more/less functionality
+  // public thresholdOrganizations: number = 20;
+  // public showNumOrganizations: number = 20;
+  /*Show all organizations*/
+  public viewAllOrganizations: boolean = false;
+  public lessBtnOrganizations: boolean = false;
   public thresholdOrganizations: number = 20;
-  public showNumOrganizations: number = 20;
+  @ViewChild('organizationsModal') organizationsModal;
+
+
+  public resultTypesForEmbedding: Option[]=[
+    {label: "All "+OpenaireEntities.RESULTS, value: "result"},
+    {label: OpenaireEntities.PUBLICATIONS, value: "publication"},
+    {label: OpenaireEntities.DATASETS, value: "dataset"},
+    {label: OpenaireEntities.SOFTWARE, value: "software"},
+    {label: OpenaireEntities.OTHER, value: "other"}];
+
+  public resultTypesForDownloading: Option[]=[
+    {label: "All "+OpenaireEntities.RESULTS, value: "results", disabled: true},
+    {label: OpenaireEntities.PUBLICATIONS, value: "publications", disabled: true},
+    {label: OpenaireEntities.DATASETS, value: "datasets", disabled: true},
+    {label: OpenaireEntities.SOFTWARE, value: "software", disabled: true},
+    {label: OpenaireEntities.OTHER, value: "other", disabled: true}];
+
+  public offset: number;
+  @ViewChild("graph_and_feedback") graph_and_feedback;
+  public stickyHeader: boolean = false;
 
   subscriptions = [];
   properties: EnvProperties;
+  public openaireEntities = OpenaireEntities;
+
   constructor(private  route: ActivatedRoute,
               private _router: Router,
               private _location: Location,
@@ -137,7 +166,8 @@ export class ProjectComponent {
               private _searchResearchResultsService: SearchResearchResultsService,
               private _reportsService: ReportsService,
               private htmlService: HtmlProjectReportService,
-              private indexInfoService: IndexInfoService) {}
+              private indexInfoService: IndexInfoService,
+              private cdr: ChangeDetectorRef) {}
 
   ngOnInit() {
 
@@ -191,21 +221,29 @@ export class ProjectComponent {
 
       this.createClipboard();
     }));
+    this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height'));
+  }
+
+  calcGraphOffset() {
+    if(this.graph_and_feedback && window) {
+      return window.innerHeight-this.graph_and_feedback.nativeElement.offsetHeight+"px";
+    }
+    return 0;
   }
 
   public getFileNameType(type: string) {
     if(type == "results") {
-      return "research-outcomes";
+      return OpenaireEntities.RESULTS.replace(" ", "-");
     } else if(type == "publications") {
-      return "publications";
+      return  OpenaireEntities.PUBLICATIONS.replace(" ", "-");
     } else if(type == "datasets") {
-      return "research-data";
+      return  OpenaireEntities.DATASETS.replace(" ", "-");
     } else if(type == "software") {
-      return "software";
+      return  OpenaireEntities.SOFTWARE.replace(" ", "-");
     } else if(type == "other") {
-      return "other-research-products";
+      return  OpenaireEntities.OTHER.replace(" ", "-");
     }
-    return "results";
+    return  OpenaireEntities.RESULTS.replace(" ", "-");
   }
 
   public getCsvParams(type: string) {
@@ -402,7 +440,8 @@ export class ProjectComponent {
     }
     this.seoService.createLinkForCanonicalURL(this.properties.domain + this.properties.baseLink + this._router.url);
     this.updateTitle(this.projectName);
-    this.updateDescription(this.projectInfo.description?this.projectInfo.description: ("project" + (this.projectInfo.title?"," + this.projectInfo.title:"") + (this.projectInfo.funding && this.projectInfo.funding.funderName?", funder: " + this.projectInfo.funding.funderName:"") + (this.projectInfo.acronym?"," + this.projectInfo.acronym:"")));
+    // this.updateDescription(this.projectInfo.description?this.projectInfo.description: ("project" + (this.projectInfo.title?"," + this.projectInfo.title:"") + (this.projectInfo.funding && this.projectInfo.funding.funderName?", funder: " + this.projectInfo.funding.funderName:"") + (this.projectInfo.acronym?"," + this.projectInfo.acronym:"")));
+    this.updateDescription((this.projectInfo.description && this.projectInfo.description[0] ? (this.projectInfo.description[0].substr(0,157)  + (this.projectInfo.description[0].substr(0,157).length == 157?"...":"")) : (this.projectInfo.title)));
     if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
       this.subscriptions.push(this._piwikService.trackView(this.properties, this.projectName, this.piwikSiteId).subscribe());
     }
@@ -427,17 +466,17 @@ export class ProjectComponent {
     //stats tab charts
     if (this.properties.useNewStatistisTool) {
       this.chartScientificResultsUrl = this.properties.statisticsFrameNewAPIURL +
-        'chart?json='+StringUtils.URIEncode('{"library":"HighCharts","chartDescription":{"queries":[{"name":"Research outcomes","type":"column","query":{"name":"projScient","parameters":["'+this.projectId+'"]}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Produced research outcomes per year"},"subtitle":{},"yAxis":{"title":{"text":"Research outcomes"}},"xAxis":{"title":{"text":"Year"}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":false},"plotOptions":{"series":{"dataLabels":{"enabled":false}}},"legend":{"enabled":true,"align":"center","verticalAlign":"bottom","layout":"horizontal"},"credits":{"href":null,"enabled":true,"text":"Created by OpenAIRE via HighCharts"}}}');
+        'chart?json='+StringUtils.URIEncode('{"library":"HighCharts","chartDescription":{"queries":[{"name":"'+OpenaireEntities.RESULTS+'","type":"column","query":{"name":"projScient","parameters":["'+this.projectId+'"]}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Produced '+OpenaireEntities.RESULTS+' per year"},"subtitle":{},"yAxis":{"title":{"text":"'+OpenaireEntities.RESULTS+'"}},"xAxis":{"title":{"text":"Year"}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":false},"plotOptions":{"series":{"dataLabels":{"enabled":false}}},"legend":{"enabled":true,"align":"center","verticalAlign":"bottom","layout":"horizontal"},"credits":{"href":null,"enabled":true,"text":"Created by OpenAIRE via HighCharts"}}}');
       this.chartAccessModeUrl =  this.properties.statisticsFrameNewAPIURL +
         'chart?json='+StringUtils.URIEncode(
-        '{"library":"HighCharts","chartDescription":{"queries":[{"name":"Research outcomes","type":"pie","query":{"name":"projOA","parameters":["'+this.projectId+'"]}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Access mode of research outcomes"},"subtitle":{},"yAxis":{"title":{"text":"Research outcomes"}},"xAxis":{"title":{"text":"Access mode"}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":false},"plotOptions":{"series":{"dataLabels":{"enabled":false}}},"legend":{"enabled":true,"align":"center","verticalAlign":"bottom","layout":"horizontal"},"credits":{"href":null,"enabled":true,"text":"Created by OpenAIRE via HighCharts"}}}');
+        '{"library":"HighCharts","chartDescription":{"queries":[{"name":"'+OpenaireEntities.RESULTS+'","type":"pie","query":{"name":"projOA","parameters":["'+this.projectId+'"]}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Access mode of '+OpenaireEntities.RESULTS+'"},"subtitle":{},"yAxis":{"title":{"text":"'+OpenaireEntities.RESULTS+'"}},"xAxis":{"title":{"text":"Access mode"}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":false},"plotOptions":{"series":{"dataLabels":{"enabled":false}}},"legend":{"enabled":true,"align":"center","verticalAlign":"bottom","layout":"horizontal"},"credits":{"href":null,"enabled":true,"text":"Created by OpenAIRE via HighCharts"}}}');
       this.chartDatasourcesUrl =  this.properties.statisticsFrameNewAPIURL +
         'chart?json='+StringUtils.URIEncode(
-        '{"library":"HighCharts","chartDescription":{"queries":[{"name":"Research outcomes","type":"bar","query":{"name":"projPubsRepos","parameters":["'+this.projectId+'"]}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Research outcomes per datasource"},"subtitle":{},"yAxis":{"title":{"text":"Research outcomes"}},"xAxis":{"title":{"text":"Datasource"}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":false},"plotOptions":{"series":{"dataLabels":{"enabled":true}}},"legend":{"enabled":true,"align":"center","verticalAlign":"bottom","layout":"horizontal"},"credits":{"href":null,"enabled":true,"text":"Created by OpenAIRE via HighCharts"}}}');
+        '{"library":"HighCharts","chartDescription":{"queries":[{"name":"'+OpenaireEntities.RESULTS+'","type":"bar","query":{"name":"projPubsRepos","parameters":["'+this.projectId+'"]}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"'+OpenaireEntities.RESULTS+' per datasource"},"subtitle":{},"yAxis":{"title":{"text":"'+OpenaireEntities.RESULTS+'"}},"xAxis":{"title":{"text":"Datasource"}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":false},"plotOptions":{"series":{"dataLabels":{"enabled":true}}},"legend":{"enabled":true,"align":"center","verticalAlign":"bottom","layout":"horizontal"},"credits":{"href":null,"enabled":true,"text":"Created by OpenAIRE via HighCharts"}}}');
     } else {
-      this.chartScientificResultsUrl = this.properties.statisticsFrameAPIURL + 'chart.php?com=query&persistent=false&data={"query":"projScient","projTitle":"' + this.projectId + '", "table": "result", "fields": [{"fld": "number", "agg": "count", "type": "spline", "yaxis":1, "c":false}], "xaxis":{"name": "result_classifications-type", "agg": "avg"}, "group": "", "color": "", "type": "chart", "size":30, "sort": "xaxis", "xStyle":{"r": "-", "s": "-", "l": "-", "ft": "-", "wt": "-"}, "yaxisheaders": [""], "fieldsheaders": ["Research Outcomes"], "in": [], "filters": [{"name": "result_datasources-datasource-name", "values": [" "], "to": "-1"}], "having": [], "incfilters": [], "inchaving": [], "title": "", "subtitle": "", "xaxistitle": ""}&w=90%&h=90%';
+      this.chartScientificResultsUrl = this.properties.statisticsFrameAPIURL + 'chart.php?com=query&persistent=false&data={"query":"projScient","projTitle":"' + this.projectId + '", "table": "result", "fields": [{"fld": "number", "agg": "count", "type": "spline", "yaxis":1, "c":false}], "xaxis":{"name": "result_classifications-type", "agg": "avg"}, "group": "", "color": "", "type": "chart", "size":30, "sort": "xaxis", "xStyle":{"r": "-", "s": "-", "l": "-", "ft": "-", "wt": "-"}, "yaxisheaders": [""], "fieldsheaders": ["'+OpenaireEntities.RESULTS+'"], "in": [], "filters": [{"name": "result_datasources-datasource-name", "values": [" "], "to": "-1"}], "having": [], "incfilters": [], "inchaving": [], "title": "", "subtitle": "", "xaxistitle": ""}&w=90%&h=90%';
-      this.chartAccessModeUrl = this.properties.statisticsFrameAPIURL + 'chart.php?com=query&persistent=false&data={"query":"projOA","projTitle":"' + this.projectId + '", "table": "result", "fields": [{"fld": "number", "agg": "count", "type": "pie", "yaxis":1, "c":false}], "xaxis":{"name": "result_classifications-type", "agg": "avg"}, "group": "", "color": "", "type": "chart", "size":30, "sort": "xaxis", "xStyle":{"r": "-", "s": "-", "l": "-", "ft": "-", "wt": "-"}, "yaxisheaders": [""], "fieldsheaders": ["Research Outcomes"], "in": [], "filters": [{"name": "result_datasources-datasource-name", "values": [" "], "to": "-1"}], "having": [], "incfilters": [], "inchaving": [], "title": "", "subtitle": "", "xaxistitle": ""}&w=90%&h=90%';
+      this.chartAccessModeUrl = this.properties.statisticsFrameAPIURL + 'chart.php?com=query&persistent=false&data={"query":"projOA","projTitle":"' + this.projectId + '", "table": "result", "fields": [{"fld": "number", "agg": "count", "type": "pie", "yaxis":1, "c":false}], "xaxis":{"name": "result_classifications-type", "agg": "avg"}, "group": "", "color": "", "type": "chart", "size":30, "sort": "xaxis", "xStyle":{"r": "-", "s": "-", "l": "-", "ft": "-", "wt": "-"}, "yaxisheaders": [""], "fieldsheaders": ["'+OpenaireEntities.RESULTS+'"], "in": [], "filters": [{"name": "result_datasources-datasource-name", "values": [" "], "to": "-1"}], "having": [], "incfilters": [], "inchaving": [], "title": "", "subtitle": "", "xaxistitle": ""}&w=90%&h=90%';
-      this.chartDatasourcesUrl = this.properties.statisticsFrameAPIURL + 'chart.php?com=query&persistent=false&data={"query":"projPubsRepos","projTitle":"' + this.projectId + '", "table": "result", "fields": [{"fld": "number", "agg": "count", "type": "bar", "yaxis":1, "c":false}], "xaxis":{"name": "result_classifications-type", "agg": "avg"}, "group": "", "color": "", "type": "chart", "size":30, "sort": "xaxis", "xStyle":{"r": "-", "s": "-", "l": "-", "ft": "-", "wt": "-"}, "yaxisheaders": [""], "fieldsheaders": ["Research Outcomes"], "in": [], "filters": [{"name": "result_datasources-datasource-name", "values": [" "], "to": "-1"}], "having": [], "incfilters": [], "inchaving": [], "title": "", "subtitle": "", "xaxistitle": ""}&w=90%&h=90%';
+      this.chartDatasourcesUrl = this.properties.statisticsFrameAPIURL + 'chart.php?com=query&persistent=false&data={"query":"projPubsRepos","projTitle":"' + this.projectId + '", "table": "result", "fields": [{"fld": "number", "agg": "count", "type": "bar", "yaxis":1, "c":false}], "xaxis":{"name": "result_classifications-type", "agg": "avg"}, "group": "", "color": "", "type": "chart", "size":30, "sort": "xaxis", "xStyle":{"r": "-", "s": "-", "l": "-", "ft": "-", "wt": "-"}, "yaxisheaders": [""], "fieldsheaders": ["'+OpenaireEntities.RESULTS+'"], "in": [], "filters": [{"name": "result_datasources-datasource-name", "values": [" "], "to": "-1"}], "having": [], "incfilters": [], "inchaving": [], "title": "", "subtitle": "", "xaxistitle": ""}&w=90%&h=90%';
     }
 
     this.showLoading = false;
@@ -479,27 +518,34 @@ export class ProjectComponent {
     return !(this.totalViews && this.totalDownloads && this.pageViews) || this.totalViews > 0 || this.totalDownloads > 0||this.pageViews > 0;
   }
 
-  public openStatistics() {
+  public viewAllOrganizationsClick() {
-    this.statsClicked = true;
+    this.viewAllOrganizations = true;
-    this.statisticsModal.cancelButton = false;
+    if(this.projectInfo.organizations.length <= this.thresholdOrganizations*2) {
-    this.statisticsModal.okButton = false;
+      this.lessBtnOrganizations = true;
-    this.statisticsModal.alertTitle = "Statistics of";
+    } else {
-    this.statisticsModal.open();
+      this.openOrganizationsModal();
+    }
   }
 
-  public openLinkProjectModal() {
+  public openOrganizationsModal() {
-    this.linkProjectModal.cancelButton = false;
+    this.organizationsModal.cancelButton = false;
-    this.linkProjectModal.okButton = false;
+    this.organizationsModal.okButton = false;
-    this.linkProjectModal.alertTitle = "Link this project to";
+    this.organizationsModal.alertTitle = "Organizations";
-    //this.linkProjectModal.alertHeader = false;
+    this.organizationsModal.open();
-    this.linkProjectModal.open();
   }
 
-  public openShareResultsModal() {
+  public openAddThisModal() {
-    this.shareResultsModal.cancelButton = false;
+    this.addThisModal.cancelButton = false;
-    this.shareResultsModal.okButton = false;
+    this.addThisModal.okButton = false;
-    this.shareResultsModal.alertTitle = "Share results";
+    this.addThisModal.alertTitle = "Share this project in your social networks";
-    this.shareResultsModal.open();
+    this.addThisModal.open();
+  }
+
+  public openEmbedResultsModal() {
+    this.embedResultsModal.cancelButton = false;
+    this.embedResultsModal.okButton = false;
+    this.embedResultsModal.alertTitle = "Embed results";
+    this.embedResultsModal.open();
   }
 
   public openDownloadReportModal() {
@@ -527,20 +573,20 @@ export class ProjectComponent {
     }
 
     if (type == "publications") {
-      this.header2 = this.fetchPublications.searchUtils.totalResults.toLocaleString('en-US') + " publications";
+      this.header2 = this.fetchPublications.searchUtils.totalResults.toLocaleString('en-US') + " "+OpenaireEntities.PUBLICATIONS;
     } else if (type == "datasets") {
-      this.header2 = this.fetchDatasets.searchUtils.totalResults.toLocaleString('en-US') + " research data";
+      this.header2 = this.fetchDatasets.searchUtils.totalResults.toLocaleString('en-US') + " "+OpenaireEntities.DATASETS;
     } else if (type == "software") {
-      this.header2 = this.fetchSoftware.searchUtils.totalResults.toLocaleString('en-US') + " software";
+      this.header2 = this.fetchSoftware.searchUtils.totalResults.toLocaleString('en-US') + " "+OpenaireEntities.SOFTWARE;
     } else if (type == "other") {
-      this.header2 = this.fetchOrps.searchUtils.totalResults.toLocaleString('en-US') + " other research products";
+      this.header2 = this.fetchOrps.searchUtils.totalResults.toLocaleString('en-US') + " "+OpenaireEntities.OTHER;
     } else if (type == "results") {
       let totalResults: number = (+this.fetchPublications.searchUtils.totalResults) +
         (+this.fetchDatasets.searchUtils.totalResults) +
         (+this.fetchSoftware.searchUtils.totalResults) +
         (+this.fetchOrps.searchUtils.totalResults);
 
-      this.header2 = totalResults.toLocaleString('en-US') + " research outcomes";
+      this.header2 = totalResults.toLocaleString('en-US') + " "+OpenaireEntities.RESULTS;
     }
   }
 
@@ -687,7 +733,10 @@ export class ProjectComponent {
         this.searchOrps(1, this.searchNumber);
       } else if (activeTabId == 'statistics') {
         this.activeTab = 'statistics';
+        setTimeout( () => {
           this.statsClicked = true;
+          // this.cdr.detectChanges();
+        });
       } else if (activeTabId == 'dmps') {
         this.activeTab = 'dmps';
         this.searchDmps(1, this.searchNumber);
@@ -696,8 +745,10 @@ export class ProjectComponent {
   }
 
   private updateDescription(description: string) {
-    this._meta.updateTag({content: description.substring(0, 160)}, "name='description'");
+    // this._meta.updateTag({content: description.substring(0, 160)}, "name='description'");
-    this._meta.updateTag({content: description.substring(0, 160)}, "property='og:description'");
+    // this._meta.updateTag({content: description.substring(0, 160)}, "property='og:description'");
+    this._meta.updateTag({content: description}, "name='description'");
+    this._meta.updateTag({content: description}, "property='og:description'");
   }
 
   private updateTitle(title: string) {
@@ -794,9 +845,7 @@ export class ProjectComponent {
   }
 
   public get hasPrimaryInfo(): boolean {
-    return !!this.projectInfo && (
+    return !!this.projectInfo && (!!this.projectInfo.description && this.projectInfo.description.length > 0);
-      !!this.projectInfo.description
-    );
   }
 
   public get hasSecondaryInfo(): boolean {
@@ -858,4 +907,29 @@ export class ProjectComponent {
   //   this.tabsAreInitialized = true;
   //   return this._numberOfTabs;
   // }
+
+  public buildResultTypesForDownloading() {
+    this.resultTypesForDownloading = [
+      {label: "All "+OpenaireEntities.RESULTS, value: "results", disabled:
+          (!this.projectInfo.funding ||
+            (this.fetchPublications.searchUtils.totalResults == 0 &&
+            this.fetchDatasets.searchUtils.totalResults == 0 &&
+            this.fetchSoftware.searchUtils.totalResults == 0 &&
+            this.fetchOrps.searchUtils.totalResults == 0))},
+      {label: OpenaireEntities.PUBLICATIONS, value: "publications", disabled:
+          (!this.projectInfo.funding || this.fetchPublications.searchUtils.totalResults == 0
+            || this.fetchPublications.searchUtils.status != this.errorCodes.DONE)},
+      {label: OpenaireEntities.DATASETS, value: "datasets", disabled:
+          (!this.projectInfo.funding || this.fetchDatasets.searchUtils.totalResults == 0
+            || this.fetchDatasets.searchUtils.status != this.errorCodes.DONE)},
+      {label: OpenaireEntities.SOFTWARE, value: "software", disabled:
+          (!this.projectInfo.funding || this.fetchSoftware.searchUtils.totalResults == 0
+            || this.fetchSoftware.searchUtils.status != this.errorCodes.DONE)},
+      {label: OpenaireEntities.OTHER, value: "other", disabled:
+          (!this.projectInfo.funding || this.fetchOrps.searchUtils.totalResults == 0
+            || this.fetchOrps.searchUtils.status != this.errorCodes.DONE)}
+    ];
+    console.log(this.resultTypesForDownloading);
+
+  }
 }

landingPages/project/project.module.ts

@@ -27,6 +27,9 @@ import {FeedbackModule} from "../feedback/feedback.module";
 import {AltMetricsModule} from "../../utils/altmetrics.module";
 import {TabsModule} from "../../utils/tabs/tabs.module";
 import {SearchTabModule} from "../../utils/tabs/contents/search-tab.module";
+import {LoadingModule} from "../../utils/loading/loading.module";
+import {IconsModule} from "../../utils/icons/icons.module";
+import {InputModule} from "../../sharedComponents/input/input.module";
 
 @NgModule({
   imports: [
@@ -36,7 +39,7 @@ import {SearchTabModule} from "../../utils/tabs/contents/search-tab.module";
     SearchResearchResultsServiceModule, ProjectServiceModule,
     Schema2jsonldModule, SEOServiceModule, HelperModule,
     LandingHeaderModule, MatSelectModule, FeedbackModule, AltMetricsModule,
-    TabsModule, SearchTabModule
+    TabsModule, SearchTabModule, LoadingModule, IconsModule, InputModule
   ],
   declarations: [
     ProjectComponent

landingPages/project/project.service.ts

@@ -162,11 +162,12 @@ export class ProjectService {
           this.projectInfo.funding.contribution = data[0].fundedamount;//"200100";
           this.projectInfo.funding.currency = data[0].currency;//"EUR";
         }
-        if(!Array.isArray(data[0]['summary'])) {
+        // if(!Array.isArray(data[0]['summary'])) {
-          this.projectInfo.description = (data[0]['summary']) ? String(data[0]['summary']) : "";
+        //   this.projectInfo.description = (data[0]['summary']) ? String(data[0]['summary']) : "";
-        } else {
+        // } else {
-          this.projectInfo.description = (data[0]['summary'][0]) ? String(data[0]['summary'][0]) : "";
+        //   this.projectInfo.description = (data[0]['summary'][0]) ? String(data[0]['summary'][0]) : "";
-        }
+        // }
+        this.projectInfo.description = this.parsingFunctions.parseDescription(data[0] && data[0].summary?data[0].summary:[]);
       }
 
       // ['result']['metadata']['oaf:entity']['oaf:project']['rels']['rel']

landingPages/project/projectService.module.ts

@@ -3,6 +3,8 @@ import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 
 import {ProjectService} from './project.service';
+import {IconsService} from "../../utils/icons/icons.service";
+import {graph, link} from "../../utils/icons/icons";
 
 
 @NgModule({
@@ -16,4 +18,7 @@ import {ProjectService} from './project.service';
   exports: []
 })
 export class ProjectServiceModule {
+  constructor(private iconsService: IconsService) {
+    this.iconsService.registerIcons([link, graph])
+  }
 }

landingPages/result/resultLanding.component.html

@@ -42,7 +42,7 @@
                 </li>
                 <!-- Link to -->
                 <li *ngIf="isRouteAvailable('participate/direct-claim')" class="uk-text-center"
-                    [title]="'Link this '+getTypeName()+' to...'"
+                    [title]="'<span class=\'uk-flex uk-flex-middle\'>Link this '+getTypeName()+' to ...<span class=\'material-icons uk-margin-small-left\'>east</span></span>'"
                     [attr.uk-tooltip]="'pos: right; cls: uk-active landing-action-tooltip landing-action-tooltip-portal uk-text-small uk-padding-small'">
                   <a [queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[id,type,'project'])"
                      routerLinkActive="router-link-active" routerLink="/participate/direct-claim">
@@ -136,11 +136,11 @@
             </landing-header>
             <!-- Labels -->
             <div class="uk-margin-bottom">
-                  <span *ngIf="resultLandingInfo.accessMode
+                  <ng-container *ngIf="resultLandingInfo.accessMode && resultLandingInfo.accessMode.toLowerCase() !== 'not available'">
-                      && resultLandingInfo.accessMode.toLowerCase() !== 'not available'"
+                    <span [class]="'uk-label uk-text-truncate '+ (accessClass(resultLandingInfo.accessMode) == 'open' ? 'uk-label-success' : '')"
-                        [class]="'uk-label uk-text-truncate '+ (accessClass(resultLandingInfo.accessMode) == 'open' ? 'uk-label-success' : '')"
                           title="Access Mode">{{resultLandingInfo.accessMode}}
                     </span>&#160;
+                  </ng-container>
               <span *ngIf="resultLandingInfo.languages &&
                               removeUnknown(resultLandingInfo.languages).length > 0">
                     <ng-container *ngFor="let language of removeUnknown(resultLandingInfo.languages)">
@@ -203,7 +203,7 @@
 
           <div id="landing-sections" class="uk-text-small">
             <ng-container>
-              <div id="summary" class="landing-section uk-padding uk-padding-remove-horizontal">
+              <div id="summary" class="landing-section landing-section-height-auto uk-padding uk-padding-remove-horizontal">
                 <div *ngIf="!hasPrimaryInfo" class="uk-height-small uk-flex uk-flex-center uk-flex-middle">
                   <div class="uk-animation-fade uk-text-meta uk-text-large">
                     No summary information available
@@ -216,8 +216,8 @@
                     <div class="uk-text-justify ">
                       <div class="uk-text-meta">Abstract</div>
                       <div class=" uk-height-max-medium uk-overflow-auto">
-                        <div *ngFor="let description of resultLandingInfo.description" class="uk-margin-small-bottom ">
+                        <div *ngFor="let description of resultLandingInfo.description" class="uk-margin-small-bottom "
-                          {{description}}</div>
+                          [innerHtml]="description"></div>
                       </div>
 
                     </div>
@@ -503,7 +503,7 @@
       </mat-select>
     </mat-form-field>
     <results-and-pages
-      [type]="'research outcomes'"
+      [type]="openaireEntities.RESULTS"
       [page]="relatedPage" [pageSize]="pageSize"
       [totalResults]="researchResults.length">
     </results-and-pages>

landingPages/result/resultLanding.component.ts

@@ -124,12 +124,11 @@ export class ResultLandingComponent {
 
   public offset: number;
   @ViewChild("graph_and_feedback") graph_and_feedback;
+  public stickyHeader: boolean = false;
 
   public viewAll: string = "";
   public noCommunities: boolean = false;
 
-  public stickyHeader: boolean = false;
-
   public rightSidebarOffcanvasClicked: boolean = false;
 
   constructor(private _resultLandingService: ResultLandingService,

orcid/orcid-work.component.ts

@@ -26,12 +26,12 @@ declare var UIkit: any;
 
       <a (click)="currentAction='add'; saveWorkPreparation();"
            [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>
+          <icon *ngIf="!showLoading" name="add" ratio="1" flex="true"></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&#160;
             <span class="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">{{" "}}
+              <img  class="" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="orcid"  style="width:16px; height:16px" loading="lazy">&#160;
             </span>
           </span>
         </a>
@@ -42,12 +42,12 @@ declare var UIkit: any;
             class="uk-align-right uk-margin-remove-bottom">
         <a (click)="currentAction='delete'; deleteWorks();"
             [class]="'uk-flex uk-flex-middle uk-flex-right uk-margin-right '+ (showLoading ? 'uk-disabled' : '')">
-          <icon *ngIf="!showLoading" name="delete" ratio="0.8"></icon>
+          <icon *ngIf="!showLoading" name="delete" ratio="0.8" flex="true"></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&#160;
             <span class="space uk-flex uk-flex-middle">
               <span>ORCID&#160;</span>
-              <img class="space" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="" loading="lazy">{{" "}}
+              <img class="space" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="" loading="lazy">&#160;
             </span>
           </span>
         </a>
@@ -123,7 +123,7 @@ declare var UIkit: any;
                     : 'View this work from your ORCID record'">
         <a (click)="currentAction='get'; getOrcidWorks()"
            [class]="'uk-button action uk-flex uk-flex-middle '+ ((showLoading || !putCodes || putCodes.length == 0) ? 'uk-disabled' : '')">
-          <icon *ngIf="!showLoading || currentAction!='get'" name="visibility" ratio="1"></icon>
+          <icon *ngIf="!showLoading || currentAction!='get'" name="visibility" ratio="1" flex="true"></icon>
           
           <span *ngIf="showLoading && currentAction=='get'" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
           <span class="uk-margin-small-left">View ORCID work</span>
@@ -136,7 +136,7 @@ declare var UIkit: any;
                     + showUpdateDatesInTooltip())">
         <a (click)="currentAction='update'; updateWorkPreparation()"
            [class]="'uk-button action uk-margin-top uk-flex uk-flex-middle '+ ((showLoading || !putCodes || putCodes.length == 0) ? 'uk-disabled' : '')">
-          <icon *ngIf="!showLoading || currentAction!='update'" name="refresh" ratio="1"></icon>
+          <icon *ngIf="!showLoading || currentAction!='update'" name="refresh" ratio="1" flex="true"></icon>
           <span *ngIf="showLoading && currentAction=='update'" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
           <span class="uk-margin-small-left">Update ORCID work</span>
         </a>
@@ -146,7 +146,7 @@ declare var UIkit: any;
             [attr.uk-tooltip]="tooltipAdd">
         <a (click)="currentAction='add'; saveWorkPreparation();"
            [class]="'uk-button action uk-margin-top uk-flex uk-flex-middle '+ (showLoading ? 'uk-disabled' : '')">
-          <icon *ngIf="!showLoading || currentAction!='add'" name="add" ratio="1"></icon>
+          <icon *ngIf="!showLoading || currentAction!='add'" name="add" ratio="1" flex="true"></icon>
           <span *ngIf="showLoading && currentAction=='add'" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
           <span class="uk-margin-small-left">Add to ORCID</span>
         </a>
@@ -156,7 +156,7 @@ declare var UIkit: any;
             [attr.uk-tooltip]="tooltipDelete">
         <a (click)="currentAction='delete'; deleteWorks();"
            [class]="'uk-button action uk-margin-top uk-flex uk-flex-middle '+ (showLoading ? 'uk-disabled' : '')">
-          <icon *ngIf="!showLoading || currentAction!='delete'" name="delete" ratio="1"></icon>
+          <icon *ngIf="!showLoading || currentAction!='delete'" name="delete" ratio="1" flex="true"></icon>
           <span *ngIf="showLoading && currentAction=='delete'" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
           <span class="uk-margin-small-left">Delete from ORCID</span>
         </a>

sharedComponents/input/input.component.ts

@@ -25,7 +25,8 @@ export interface Option {
   icon?: string,
   iconClass?: string,
   value: any,
-  label: string
+  label: string,
+  disabled?: boolean
 }
 
 export interface Placeholder {
@@ -130,7 +131,8 @@ declare var UIkit;
           <li *ngFor="let option of filteredOptions; let i=index"
               [class.uk-active]="(formControl.value === option.value) || selectedIndex === i"
               [attr.uk-tooltip]="(tooltip)?('title: ' + option.label + ';'):null">
-            <a (click)="selectOption(option, $event)">{{option.label}}</a>
+            <a (click)="selectOption(option, $event)"
+               [class]="option.disabled ? 'uk-disabled uk-text-muted' : ''">{{option.label}}</a>
           </li>
         </ul>
       </div>

utils/entities/projectInfo.ts

@@ -15,7 +15,7 @@ export class ProjectInfo {
     organizations: { "acronym": string, "name": string, "id": string }[];//Map<string, string>;
     url: string;
     urlInfo: string;
-    description: string;
+    description: string[] = [];
     //publications: any;
     researchData: any;
 

utils/iframe.component.ts

@@ -4,11 +4,11 @@ import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
 @Component({
   selector: 'i-frame',
   template: `
-    <div  *ngIf="!style" class=" uk-height-large" [class.iframeContainer]="addClass">
+    <div  *ngIf="!style" class=" uk-height-large" [class.iframeContainer]="addClass" [ngClass]="customContainerClass">
-      <iframe allowtransparency="true"   [src]="safeUrl"></iframe>
+      <iframe allowtransparency="true"   [src]="safeUrl" [ngClass]="customIframeClass"></iframe>
     </div>
-    <div *ngIf="style"   [class.iframeContainer]="addClass" [ngStyle]="style">
+    <div *ngIf="style"   [class.iframeContainer]="addClass" [ngStyle]="style" [ngClass]="customContainerClass">
-      <iframe [src]="safeUrl"></iframe>
+      <iframe [src]="safeUrl" [ngClass]="customIframeClass"></iframe>
     </div>
   `
 })
@@ -19,6 +19,8 @@ export class IFrameComponent {
   @Input() height: number;
   @Input() unit: string = 'px';
   @Input() addClass: boolean= true;
+  @Input() customContainerClass: string = "";
+  @Input() customIframeClass: string = "";
   public style: any;
 
   constructor(private sanitizer: DomSanitizer) {

utils/tabs/contents/search-tab.component.ts

@@ -1,46 +1,50 @@
 import {Component, Input} from '@angular/core';
 import {EnvProperties} from "../../properties/env-properties";
 import {ErrorCodes} from "../../properties/errorCodes";
+import {OpenaireEntities} from "../../properties/searchFields";
 
 @Component({
     selector: 'search-tab',
     template: `
-      <errorMessages *ngIf="resultType" [status]="[fetch.searchUtils.status]" [type]="getEntityName(resultType, true, true)"
-                     tab_error_class=true></errorMessages>
       <a *ngIf="fetch.searchUtils.status == errorCodes.LOADING" class="uk-invisible" 
          [queryParams]="params" [routerLink]="searchLinkToAdvancedPage"></a>
       
-      <div *ngIf="fetch.searchUtils.status == errorCodes.DONE">
+      <ng-container *ngIf="fetch.searchUtils.status != errorCodes.LOADING">
-        <div class="tab-header">
+        <errorMessages *ngIf="resultType" [status]="[fetch.searchUtils.status]" [type]="getEntityName(resultType)"
+                       tab_error_class=true></errorMessages>
+        
+        <div class="uk-flex uk-flex-between uk-flex-middle uk-margin-bottom">
+          <div class="uk-text-meta uk-text-large uk-text-uppercase">
             <span *ngIf="!customTitle && resultType"><span *ngIf="resultType != 'organization' && resultType != 'dataprovider' && resultType != 'project'">Recent</span>
-          {{getEntityName(resultType, true, true)}}
+              {{getEntityName(resultType)}}
             </span>
             <span *ngIf="customTitle">{{customTitle}}</span>
           </div>
-        <div *ngIf="searchLinkToAdvancedPage" class="uk-text-right">
+          <div *ngIf="searchLinkToAdvancedPage">
-<!--            {{getEntityName(resultType, true, true)}}-->
             <a class="el-content uk-button uk-button-text" [queryParams]="params" [routerLink]="searchLinkToAdvancedPage">
               View all
               <span *ngIf="fetch.searchUtils.totalResults <= searchNumber">in search page</span>
             </a>
           </div>
+        </div>
 
         <ng-content></ng-content>
+      </ng-container>
 
+      <ng-container *ngIf="fetch.searchUtils.status == errorCodes.DONE">
         <search-result [properties]="properties"
                        [results]="fetch.results"
                        [status]="fetch.searchUtils.status"
                        [type]="resultType"  [showImpactFactors]="showImpactFactors" [showEnermaps]="showEnermaps">
         </search-result>
 
-        <div *ngIf="searchLinkToAdvancedPage" class="uk-text-right">
+<!--        <div *ngIf="searchLinkToAdvancedPage && fetch.results?.length > 0" class="uk-text-right">-->
-<!--            {{getEntityName(resultType, true, true)}}-->
+<!--          <a class="el-content uk-button uk-button-text" [queryParams]="params" [routerLink]="searchLinkToAdvancedPage">-->
-          <a class="el-content uk-button uk-button-text" [queryParams]="params" [routerLink]="searchLinkToAdvancedPage">
+<!--            View all-->
-            View all
+<!--            <span *ngIf="fetch.searchUtils.totalResults <= searchNumber">in search page</span>-->
-            <span *ngIf="fetch.searchUtils.totalResults <= searchNumber">in search page</span>
+<!--          </a>-->
-          </a>
+<!--        </div>-->
-        </div>
+      </ng-container>
-      </div>
     `
 })
 
@@ -57,21 +61,21 @@ export class SearchTabComponent {
 
     public errorCodes: ErrorCodes = new ErrorCodes();
 
-    public getEntityName(entityType: string, plural: boolean, full: boolean): string {
+    public getEntityName(entityType: string): string {
       if (entityType == "publication") {
-        return "publication" + (plural ? "s" : "");
+        return OpenaireEntities.PUBLICATIONS;
       } else if (entityType == "dataset") {
-        return (full ? "research data" : ("dataset" + (plural ? "s" : "")));
+        return OpenaireEntities.DATASETS;
       } else if (entityType == "software") {
-        return "software";
+        return OpenaireEntities.SOFTWARE;
       } else if (entityType == "other") {
-        return (full ? ("other research product" + (plural ? "s" : "")) : "other");
+        return OpenaireEntities.OTHER;
       } else if (entityType == "result") {
-        return ((full ? "research outcome" : "result") + (plural ? "s" : ""));
+        return OpenaireEntities.RESULTS;
       } else if (entityType == "project") {
-        return "project" + (plural ? "s" : "");
+        return OpenaireEntities.PROJECTS;
       } else if (entityType == "dataprovider") {
-        return ((full ? "content provider" : "dataprovider") + (plural ? "s" : ""));
+        return OpenaireEntities.DATASOURCES;
       }
     }
 }

utils/tabs/tabs.component.ts

@@ -51,7 +51,7 @@ import {TabComponent} from './tab.component';
       <ng-container *ngFor="let tab of tabs.toArray(); let i=index">
         <ng-container *ngIf="tab.customClass">
           <div class="uk-width-small uk-padding-small uk-padding-remove-bottom">
-            <ul class="uk-tab">
+            <ul class="uk-tab uk-height-1-1">
               <li  [ngClass]="tab.customClass" (click)="selectTab(tab)" [class.uk-active]="tab.active" >
                 <a class="uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center featuredTab" [ngClass]="tab.tabIcon ? 'uk-flex-column' : ''">
                   <!--<icon *ngIf="tab.tabIcon" [svg]="tab.tabIcon.svg" [ratio]="tab.tabIcon.ratio?tab.tabIcon.ratio:1" class="uk-margin-small-bottom"
@@ -77,7 +77,7 @@ import {TabComponent} from './tab.component';
             content: "";
             position: absolute;
             bottom: 0;
-            left: 20px;
+            left: 0;
             right: 0;
             border-bottom: 2px solid #eaeaea;
         }