[master | WIP]: Rename irish-theme to extend-theme. Add uk-banner in dashboards. Adjust upload dois page

src/app/app-routing.module.ts

@@ -2,13 +2,8 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import {Irish} from "./shared/irish";
 import {ErrorPageComponent} from "./openaireLibrary/error/errorPage.component";
-import {ClaimsModule} from "./claims/claims.module";
 
 const routes: Routes = [
-  {
-    path: '',
-    loadChildren: () => import('./national/national.module').then(m => m.NationalModule)
-  },
   {
     path: 'rpo',
     loadChildren: () => import('./rpo/rpo.module').then(m => m.RpoModule),
@@ -32,6 +27,10 @@ const routes: Routes = [
     loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
     data: {title: Irish.METADATA_PREFIX + ' Admin | '},
   },
+  {
+    path: '',
+    loadChildren: () => import('./national/national.module').then(m => m.NationalModule)
+  },
   {path: 'participate', loadChildren: () => import('./claims/claims.module').then(m => m.ClaimsModule)},
   {path: 'orcid', loadChildren: () => import('./orcid/orcid.module').then(m => m.LibOrcidModule)},
   {path: 'my-orcid-links', loadChildren: () => import('./orcid/my-orcid-links/myOrcidLinks.module').then(m => m.LibMyOrcidLinksModule)},

src/app/national/national.component.ts

@@ -1,7 +1,6 @@
 import {Component, OnInit} from "@angular/core";
 import {Stakeholder} from "../openaireLibrary/monitor/entities/stakeholder";
 import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
-import {BaseComponent} from "../openaireLibrary/sharedComponents/base/base.component";
 import {ActivatedRoute, Router} from "@angular/router";
 import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
 import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
@@ -9,23 +8,45 @@ import {Meta, Title} from "@angular/platform-browser";
 import {SearchCustomFilter} from "../openaireLibrary/searchPages/searchUtils/searchUtils.class";
 import {LinksResolver} from "../search/links-resolver";
 import {CustomFilterService} from "../shared/customFilter.service";
+import {StakeholderBaseComponent} from "../openaireLibrary/monitor-admin/utils/stakeholder-base.component";
 
 @Component({
   selector: 'national',
   template: `
-    <ng-container *ngIf="!loading">
+      <loading *ngIf="loading" class="uk-position-center"></loading>
-        <div class="uk-section uk-section-primary">
+      <ng-container *ngIf="!loading && stakeholder">
-            <a class="uk-button uk-button-default" routerLink="/search/find/research-outcomes">Browse results</a>
+          <div class="uk-banner">
+              <div class="uk-container uk-container-large">
+                  <div class="uk-padding-small uk-padding-remove-vertical">
+                      <h1 class="uk-h2">{{entities.country}} {{entities.stakeholder}}</h1>
                   </div>
-        <div class="uk-section uk-container">
+              </div>
+              <div class="uk-banner-footer">
+                  <div class="uk-container uk-container-large">
+                      <ul class="uk-banner-tab uk-padding-small uk-padding-remove-vertical">
+                          <li [class.uk-active]="!isSearch">
+                              <a [routerLink]="'/'" (click)="isSearch = false">{{entities.stakeholder}}</a>
+                          </li>
+                          <li [class.uk-active]="isSearch" (click)="isSearch = true">
+                              <a [routerLink]="'/search/find/research-outcomes'">Browse Research Outputs</a>
+                          </li>
+                      </ul>
+                  </div>
+              </div>
+          </div>
+          <div class="uk-margin-large-top">
               <router-outlet></router-outlet>
           </div>
       </ng-container>
+      <h3 *ngIf="!loading && !stakeholder" class="uk-position-center">
+          No {{entities.country}} {{entities.stakeholder}} yet.
+      </h3>
   `
 })
-export class NationalComponent extends BaseComponent implements OnInit {
+export class NationalComponent extends StakeholderBaseComponent implements OnInit {
   stakeholder: Stakeholder;
   loading: boolean = true;
+  isSearch: boolean = false;
 
   constructor(private stakeholderService: StakeholderService,
               protected _router: Router,
@@ -36,7 +57,9 @@ export class NationalComponent extends BaseComponent implements OnInit {
               protected _meta: Meta,
               private _customFilterService:CustomFilterService) {
     super();
-    super.initRouterParams(this._route);
+    super.initRouterParams(this._route, event => {
+      this.isSearch = event.url.includes('search');
+    });
   }
 
   ngOnInit() {
@@ -47,7 +70,7 @@ export class NationalComponent extends BaseComponent implements OnInit {
         LinksResolver.setProperties("");
         this.loading = false;
       } else {
-
+        this.loading = false;
       }
     });
   }

src/app/national/national.module.ts

@@ -2,17 +2,18 @@ import {NgModule} from "@angular/core";
 import {CommonModule} from "@angular/common";
 import {Route, RouterModule} from "@angular/router";
 import {NationalComponent} from "./national.component";
+import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
 const routes: Route[] = [
   {
     path: '', component: NationalComponent, children: [
+      {path: 'search', loadChildren: () => import('../search/search.module').then(m => m.SearchModule)},
       {path: '', loadChildren: () => import('../shared/monitor/monitor.module').then(m => m.MonitorModule)},
-      {path: 'search', loadChildren: () => import('../search/search.module').then(m => m.SearchModule)}
+    ], data: {stakeholder: 'irish'}
-    ], data: {stakeholder: 'tubitak'}
   }
 ];
 
 @NgModule({
-  imports: [CommonModule, RouterModule.forChild(routes)],
+  imports: [CommonModule, RouterModule.forChild(routes), LoadingModule],
   declarations: [NationalComponent],
   exports: [NationalComponent],
 })

src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit a8c91dc04cb65db6d09b21d6159319dc3294f2a8
+Subproject commit b8162fa1e37ee70628a6ec31d6b145586bd94083

src/app/orcid/my-orcid-links/myOrcidLinks.component.ts

@@ -3,7 +3,9 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'openaire-my-orcid-links',
   template: `
+      <div class="uk-section">
           <my-orcid-links></my-orcid-links>
+      </div>
   `
 })
 

src/app/orcid/recommend-orcid-links/searchRecommendedResultsForOrcid.component.ts

@@ -3,7 +3,9 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'openaire-search-recommended-results-for-orcid',
   template: `
+      <div class="uk-section">
         <search-recommended-results-for-orcid></search-recommended-results-for-orcid>
+      </div>
   `
 })
 

src/app/rfo/rfo.component.ts

@@ -1,7 +1,6 @@
-import {Component, OnDestroy, OnInit} from "@angular/core";
+import {Component, OnInit} from "@angular/core";
 import {Stakeholder} from "../openaireLibrary/monitor/entities/stakeholder";
 import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
-import {BaseComponent} from "../openaireLibrary/sharedComponents/base/base.component";
 import {ActivatedRoute, Router} from "@angular/router";
 import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
 import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
@@ -9,24 +8,46 @@ import {Meta, Title} from "@angular/platform-browser";
 import {SearchCustomFilter} from "../openaireLibrary/searchPages/searchUtils/searchUtils.class";
 import {LinksResolver} from "../search/links-resolver";
 import {CustomFilterService} from "../shared/customFilter.service";
+import {StakeholderBaseComponent} from "../openaireLibrary/monitor-admin/utils/stakeholder-base.component";
 
 @Component({
-  selector: 'rpo',
+  selector: 'rfo',
   template: `
-    <div style="background: mediumseagreen; height: 200px">
+      <loading *ngIf="loading" class="uk-position-center"></loading>
-        <div *ngIf="stakeholder">
+      <ng-container *ngIf="!loading">
-          <div>{{stakeholder.index_name}}</div>
+          <div class="uk-banner">
-          
+              <div class="uk-container uk-container-large">
-          <a class="uk-button uk-button-default" [routerLink]="'/rfo/' + stakeholder.alias + '/search/find/research-outcomes'">Browse results</a></div>
+                  <div class="uk-padding-small uk-padding-remove-vertical">
+                      <h1 *ngIf="stakeholder" class="uk-h2">{{stakeholder.name}}</h1>
+                      <h1 *ngIf="!stakeholder" class="uk-h2">{{entities.funders}}</h1>
                   </div>
-    <div *ngIf="!this.alias || this.stakeholder" class="uk-section uk-container">
+              </div>
+              <div *ngIf="stakeholder" class="uk-banner-footer">
+                  <div class="uk-container uk-container-large">
+                      <ul class="uk-banner-tab uk-padding-small uk-padding-remove-vertical">
+                          <li [class.uk-active]="!isSearch">
+                              <a [routerLink]="['./', stakeholder.alias]" [relativeTo]="_route"
+                                 (click)="isSearch = false">{{entities.stakeholder}}</a>
+                          </li>
+                          <li [class.uk-active]="isSearch" (click)="isSearch = true">
+                              <a [routerLink]="['./', stakeholder.alias, 'search']" [relativeTo]="_route">Browse
+                                  Research Outputs</a>
+                          </li>
+                      </ul>
+                  </div>
+              </div>
+          </div>
+          <div *ngIf="!this.alias || this.stakeholder" class="uk-margin-large-top">
               <router-outlet></router-outlet>
           </div>
+      </ng-container>
   `
 })
-export class RfoComponent extends BaseComponent implements OnInit {
+export class RfoComponent extends StakeholderBaseComponent implements OnInit {
   stakeholder: Stakeholder;
   alias: string;
+  isSearch: boolean = false;
+  loading: boolean = false;
 
   constructor(private stakeholderService: StakeholderService,
               private _customFilterService: CustomFilterService,
@@ -37,7 +58,9 @@ export class RfoComponent extends BaseComponent implements OnInit {
               protected _title: Title,
               protected _meta: Meta) {
     super();
-    super.initRouterParams(this._route);
+    super.initRouterParams(this._route, event => {
+      this.isSearch = event.url.includes('search');
+    });
 
   }
 
@@ -46,8 +69,10 @@ export class RfoComponent extends BaseComponent implements OnInit {
       this._customFilterService.setCustomFilter(null);
       this.alias = params['stakeholder'];
       if (this.alias) {
-          this.subscriptions.push(this.stakeholderService.getStakeholder(this.alias, true).subscribe(data => {
+        this.loading = true;
-            this.stakeholder = data;
+        this.subscriptions.push(this.stakeholderService.getStakeholder(this.alias, true).subscribe(stakeholder => {
+          this.stakeholder = stakeholder;
+          if (this.stakeholder && this.stakeholder.type === 'funder') {
             LinksResolver.resetProperties();
             LinksResolver.setSearchAndResultLanding("rfo/" + this.stakeholder.alias);
             let value = this.stakeholder.index_id + "||" + this.stakeholder.index_name + "||" + this.stakeholder.index_shortName;
@@ -55,7 +80,13 @@ export class RfoComponent extends BaseComponent implements OnInit {
                 [new SearchCustomFilter("National", "country", "IE", "Irish National Monitor", false),
                   new SearchCustomFilter("RF0", "relfunder", value, this.stakeholder.index_name, true)
                 ]);
+            this.loading = false;
+          } else {
+            this.navigateToError();
+          }
         }));
+      } else {
+        this.stakeholder = null;
       }
     });
   }

src/app/rfo/rfo.module.ts

@@ -2,18 +2,19 @@ import {NgModule} from "@angular/core";
 import {CommonModule} from "@angular/common";
 import {Route, RouterModule} from "@angular/router";
 import {RfoComponent} from "./rfo.component";
+import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
 const routes: Route[] = [
   {
     path: '', component: RfoComponent, children: [
       {path: '', loadChildren: () => import('../shared/browse-stakeholders/browse-stakeholder.module').then(m => m.BrowseStakeholderModule)},
-      {path: ':stakeholder', loadChildren: () => import('../shared/monitor/monitor.module').then(m => m.MonitorModule)},
+      {path: ':stakeholder/search', loadChildren: () => import('../search/resultLanding.module').then(m => m.ResultLandingModule)},
-      {path: ':stakeholder/search', loadChildren: () => import('../search/resultLanding.module').then(m => m.ResultLandingModule)}
+      {path: ':stakeholder', loadChildren: () => import('../shared/monitor/monitor.module').then(m => m.MonitorModule)}
     ]
   }
 ];
 
 @NgModule({
-  imports: [CommonModule, RouterModule.forChild(routes)],
+  imports: [CommonModule, RouterModule.forChild(routes), LoadingModule],
   declarations: [RfoComponent],
   exports: [RfoComponent],
 })

src/app/rpo/rpo.component.ts

@@ -1,29 +1,53 @@
-import {Component, OnDestroy, OnInit} from "@angular/core";
+import {Component, OnInit} from "@angular/core";
 import {Stakeholder} from "../openaireLibrary/monitor/entities/stakeholder";
 import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
-import {BaseComponent} from "../openaireLibrary/sharedComponents/base/base.component";
 import {ActivatedRoute, Router} from "@angular/router";
 import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
 import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
 import {Meta, Title} from "@angular/platform-browser";
-import {CustomFilterService} from "../shared/customFilter.service";
-import {LinksResolver} from "../search/links-resolver";
 import {SearchCustomFilter} from "../openaireLibrary/searchPages/searchUtils/searchUtils.class";
+import {LinksResolver} from "../search/links-resolver";
+import {CustomFilterService} from "../shared/customFilter.service";
+import {StakeholderBaseComponent} from "../openaireLibrary/monitor-admin/utils/stakeholder-base.component";
 
 @Component({
   selector: 'rpo',
   template: `
-    <div style="background: mediumseagreen; height: 200px">
+      <loading *ngIf="loading" class="uk-position-center"></loading>
-        
+      <ng-container *ngIf="!loading">
+          <div class="uk-banner">
+              <div class="uk-container uk-container-large">
+                  <div class="uk-padding-small uk-padding-remove-vertical">
+                      <h1 *ngIf="stakeholder" class="uk-h2">{{stakeholder.name}}</h1>
+                      <h1 *ngIf="!stakeholder" class="uk-h2">{{entities.organizations}}</h1>
                   </div>
-    <div *ngIf="!this.alias || this.stakeholder" class="uk-section uk-container">
+              </div>
+              <div *ngIf="stakeholder" class="uk-banner-footer">
+                  <div class="uk-container uk-container-large">
+                      <ul class="uk-banner-tab uk-padding-small uk-padding-remove-vertical">
+                          <li [class.uk-active]="!isSearch">
+                              <a [routerLink]="['./', stakeholder.alias]" [relativeTo]="_route"
+                                 (click)="isSearch = false">{{entities.stakeholder}}</a>
+                          </li>
+                          <li [class.uk-active]="isSearch" (click)="isSearch = true">
+                              <a [routerLink]="['./', stakeholder.alias, 'search']" [relativeTo]="_route">Browse
+                                  Research Outputs</a>
+                          </li>
+                      </ul>
+                  </div>
+              </div>
+          </div>
+          <div *ngIf="!this.alias || this.stakeholder" class="uk-margin-large-top">
               <router-outlet></router-outlet>
           </div>
+      </ng-container>
   `
 })
-export class RpoComponent extends BaseComponent implements OnInit {
+export class RpoComponent extends StakeholderBaseComponent implements OnInit {
   stakeholder: Stakeholder;
   alias: string;
+  isSearch: boolean = false;
+  loading: boolean = false;
 
   constructor(private stakeholderService: StakeholderService,
               private _customFilterService: CustomFilterService,
@@ -34,7 +58,9 @@ export class RpoComponent extends BaseComponent implements OnInit {
               protected _title: Title,
               protected _meta: Meta) {
     super();
-    super.initRouterParams(this._route);
+    super.initRouterParams(this._route, event => {
+      this.isSearch = event.url.includes('search');
+    });
 
   }
 
@@ -43,21 +69,27 @@ export class RpoComponent extends BaseComponent implements OnInit {
       this._customFilterService.setCustomFilter(null);
       this.alias = params['stakeholder'];
       if (this.alias) {
-        this.subscriptions.push(this.stakeholderService.getStakeholder(this.alias, true).subscribe(data => {
+        this.loading = true;
-          this.stakeholder = data;
+        this.subscriptions.push(this.stakeholderService.getStakeholder(this.alias, true).subscribe(stakeholder => {
+          this.stakeholder = stakeholder;
+          if (this.stakeholder && this.stakeholder.type === 'organization') {
             LinksResolver.resetProperties();
-          LinksResolver.setSearchAndResultLanding("rpo/" + this.stakeholder.alias);
+            LinksResolver.setSearchAndResultLanding("rfo/" + this.stakeholder.alias);
+            let value = this.stakeholder.index_id + "||" + this.stakeholder.index_name + "||" + this.stakeholder.index_shortName;
             this._customFilterService.setCustomFilter(
                 [new SearchCustomFilter("National", "country", "IE", "Irish National Monitor", false),
                   new SearchCustomFilter("RPO", "relorganizationid", this.stakeholder.index_id, this.stakeholder.index_name, true)
                 ]);
-
+            this.loading = false;
-          //  TODO not correct id/   no irish?
+          } else {
-
+            this.navigateToError();
-
+          }
         }));
+      } else {
+        this.stakeholder = null;
       }
     });
   }
 }
 
+

src/app/shared/browse-stakeholders/browse-stakeholder.component.html

@@ -3,7 +3,7 @@
     <loading></loading>
   </div>
 </ng-container>
-<ng-container *ngIf="!showLoading && stakeholders?.length">
+<div *ngIf="!showLoading && stakeholders?.length" class="uk-container uk-container-large">
   <div class="uk-flex uk-flex-middle uk-flex-center uk-position-relative">
     <div search-input *ngIf="keywordControl" [searchControl]="keywordControl" searchInputClass="border-bottom" iconPosition="left"
       placeholder="Search for {{typeAsLabel}} {{entities.stakeholders}}" [disabled]="showLoading" class="uk-width-1-2@m uk-width-1-1">
@@ -130,4 +130,4 @@
       </div>
     </ng-template>
   </div>
-</ng-container>
+</div>

src/app/shared/browse-stakeholders/browse-stakeholder.component.ts

@@ -11,7 +11,7 @@ import {debounceTime, distinctUntilChanged} from "rxjs/operators";
 
 @Component({
   selector: 'browse-stakeholder',
-  templateUrl: `browse-stakeholder.component.html`
+  templateUrl: 'browse-stakeholder.component.html'
 })
 export class BrowseStakeholderComponent extends StakeholderBaseComponent implements OnInit {
   stakeholderType: StakeholderType;
@@ -74,9 +74,6 @@ export class BrowseStakeholderComponent extends StakeholderBaseComponent impleme
     }));
   }
 
-  private navigateToError() {
-    this._router.navigate([this.properties.errorLink], {queryParams: {'page': this._router.url}});
-  }
 
   private filtering(value) {
     if(!value){

src/app/shared/irish.ts

@@ -1,5 +1,6 @@
 import {Portal} from "../openaireLibrary/utils/entities/adminTool/portal";
 import {StakeholderConfiguration} from "../openaireLibrary/monitor-admin/utils/indicator-utils";
+import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
 
 export class Irish {
   public static METADATA_PREFIX = 'NOAMI | ';
@@ -27,7 +28,9 @@ export class Irish {
 
     StakeholderConfiguration.VISIBILITIES = [
       {icon: 'earth', value: "PUBLIC", label: 'Public'},
-    ]
+    ];
+
+    LayoutService.HEADER_HEIGHT = '60px';
   }
 
 }

src/app/shared/monitor/monitor.component.html

@@ -1,18 +1,166 @@
-<div page-content>
+<div page-content [border]="isMobile">
     <div actions>
         <div *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 0" [class.uk-margin-bottom]="isMobile">
-            <slider-tabs *ngIf="stakeholder && !loading && activeTopic" [border]="!isMobile"
+            <slider-tabs *ngIf="stakeholder && !loading && activeTopic" [border]="!isMobile" [type]="'dynamic'">
-                         [tabsClass]="tabsClass" [type]="'dynamic'">
                 <ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory>
                     <slider-tab *ngIf="hasPermission(subCategory.visibility)" [tabTitle]="subCategory.name"
-                                [queryParams]="queryParams" [routerLink]="['/', stakeholder.alias, activeTopic.alias, activeCategory.alias, subCategory.alias]"
+                                [queryParams]="queryParams"
-                                [relativeTo]="_route"
+                                [routerLink]="['.', activeTopic.alias, activeCategory.alias, subCategory.alias]"
+                                [relativeTo]="_route.parent?_route.parent:_route"
                                 [active]="subCategory.alias === activeSubCategory.alias"></slider-tab>
                 </ng-template>
             </slider-tabs>
         </div>
     </div>
     <div inner>
-
+        <div *ngIf="!activeSubCategory" class="message">
+            No {{entities.stakeholder}} yet.
+        </div>
+        <div *ngIf="activeSubCategory" class="uk-section">
+            <ng-container *ngFor="let number of activeSubCategory.numbers; let i = index;">
+                <div *ngIf="!isMobile" class="uk-grid uk-grid-small uk-grid-match uk-margin-medium-bottom" uk-grid uk-height-match="target: .uk-card">
+                    <h5 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h5>
+                    <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
+                        <div *ngIf="hasPermission(indicator.visibility)"
+                             [ngClass]="getNumberClassBySize(indicator.width)">
+                            <div class="uk-card uk-card-default uk-padding-small number-card uk-position-relative"
+                                 [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
+                                <div *ngIf="!indicator.descriptionOverlay">
+                                    <div class="uk-text-small uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</div>
+                                    <div class="number uk-text-small uk-text-bold">
+                                      <span *ngIf="numberResults.get(i + '-' + j)"
+                                            [innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j) | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j) | numberPercentage: stakeholder.locale))"></span>
+                                      <span *ngIf="!numberResults.get(i + '-' + j)">--</span>
+                                    </div>
+                                    <div *ngIf="indicator.description || indicator.additionalDescription"
+                                         class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right uk-visible@m">
+                                        <a class="uk-display-inline-block uk-button uk-button-link" uk-tooltip="Note"
+                                           (click)="toggleDescriptionOverlay($event, indicator)">
+                                            <span class="uk-flex uk-flex-middle">
+                                              <icon name="analytics" type="outlined" [flex]="true"></icon>
+                                            </span>
+                                        </a>
+                                    </div>
+                                </div>
+                                <div *ngIf="indicator.descriptionOverlay && (indicator.description || indicator.additionalDescription)" click-outside-or-esc class="uk-overflow-auto" (clickOutside)="closeDescriptionOverlay($event, indicator)">
+                                    <div class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right">
+                                        <a class="uk-display-inline-block uk-button uk-button-link"
+                                           (click)="toggleDescriptionOverlay($event, indicator)">
+                                            <span class="uk-flex uk-flex-middle">
+                                              <icon name="close" type="outlined" [flex]="true"></icon>
+                                            </span>
+                                        </a>
+                                    </div>
+                                    <div class="uk-margin-small-top uk-margin-right">
+                                        <p *ngIf="indicator.description">
+                                            {{indicator.description}}
+                                        </p>
+                                        <p *ngIf="indicator.additionalDescription">
+                                            {{indicator.additionalDescription}}
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </ng-template>
+                </div>
+                <div *ngIf="isMobile">
+                    <h6 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h6>
+                    <div class="uk-card uk-card-default uk-padding-small number-card">
+                        <div class="uk-grid uk-grid-small uk-child-width-1-1" uk-grid>
+                            <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
+                                <div *ngIf="hasPermission(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)">
+                                    <div [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
+                                        <div *ngIf="!indicator.descriptionOverlay">
+                                            <div
+                                                    class="uk-text-xsmall uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</div>
+                                            <div class="number uk-text-small uk-text-bold">
+                          <span *ngIf="numberResults.get(i + '-' + j)"
+                                [innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j) | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j) | numberPercentage: stakeholder.locale))"></span>
+                                                <span *ngIf="!numberResults.get(i + '-' + j)">--</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </ng-template>
+                        </div>
+                    </div>
+                </div>
+            </ng-container>
+            <ng-container *ngFor="let chart of activeSubCategory.charts; let i = index;">
+                <div class="uk-grid uk-grid-small uk-grid-match uk-margin-medium-bottom uk-flex uk-flex-middle" uk-grid
+                     uk-height-match="target: .uk-card">
+                    <h5 *ngIf="chart.title && !isMobile" class="uk-width-1-1 uk-margin-bottom">{{chart.title}}</h5>
+                    <h6 *ngIf="chart.title && isMobile" class="uk-width-1-1">{{chart.title}}</h6>
+                    <ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
+                        <div *ngIf="hasPermission(indicator.visibility) && chartsActiveType.get(i + '-' + j)"
+                             [ngClass]="getChartClassBySize(indicator.width)">
+                            <div class="uk-card uk-card-default uk-position-relative"
+                                 [class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()">
+                                <div class="uk-card-body uk-text-center uk-margin-small-bottom">
+                                    <h6 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom">
+                                        {{indicator.name + " "}}
+                                    </h6>
+                                    <div *ngIf="indicator.indicatorPaths.length > 1" class="uk-button-group">
+                                        <button *ngFor="let indicatorPath of indicator.indicatorPaths;"
+                                                class="uk-button"
+                                                (click)="setActiveChart(i, j, indicatorPath.type)"
+                                                [class.uk-button-secondary]="chartsActiveType.get(i + '-' + j).url === indicatorPath.url">
+                                            {{indicatorPath.type}}
+                                        </button>
+                                    </div>
+                                    <iframe [class.uk-blend-multiply]="!isFullscreen"
+                                            *ngIf=" !properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'"
+                                            [src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
+                                            class="uk-width-1-1" allowfullscreen="true" mozallowfullscreen="true"
+                                            [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
+                                    <div *ngIf="properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'">
+                                        <img class="uk-width-1-1 uk-blend-multiply"
+                                             [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
+                                             src="assets/chart-placeholder.png">
+                                    </div>
+                                    <img *ngIf="chartsActiveType.get(i + '-' + j).source === 'image'"
+                                         [src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
+                                         class="uk-width-1-1 uk-blend-multiply"
+                                         [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')">
+                                </div>
+                                <div *ngIf="indicator.description || indicator.additionalDescription"
+                                     class="uk-position-bottom-left uk-margin-left uk-margin-small-bottom uk-visible@m">
+                                    <a class="uk-display-inline-block uk-button uk-button-text"
+                                       (click)="toggleDescriptionOverlay($event, indicator)">
+                                      <span class="uk-flex uk-flex-middle">
+                                        <icon name="analytics" type="outlined" [flex]="true"></icon>
+                                        <span class="uk-margin-small-left">Note</span>
+                                      </span>
+                                    </a>
+                                </div>
+                                <div *ngIf="indicator.descriptionOverlay && (indicator.description || indicator.additionalDescription)"
+                                     class="indicator-description uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center">
+                                    <div class="inner" click-outside-or-esc
+                                         (clickOutside)="closeDescriptionOverlay($event, indicator)">
+                                        <div class="uk-padding-small">
+                                            <div class="uk-flex uk-flex-right">
+                                                <button class="uk-close uk-icon" (click)="toggleDescriptionOverlay($event, indicator)">
+                                                    <icon name="close" ratio="1"></icon>
+                                                </button>
+                                            </div>
+                                            <div class="uk-padding-small uk-padding-remove-horizontal">
+                                                <p *ngIf="indicator.description">
+                                                    {{indicator.description}}
+                                                </p>
+                                                <p *ngIf="indicator.additionalDescription">
+                                                    {{indicator.additionalDescription}}
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="printGap uk-hidden"></div>
+                    </ng-template>
+                </div>
+            </ng-container>
+        </div>
     </div>
 </div>

src/app/shared/monitor/monitor.component.ts

@@ -17,7 +17,6 @@ import {SEOService} from "../../openaireLibrary/sharedComponents/SEO/SEO.service
   templateUrl: 'monitor.component.html'
 })
 export class MonitorComponent extends MonitorIndicatorStakeholderBaseComponent {
-  tabsClass: string = 'uk-tab';
 
   constructor(protected _route: ActivatedRoute,
               protected _router: Router,

src/app/shared/monitor/monitor.module.ts

@@ -4,11 +4,17 @@ import {RouterModule} from "@angular/router";
 import {MonitorComponent} from "./monitor.component";
 import {PageContentModule} from "../../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
 import {SliderTabsModule} from "../../openaireLibrary/sharedComponents/tabs/slider-tabs.module";
+import {NumberRoundModule} from "../../openaireLibrary/utils/pipes/number-round.module";
+import {IconsModule} from "../../openaireLibrary/utils/icons/icons.module";
+import {ClickModule} from "../../openaireLibrary/utils/click/click.module";
 
 @NgModule({
   imports: [CommonModule, RouterModule.forChild([
-    {path: '', component: MonitorComponent}
+    {path: '', component: MonitorComponent},
-  ]), PageContentModule, SliderTabsModule],
+    {path: ':topic/', component: MonitorComponent},
+    {path: ':topic/:category', component: MonitorComponent},
+    {path: ':topic/:category/:subCategory', component: MonitorComponent}
+  ]), PageContentModule, SliderTabsModule, NumberRoundModule, IconsModule, ClickModule],
   declarations: [MonitorComponent],
   exports: [MonitorComponent]
 })

src/app/upload-dois/upload-dois.component.html

@@ -1,29 +1,31 @@
 <div>
-  <div class="uk-background-primary uk-grid uk-padding-large">
+  <div class="uk-banner">
+    <div class="uk-container uk-container-large">
+      <div class="uk-grid" uk-grid>
         <div class="uk-width-expand">
           <div>Title</div>
           <div>Lorem ipsum.......</div>
         </div>
         <div *ngIf="filesToUpload && !loading" class="uk-width-xlarge">
-      <div class="uk-text-right">
+          <div class="uk-flex uk-flex-right">
-    <span class="js-upload uk-button uk-button-primary" uk-form-custom>
+            <button class="uk-button uk-button-primary uk-flex uk-flex-middle" uk-form-custom>
-                <input id="upload-new" class="uk-width-medium" type="file" (change)="fileChangeEvent($event)"/>
+              <input id="upload-new" type="file" (change)="fileChangeEvent($event)"/>
-      <span uk-icon="upload"></span>
+              <icon name="upload_file" class="uk-margin-xsmall-right" [flex]="true"></icon>
-      upload new file
+              <span>upload new file</span>
-      <!--                <span class="uk-link " style="text-decoration: underline;">Upload a DOI's CSV file </span>-->
+            </button>
-              </span>
           </div>
-      <div *ngIf="filesToUpload[0]" class="uk-grid">
+          <div *ngIf="filesToUpload[0]" class="uk-flex uk-flex-middle">
-        <div class="uk-width-auto">
+            <icon name="description" [ratio]="2" [flex]="true"></icon>
-          <span uk-icon="icon: file-text; ratio:3"></span>
+            <div class="uk-width-expand uk-margin-left">
-        </div>
-        <div class="uk-width-expand">
               {{filesToUpload[0].name}}
               <progress class="uk-progress" [value]="enableUpload?100:10" max="100"></progress>
             </div>
           </div>
         </div>
       </div>
+
+    </div>
+  </div>
   <div *ngIf="!filesToUpload || loading"  class="uk-section uk-container uk-flex uk-flex-center">
     <div class="uk-placeholder uk-text-center uk-width-xlarge" uk-form-custom>
       <icon name="upload_file" [ratio]="2"></icon>

src/assets/common-assets

@@ -1 +1 @@
-Subproject commit d1b2d5e585722751792d12645d17f820cd6a7860
+Subproject commit 6bb1e61b059bef1bff3bfb0611b0df46f7840426

src/assets/extend-theme/less/_import-variables.less

@@ -0,0 +1,3 @@
+@import "~uikit/src/less/components/variables";
+@import "~src/assets/openaire-theme/less/variables";
+@import "~src/assets/extend-theme/less/variables";

src/assets/extend-theme/less/_import.less

@@ -0,0 +1,16 @@
+@import "~src/assets/openaire-theme/less/_import";
+
+// Base
+@import "variables";
+
+// Elements
+@import "button";
+
+// Navs
+@import "navbar";
+
+// Utilities
+@import "background";
+
+// Extra
+@import "banner";

src/assets/extend-theme/less/background.less

@@ -0,0 +1 @@
+@background-primary-background-gradient: none;

src/assets/extend-theme/less/banner.less

@@ -0,0 +1,78 @@
+@banner-background: @irish-thin-color;
+@banner-mode: dark;
+
+@banner-footer-background: transparent;
+
+@banner-tab-gutter: 60px;
+@banner-tab-margin-bottom: @global-small-margin;
+@banner-tab-divider: @global-border-width solid @global-border;
+@banner-tab-divider-height: @global-line-height;
+@banner-tab-item-color: @global-color;
+@banner-tab-item-hover-color: @global-secondary-background;
+@banner-tab-item-active-color: @global-secondary-background;
+@banner-tab-item-active-indicator: @global-background;
+
+.uk-banner:extend(.uk-section) {
+  background: @banner-background;
+  position: relative;
+
+  & .uk-banner-footer {
+    background: @banner-footer-background;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    & ul.uk-banner-tab:extend(.uk-flex) {
+      list-style: none;
+      margin-bottom: @banner-tab-margin-bottom;
+
+      & > li {
+        &:not(:first-child) {
+          margin-left: @banner-tab-gutter;
+          position: relative;
+
+          &::before {
+            content: '';
+            position: absolute;
+            left: -1 * (@banner-tab-gutter/2);
+            transform: translateX(-100%);
+            border-left: @banner-tab-divider;
+            height: @banner-tab-divider-height;
+          }
+        }
+
+        a {
+          color: @banner-tab-item-color;
+          text-transform: uppercase;
+          text-decoration: none;
+        }
+
+        &:hover a {
+          color:@banner-tab-item-hover-color;
+        }
+
+        &.uk-active a {
+          color: @banner-tab-item-active-color;
+          font-weight: @text-bold-weight;
+          position: relative;
+
+          &:after {
+            content: '';
+            position: absolute;
+            bottom: -@banner-tab-margin-bottom;
+            left: 50%;
+            transform: translate(-50%, 50%);
+            width: 0;
+            height: 0;
+            border-left: 2*@banner-tab-margin-bottom solid transparent;
+            border-right: 2*@banner-tab-margin-bottom solid transparent;
+            border-bottom: @banner-tab-margin-bottom solid @banner-tab-item-active-indicator;
+          }
+        }
+      }
+    }
+  }
+}
+
+.uk-banner:extend(.uk-light all) when (@banner-mode = light) {}

src/assets/extend-theme/less/button.less

@@ -1,3 +1,15 @@
+/* Primary */
+@button-primary-background: @global-primary-background;
+@button-primary-background-gradient: none;
+@button-primary-color: @global-inverse-color;
+@button-primary-box-shadow: @global-medium-box-shadow;
+@button-primary-border: transparent;
+@button-primary-hover-background: @global-secondary-background;
+@button-primary-hover-background-gradient: none;
+@button-primary-hover-color: @global-inverse-color;
+@button-primary-hover-box-shadow: @global-small-box-shadow;
+@button-primary-hover-border: transparent;
+
 /* Secondary */
 @button-secondary-background: @global-secondary-background;
 @button-secondary-background-gradient: none;

src/assets/extend-theme/less/color.less

@@ -0,0 +1,12 @@
+@irish-primary-color: #009A49;
+@irish-light-color: #25AE7A;
+@irish-dark-color: #002B1A;
+@irish-secondary-color: #FF7901;
+@irish-thin-color: #DCE9E3;
+@irish-global-background: #F9FBFC;
+
+
+@funder-color: #4D276F;
+@organization-color: #f5cc1c;
+@country-color: @irish-primary-color;
+@datasource-color: #D45E50;

src/assets/extend-theme/less/variables.less

@@ -1,8 +1,11 @@
+@import "color";
+
 /** Backgrounds */
 @global-primary-background: @irish-primary-color;
 @global-secondary-background: @irish-secondary-color;
 @global-background: @irish-global-background;
 @global-primary-gradient: radial-gradient(closest-side at 50% 50%, @irish-light-color 0%, @irish-dark-color 100%);
+@global-muted-background: @gray-300;
 
 /** Borders */
 @global-border: @gray-300;

src/assets/irish-monitor.less

@@ -1,3 +1,5 @@
+@general-search-form-background: none;
+
 .irish-monitor {
   /* Import OpenAIRE theme*/
   @import (multiple) "~src/assets/openaire-theme/less/_import";

src/assets/irish-theme/_import.less

@@ -1,21 +0,0 @@
-@import "~src/assets/openaire-theme/less/_import";
-@import "~src/assets/common-assets/less/general";
-@import "~src/assets/common-assets/less/user";
-@import "~src/assets/common-assets/less/landing";
-@import "~src/assets/common-assets/less/linking";
-@import "~src/assets/common-assets/less/dashboard";
-@import "~src/assets/common-assets/less/ckeditor";
-
-@import "colors";
-
-// Base
-@import "variables";
-
-// Elements
-@import "button";
-
-// Navs
-@import "navbar";
-
-// Utilities
-@import "background";

src/assets/irish-theme/background.less

@@ -1,2 +0,0 @@
-@background-primary-background: @irish-primary-background;
-@background-primary-background-gradient: none;

src/assets/irish-theme/colors.less

@@ -1,6 +0,0 @@
-@irish-primary-color: #1B895F;
-@irish-light-color: #25AE7A;
-@irish-dark-color: #002B1A;
-@irish-secondary-color: #FF7901;
-@irish-primary-background: #DCE9E3;
-@irish-global-background: #F9FBFC;

src/assets/openaire-theme

@@ -1 +1 @@
-Subproject commit 2dadcf85926bc0f11fff22ed94dc197ddd8587c6
+Subproject commit 928dfa11bd4aeadb30c2d72d408c7b7206d6598e

src/styles.less

@@ -1,4 +1,10 @@
 /* You can add global styles to this file, and also import other style files */
 /* Import OpenAIRE theme*/
-@import "~src/assets/irish-theme/_import";
+@import "~src/assets/extend-theme/less/_import";
+@import "~src/assets/common-assets/less/general";
+@import "~src/assets/common-assets/less/user";
+@import "~src/assets/common-assets/less/landing";
+@import "~src/assets/common-assets/less/linking";
+@import "~src/assets/common-assets/less/dashboard";
+@import "~src/assets/common-assets/less/ckeditor";
 @import "~src/assets/irish-monitor";