[umbrella | WIP] create banner for umbrella and child stakeholders, create browse-stakeholders component, add new monitor-routes for loading the correct content

src/app/app.component.html

@@ -6,6 +6,78 @@
   <ng-container *ngIf="!isHidden">
     <navbar *ngIf="hasHeader" portal="monitor_dashboard" [header]="menuHeader" [userMenuItems]=userMenuItems [menuItems]="menuItems" [user]="user"
             [notificationConfiguration]="isMobile && user && notificationGroupsInitialized?notificationConfiguration:null"></navbar>
+    
+    <div *ngIf="isChildStakeholder" class="uk-banner uk-padding uk-padding-remove-horizontal uk-light">
+      <div class="uk-container uk-container-large">
+        <div class="uk-padding-small uk-padding-remove-vertical">
+          <div class="uk-grid uk-grid-large uk-flex-middle uk-margin-medium-bottom" uk-grid>
+            <div class="uk-width-expand">
+              <div class="uk-grid uk-grid-small uk-flex-middle" uk-grid>
+                <div class="uk-card uk-card-default uk-padding-small">
+                  <!-- TODO: custom smaller height for child logo?? -->
+                  <img *ngIf="stakeholder.logoUrl; else elseBlock" [src]="stakeholder | logoUrl" [alt]="stakeholder.name + ' logo'" class="uk-height-max-xsmall" style="max-width: 180px;">
+                  <ng-template #elseBlock>
+                    <img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall" style="max-width: 180px;">
+                  </ng-template>
+                </div>
+                <div class="uk-width-expand uk-margin-small-left">
+                  <h1 class="uk-h5 uk-margin-remove uk-text-truncate">{{stakeholder.name}}</h1>
+                  <div class="uk-text-small uk-margin-small-top">
+                    <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div *ngIf="stakeholder.otherParents?.length" class="uk-width-auto">
+              <div class="uk-text-small uk-margin-small-bottom">
+                Other related publishers
+              </div>
+              <div class="uk-flex uk-flex-middle">
+                <a *ngFor="let item of stakeholder.otherParents" [routerLink]="item.alias" class="uk-link-reset uk-margin-small-right">
+                  <button class="uk-icon-button uk-button-default">
+                    <img *ngIf="item.logoUrl; else elseBlock" [src]="item | logoUrl" [alt]="item.name + ' logo'" style="max-width: 35px;">
+                    <ng-template #elseBlock>
+                      <img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" style="max-width: 35px;">
+                    </ng-template>
+                  </button>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="uk-banner-footer uk-padding-remove">
+        <ul class="uk-banner-tab uk-flex-center">
+          <li [class.uk-active]="isDashboard">
+            <a [routerLink]="">
+              Dashboard
+            </a>
+          </li>
+          <li [class.uk-active]="!isDashboard">
+            <!-- TODO: link to search results -->
+            <a>
+              Browse results
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div *ngIf="isUmbrella" class="uk-banner uk-padding-remove">
+      <ul class="uk-banner-tab uk-flex-center">
+        <li [class.uk-active]="isDashboard">
+          <a [routerLink]="stakeholder.alias">
+            Dashboard
+          </a>
+        </li>
+        <li *ngFor="let item of stakeholder.umbrella.children | keyvalue" [class.uk-active]="!isDashboard">
+          <a [routerLink]="stakeholder.alias + '/browse/' + item.key">
+            Browse {{stakeholderUtils.entities[item.key+'s']}}
+          </a>
+        </li>
+      </ul>
+    </div>
+    
     <div>
         <div class="sidebar_main_swipe uk-flex uk-background-default" [class.sidebar_main_active]="open && (hasSidebar || hasAdminMenu || hasInternalSidebar)"
              [class.sidebar_mini]="!open &&  (hasSidebar || hasAdminMenu || hasInternalSidebar)" [class.sidebar_hover]="hover">

src/app/app.component.ts

@@ -19,6 +19,7 @@ import {
   NotificationConfiguration
 } from "./openaireLibrary/notifications/notifications-sidebar/notifications-sidebar.component";
 import {SidebarBaseComponent} from "./openaireLibrary/dashboard/sharedComponents/sidebar/sidebar-base.component";
+import {Breadcrumb} from './openaireLibrary/utils/breadcrumbs/breadcrumbs.component';
 
 
 @Component({
@@ -33,6 +34,10 @@ export class AppComponent extends SidebarBaseComponent implements OnInit {
   hasHeader: boolean = false;
   hasAdminMenu: boolean = false;
   hasInternalSidebar: boolean = false;
+  isUmbrella: boolean = false;
+  isChildStakeholder: boolean = false;
+  breadcrumbs: Breadcrumb[] = [];
+  isDashboard: boolean;
   isFrontPage: boolean = false;
   isMobile: boolean = false;
   view: Visibility;
@@ -71,7 +76,10 @@ export class AppComponent extends SidebarBaseComponent implements OnInit {
               private configurationService: ConfigurationService,
               private resourcesService: ResourcesService) {
     super();
-    this.initRouterParams(_route);
+    // TODO: fix this statement
+    this.initRouterParams(_route, event => {
+      this.isDashboard = !event.url.includes('browse');
+    });
   }
 
   ngOnInit() {
@@ -126,25 +134,48 @@ export class AppComponent extends SidebarBaseComponent implements OnInit {
         if (this.paramsResolved) {
           this.loading = true;
           if (params && params['stakeholder']) {
-            if (!this.stakeholder || this.stakeholder.alias !== params['stakeholder'] || this.updateStakeholder) {
-              this.subscriptions.push(this.stakeholderService.getStakeholder(params['stakeholder'], this.updateStakeholder).subscribe(stakeholder => {
-                if (stakeholder) {
-                  this.stakeholder = stakeholder;
-                  this.updateStakeholder = false;
-                  LinksResolver.setProperties(this.stakeholder.alias);
-                  this.setProperties(this.stakeholder.alias, this.stakeholder.type);
-                  this.buildMenu();
-                  this.setActives(params);
-                  this.setSideBar();
-                  this.loading = false;
-                } else {
-                  this.stakeholder = null;
-                  LinksResolver.resetProperties();
-                  this.navigateToError();
-                  this.buildMenu();
-                  this.loading = false;
+            let callback = (stakeholder) => {
+              if (stakeholder) {
+                console.log(stakeholder);
+                this.stakeholder = stakeholder;
+                if (this.stakeholder.umbrella) {
+                  this.isUmbrella = true;
+                  this.isChildStakeholder = false;
                 }
-              }));
+                if (this.stakeholder.parent) {
+                  this.isChildStakeholder = true;
+                  this.isUmbrella = false;
+                  var prefix = this.stakeholder.parent.alias + '/browse/' + this.stakeholder.type;
+                  this.breadcrumbs = [
+                    {name: this.stakeholder.parent.name, route: this.stakeholder.parent.alias}, 
+                    {name: this.stakeholder.type, route: prefix}, 
+                    {name: this.stakeholder.name}
+                  ];
+                }
+                this.updateStakeholder = false;
+                LinksResolver.setProperties(this.stakeholder.alias);
+                this.setProperties(this.stakeholder.alias, this.stakeholder.type);
+                this.buildMenu();
+                this.setActives(params);
+                // TODO: add parameters for setSidebar (maybe) and check with monitor.component
+                this.setSideBar(prefix);
+                this.loading = false;
+              } else {
+                this.stakeholder = null;
+                LinksResolver.resetProperties();
+                this.navigateToError();
+                this.buildMenu();
+                this.loading = false;
+              }
+            };
+            // TODO: fix the next 2 if statements
+            if (params['child']) {
+              console.log('case for child stakeholder');
+              this.subscriptions.push(this.stakeholderService.getChildStakeholder(params['stakeholder'], params['type'], params['child'], this.updateStakeholder).subscribe(callback));
+            }
+            if (!this.stakeholder || this.stakeholder.alias !== params['stakeholder'] || this.updateStakeholder) {
+              console.log('case for parent stakeholder');
+              this.subscriptions.push(this.stakeholderService.getStakeholder(params['stakeholder'], this.updateStakeholder).subscribe(callback));
             } else {
               this.buildMenu();
               this.setActives(params);
@@ -260,18 +291,18 @@ export class AppComponent extends SidebarBaseComponent implements OnInit {
     return "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu';
   }
   
-  private setSideBar() {
+  private setSideBar(prefix?: string) {
     let items: MenuItem[] = [];
     if (this.hasPermission(this.view?this.view:this.stakeholder.visibility)) {
       this.stakeholder.topics.forEach((topic: Topic) => {
         if (this.hasPermission(topic.visibility)) {
-          let topicItem: MenuItem = new MenuItem(topic.alias, topic.name, "", '/' + this.stakeholder.alias + '/' + topic.alias,
+          let topicItem: MenuItem = new MenuItem(topic.alias, topic.name, "", (prefix ? prefix : '') + '/' + this.stakeholder.alias + '/' + topic.alias,
             null, [], [], {}, {svg: topic.icon}, null, null, (
-              '/' + this.stakeholder.alias + '/' + topic.alias));
+              (prefix ? prefix : '') + '/' + this.stakeholder.alias + '/' + topic.alias));
           topicItem.items = topic.categories.filter(category => this.hasPermission(category.visibility)).map(category => {
-            return new MenuItem(category.alias, category.name, "", ('/' + this.stakeholder.alias + '/' + topic.alias + '/' + category.alias),
+            return new MenuItem(category.alias, category.name, "", ((prefix ? prefix : '') + '/' + this.stakeholder.alias + '/' + topic.alias + '/' + category.alias),
               null, [], [], {}, {svg: topic.icon}, null, null,
-              ('/' + this.stakeholder.alias + '/' + topic.alias + '/' + category.alias));
+              ((prefix ? prefix : '') + '/' + this.stakeholder.alias + '/' + topic.alias + '/' + category.alias));
           });
           items.push(topicItem);
         }
@@ -339,18 +370,33 @@ export class AppComponent extends SidebarBaseComponent implements OnInit {
         );
       }
       if (!this.hasAdminMenu && this.isFrontPage) {
-        this.menuHeader = {
-          route: './' + this.stakeholder.alias,
-          url: null,
-          title: this.stakeholder.name,
-          logoUrl: StringUtils.getLogoUrl(this.stakeholder),
-          logoSmallUrl: StringUtils.getLogoUrl(this.stakeholder),
-          logoInfo: '<div class="uk-margin-left uk-width-medium"><div class="uk-margin-remove uk-text-background uk-text-bold uk-text-small">Monitor Dashboard</div>' +
-            '<div class="uk-h6 uk-text-truncate uk-margin-remove">' + this.stakeholder.name + '</div></div>',
-          position: 'left',
-          badge: true,
-          menuPosition: "center"
-        };
+        if (this.isChildStakeholder) {
+          this.menuHeader = {
+            route: './' + this.stakeholder.parent.alias,
+            url: null,
+            title: this.stakeholder.parent.name,
+            logoUrl: StringUtils.getLogoUrl(this.stakeholder.parent),
+            logoSmallUrl: StringUtils.getLogoUrl(this.stakeholder.parent),
+            logoInfo: '<div class="uk-margin-left uk-width-medium"><div class="uk-margin-remove uk-text-background uk-text-bold uk-text-small">Monitor Dashboard</div>' +
+              '<div class="uk-h6 uk-text-truncate uk-margin-remove">' + this.stakeholder.parent.name + '</div></div>',
+            position: 'left',
+            badge: true,
+            menuPosition: "center"
+          };
+        } else {
+          this.menuHeader = {
+            route: './' + this.stakeholder.alias,
+            url: null,
+            title: this.stakeholder.name,
+            logoUrl: StringUtils.getLogoUrl(this.stakeholder),
+            logoSmallUrl: StringUtils.getLogoUrl(this.stakeholder),
+            logoInfo: '<div class="uk-margin-left uk-width-medium"><div class="uk-margin-remove uk-text-background uk-text-bold uk-text-small">Monitor Dashboard</div>' +
+              '<div class="uk-h6 uk-text-truncate uk-margin-remove">' + this.stakeholder.name + '</div></div>',
+            position: 'left',
+            badge: true,
+            menuPosition: "center"
+          };
+        }
       } else {
         this.menuHeader = {
           route: './' + this.stakeholder.alias,

src/app/app.module.ts

@@ -32,6 +32,8 @@ import {AdminDashboardGuard} from "./openaireLibrary/monitor-admin/utils/adminDa
 import {CacheIndicatorsModule} from "./openaireLibrary/monitor-admin/utils/cache-indicators/cache-indicators.module";
 import {CustomRouteReuseStrategy} from "./openaireLibrary/shared/custom-route-reuse-strategy";
 import {RouteReuseStrategy} from "@angular/router";
+import {LogoUrlPipeModule} from './openaireLibrary/utils/pipes/logoUrlPipe.module';
+import {BreadcrumbsModule} from './openaireLibrary/utils/breadcrumbs/breadcrumbs.module';
 
 @NgModule({
 
@@ -47,7 +49,9 @@ import {RouteReuseStrategy} from "@angular/router";
     CookieLawModule,
     BrowserModule,
     AppRoutingModule,
-    SideBarModule, Schema2jsonldModule, RoleVerificationModule, LoadingModule, NotificationsSidebarModule, IconsModule, CacheIndicatorsModule
+    SideBarModule, Schema2jsonldModule, RoleVerificationModule, LoadingModule, NotificationsSidebarModule, IconsModule, CacheIndicatorsModule,
+    LogoUrlPipeModule,
+    BreadcrumbsModule
   ],
   declarations: [AppComponent, OpenaireErrorPageComponent],
   exports: [AppComponent],

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

@@ -0,0 +1,115 @@
+<ng-container *ngIf="showLoading">
+  <div class="uk-container uk-container-large uk-section">
+    <loading></loading>
+  </div>
+</ng-container>
+<div *ngIf="!showLoading" class="uk-container uk-container-large uk-section">
+  <div class="uk-flex uk-flex-middle uk-flex-between">
+    <div class="uk-visible@m uk-width-small">
+    </div>
+    <div search-input *ngIf="keywordControl" [searchControl]="keywordControl" [searchInputClass]="'flat'" [iconPosition]="'left'"
+      placeholder="Search for {{typeAsLabel.toLowerCase()}}s" [disabled]="stakeholders.length === 0" class="uk-width-xlarge@l uk-width-large@m uk-width-1-1">
+    </div>
+    <div *ngIf="!isMobile">
+      <div [class.uk-disabled]="stakeholders.length === 0" class="uk-flex uk-flex-middle uk-flex-right uk-width-small">
+        <button (click)="gridView = true" [class.uk-button-primary]="gridView" [disabled]="stakeholders.length === 0"
+                class="uk-icon-button uk-button-default uk-border-rounded uk-icon-button-small">
+          <icon name="apps" [flex]="true" type="round" [ratio]="1.2"></icon>
+        </button>
+        <button (click)="gridView = false" [class.uk-button-primary]="!gridView" [disabled]="stakeholders.length === 0"
+                class="uk-icon-button uk-button-default uk-border-rounded uk-icon-button-small uk-margin-small-left">
+          <icon name="view_list" [flex]="true" type="round" [ratio]="1.2"></icon>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div class="uk-flex uk-flex-middle uk-flex-between uk-margin-large-top">
+    <div class="uk-flex uk-flex-middle">
+      <div *ngIf="sortOptions?.length > 0" class="uk-width-small uk-margin-medium-right">
+        <div input
+          type="select" placeholder="Sort by" inputClass="border-bottom"
+          [options]="sortOptions" [(value)]="sortBy" (valueChange)="sortByChanged()">
+        </div>
+      </div>
+      <div class="uk-width-xsmall">
+        <div input
+          type="select" placeholder="Results per page" inputClass="border-bottom"
+          [options]="pageOptions" [(value)]="pageSize" (valueChange)="sizeChanged($event)">
+        </div>
+      </div>
+    </div>
+    <div>
+      <paging-no-load *ngIf="filteredStakeholders.length > pageSize"
+        (pageChange)="updateCurrentPage($event)"
+        [currentPage]="currentPage" [size]="pageSize"
+        [totalResults]="filteredStakeholders.length">
+      </paging-no-load>
+    </div>
+  </div>
+  <div class="uk-margin-large-top" id="target">
+    <div *ngIf="!filteredStakeholders || filteredStakeholders?.length == 0" class="uk-flex uk-flex-center">
+      <div class="uk-alert uk-alert-primary uk-text-center uk-width-2-3@m uk-width-1-1">
+        No {{entities.stakeholders}} available
+      </div>
+    </div>
+    <!-- STAKEHOLDERS -->
+    <!-- Grid view -->
+    <ng-container *ngIf="gridView || isMobile; else elseBlock">
+      <div class="uk-grid" class="uk-child-width-1-4@l uk-child-width-1-3@m uk-child-width-1-1"
+        uk-grid uk-height-match="target: .top-info;">
+        <div *ngFor="let item of filteredStakeholders.slice((currentPage-1)*pageSize, currentPage*pageSize)">
+          <a routerLink="./{{item.alias}}" class="uk-link-reset">
+            <div class="uk-card uk-card-default uk-card-hover">
+              <div class="uk-padding-small top-info">
+                <!-- logo -->
+                <div class="uk-flex uk-flex-center uk-flex-middle uk-height-xsmall">
+                  <img *ngIf="item.logoUrl; else elseBlock" [src]="item | logoUrl" [alt]="item.name + ' logo'" class="uk-height-max-xsmall uk-blend-multiply" style="max-width: 180px;">
+                  <ng-template #elseBlock>
+                    <img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply" style="max-width: 180px;">
+                  </ng-template>
+                </div>
+                <!-- name -->
+                <div class="uk-text-center uk-text-bold uk-margin-top multi-line-ellipsis lines-2">
+                  <div [title]="item.name">
+                    {{item.name}}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+    </ng-container>
+    <!-- List view -->
+    <ng-template #elseBlock>
+      <div>
+        <table class="uk-table uk-table-striped uk-table-middle uk-table-responsive uk-table-hover">
+          <thead>
+            <tr>
+              <th>Logo</th>
+              <th>Name</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let item of filteredStakeholders.slice((currentPage-1)*pageSize, currentPage*pageSize)"
+              class="clickable" routerLink="./{{item.alias}}">
+              <td>
+                <div class="uk-flex uk-flex-middle uk-height-xsmall uk-margin-left">
+                  <img *ngIf="item.logoUrl; else elseBlock" [src]="item | logoUrl" [alt]="item.name + ' logo'" class="uk-height-max-xsmall uk-blend-multiply" style="max-width: 140px;">
+                  <ng-template #elseBlock>
+                    <img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply" style="max-width: 140px;">
+                  </ng-template>
+                </div>
+              </td>
+              <td>
+                <div class="uk-text-truncate uk-text-capitalize uk-text-italic uk-text-small uk-text-bold" [title]="item.name">
+                  {{item.name}}
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </ng-template>
+  </div>
+</div>

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

@@ -0,0 +1,35 @@
+import {ChangeDetectorRef, Component} from "@angular/core";
+import {ActivatedRoute, Router} from "@angular/router";
+import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
+import {FormBuilder} from "@angular/forms";
+import {BrowseStakeholderBaseComponent} from "../openaireLibrary/monitor/browse-stakeholder/browse-stakeholder-base.component";
+import {Stakeholder} from "../openaireLibrary/monitor/entities/stakeholder";
+import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
+
+@Component({
+  selector: 'browse-stakeholder',
+  templateUrl: 'browse-stakeholders.component.html'
+})
+export class BrowseStakeholdersComponent extends BrowseStakeholderBaseComponent<Stakeholder> {
+  constructor(protected _route: ActivatedRoute,
+              protected _router: Router,
+              protected layoutService: LayoutService,
+              protected cdr: ChangeDetectorRef,
+              protected fb: FormBuilder,
+              private stakeholderService: StakeholderService) {
+    super();
+  }
+
+  ngOnInit() {
+    // TODO: fix metadata
+    this.setMetadata();
+    this.stakeholderType = this._route.snapshot.params.type;
+    super.ngOnInit();
+    this.subscriptions.push(this.stakeholderService.getStakeholderAsObservable().subscribe(data => {
+      // TODO: fix navigateToError() cases depending on the this._route.snapshot.params['type']
+      this.stakeholders = data.umbrella.children[this._route.snapshot.params['type']];
+      this.filteredStakeholders = data.umbrella.children[this._route.snapshot.params['type']];
+      this.showLoading = false;
+    }));
+  }
+}

src/app/browse-stakeholders/browse-stakeholders.module.ts

@@ -0,0 +1,26 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {BrowseStakeholdersComponent} from "./browse-stakeholders.component";
+import {RouterModule, Routes} from "@angular/router";
+import {PreviousRouteRecorder} from "../openaireLibrary/utils/piwik/previousRouteRecorder.guard";
+import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
+import {SearchInputModule} from "../openaireLibrary/sharedComponents/search-input/search-input.module";
+import {InputModule} from "../openaireLibrary/sharedComponents/input/input.module";
+import {PagingModule} from "../openaireLibrary/utils/paging.module";
+import {IconsModule} from "../openaireLibrary/utils/icons/icons.module";
+import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.module";
+import {MonitorComponent} from "../monitor/monitor.component";
+import {Monitor} from "../monitor/monitor";
+
+let routes: Routes = new Monitor(':child').routes;
+routes.splice(0, 0, {path: '', component: BrowseStakeholdersComponent, canDeactivate: [PreviousRouteRecorder], data: {hasSidebar: false}});
+
+@NgModule({
+  imports: [
+    CommonModule, LoadingModule, SearchInputModule, InputModule, PagingModule, IconsModule, LogoUrlPipeModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [BrowseStakeholdersComponent],
+  exports: [BrowseStakeholdersComponent]
+})
+export class BrowseStakeholdersModule {}

src/app/monitor/monitor-routing.module.ts

@@ -1,20 +1,18 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
-import {MonitorComponent} from "./monitor.component";
-import {OpenaireErrorPageComponent} from "../error/errorPage.component";
 import {Monitor} from "./monitor";
 
 let routes: Routes = new Monitor(':stakeholder').routes;
 routes.splice(0, 0, {path: '', redirectTo: '/admin', pathMatch: 'full'});
-/*routes.splice(2, 0, {
+routes.splice(2, 0, {
   path: ':stakeholder/browse/:type',
   loadChildren: () => import('../browse-stakeholders/browse-stakeholders.module').then(m => m.BrowseStakeholdersModule),
   canDeactivate: [PreviousRouteRecorder],
   data: {
     activeMenuItem: "dashboard"
   }
-});*/
+});
 
 @NgModule({
   imports: [

src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit a1c8b2d9fe0b4f227235e5867c83b5f523154f5b
+Subproject commit 91f1dc07809631fff958f4dc3356135362cf1caf

src/assets/monitor-dashboard-custom.less

@@ -59,6 +59,22 @@
   @dashboard-primary-background: @monitor-color;
   @dashboard-menu-section-sublist-border: fade(@monitor-color, 30%);
 
+  /* Umbrella Banner */
+  @banner-background: url('banner.jpg') no-repeat center center / cover;
+  @banner-tab-item-color: @default-color;
+  @banner-tab-item-hover-color: @banner-tab-item-color;
+  @banner-tab-item-active-color: @global-inverse-color;
+  @banner-tab-item-hover-decoration: underline;
+  @banner-tab-item-active-indicator: @monitor-dashboard-background;
+
+  /* Breadcrumbs inside banner */
+  .uk-banner .uk-breadcrumb span {
+    text-decoration: none;
+    background-color: @monitor-color;
+    padding: 5px;
+    border-radius: @global-border-radius;
+  }
+
   & #filters_icon .start {
     stop-color: @monitor-light-color;
   }

src/assets/openaire-theme

@@ -1 +1 @@
-Subproject commit fdbb44cd21351f99af6c8341b5e43dec2b1d9eea
+Subproject commit 99e7fe14bc804271116cc8ee54f2547e4f04034f

src/environments/environment.ts

@@ -19,7 +19,8 @@ let props: EnvProperties = {
   adminToolsCommunity: "monitor",
   useHelpTexts: true,
   baseLink: "/",
-  domain: "http://mpagasas.di.uoa.gr:4600"
+  domain: "http://mpagasas.di.uoa.gr:4600",
+  monitorServiceAPIURL: "http://mpagasas.di.uoa.gr:8888/"
 };
 
 export let properties: EnvProperties = {