[Monitor Dashboard]: 1. Finish manage stakeholders. 2. Remove logos.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@59732 d315682c-612b-4755-9ff5-7f18f6832af3

src/app/app.component.ts

@@ -319,6 +319,18 @@ export class AppComponent implements OnInit, OnDestroy {
     return this.user && (Session.isPortalAdministrator(this.user) || Session.isCommunityCurator(this.user) || Session.isMonitorCurator(this.user) || (this.stakeholder && Session.isManager(this.stakeholder.type, this.stakeholder.alias, this.user)));
   }
   
+  private resolvePageInner() {
+    if(document !== undefined) {
+      let header = document.getElementById('pager_header_content');
+      let inner = document.getElementById('page_content_inner');
+      if(header) {
+        inner.setAttribute('style', '{margin-top:' + header.offsetHeight+ '}');
+      } else {
+        inner.setAttribute('style', '{margin-top:' + 0 + '}');
+      }
+    }
+  }
+  
   public isPublicOrIsMember(visibility: Visibility): boolean {
     if (visibility == "PRIVATE") {
       return false;

src/app/general/general.component.html

@@ -1,5 +1,5 @@
-<div id="page_content">
-  <div id="page_content_inner">
+<div page-content>
+  <div inner>
     <div *ngIf="stakeholder">
       <div class="form-header">
         <div class="uk-flex uk-flex-middle uk-child-width-1-1 uk-child-width-1-2@m uk-grid" uk-grid>

src/app/general/general.module.ts

@@ -10,6 +10,7 @@ import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module
 import {ReactiveFormsModule} from "@angular/forms";
 import {AdminDashboardGuard} from "../utils/adminDashboard.guard";
 import {EditStakeholderModule} from "./edit-stakeholder/edit-stakeholder.module";
+import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
 
 @NgModule({
   declarations: [GeneralComponent],
@@ -21,7 +22,8 @@ import {EditStakeholderModule} from "./edit-stakeholder/edit-stakeholder.module"
     LoadingModule,
     AlertModalModule,
     ReactiveFormsModule,
-    EditStakeholderModule
+    EditStakeholderModule,
+    PageContentModule
   ],
   providers: [
     AdminDashboardGuard, PreviousRouteRecorder,

src/app/manageStakeholders/manageStakeholders.component.css

@@ -0,0 +1,21 @@
+.uk-card {
+  min-height: 270px;
+}
+
+.uk-card-body {
+  padding-top: 75px;
+}
+
+.uk-card-default .name {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.uk-card-default .uk-card-title .logo {
+  display: inline-block;
+  max-width: 80%;
+}
+
+.uk-card-default .uk-card-title .logo > img {
+  max-height: 60px;
+}

src/app/manageStakeholders/manageStakeholders.component.html

@@ -1,14 +1,13 @@
-<div id="page_content">
-  <div id="page_content_inner">
-    <div *ngIf="isCurator()">
-      <ul class="uk-tab customTabs admin" uk-tab>
+<div page-content>
+  <div header>
+    <ul *ngIf="isCurator()" class="uk-tab customTabs admin" uk-tab>
       <li [class.uk-active]="tab === 'managers'"><a (click)="changeTab('all')"><span class="title">All</span></a></li>
-        <li [class.uk-active]="tab === 'members'"><a (click)="changeTab('templates')"><span class="title">Profile templates</span></a></li>
-        <li [class.uk-active]="tab === 'members'"><a (click)="changeTab('profiles')"><span class="title">Profiles</span></a></li>
+      <li [class.uk-active]="tab === 'members'"><a (click)="changeTab('templates')"><span class="title">Profile templates</span></a>
+      </li>
+      <li [class.uk-active]="tab === 'members'"><a (click)="changeTab('profiles')"><span
+          class="title">Profiles</span></a></li>
     </ul>
-
-    </div>
-    <div class="uk-padding-small md-bg-white" uk-grid>
+    <div class="uk-grid uk-margin-medium" uk-grid>
       <div *ngIf="filters" class="uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
         <div>
           <div dashboard-input [formInput]="filters.get('status')"
@@ -18,16 +17,20 @@
       </div>
       <div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right">
         <div class="uk-inline uk-width-medium">
-          <span class="uk-position-center-right"><i class="material-icons">search</i></span>
-          <div dashboard-input [formInput]="filters.get('keyword')" label="Locate profile"></div>
+          <div dashboard-input [formInput]="filters.get('keyword')" label="Locate profile" icon="search"></div>
         </div>
       </div>
     </div>
-    <div *ngIf="tab != 'profiles' && isCurator()" class="uk-margin-top">
-      <h6 class="main">Profile Templates</h6>
-      <div class = "uk-child-width-1-4@m uk-child-width-1-3@s uk-grid-match uk-grid-small"
-         uk-grid>
-      <loading *ngIf="loading"></loading>
+  </div>
+  <div inner>
+    <div *ngIf="loading" class="uk-margin-medium-top uk-padding-large">
+      <loading></loading>
+    </div>
+    <div *ngIf="!loading">
+      <div *ngIf="tab != 'profiles' && isCurator()" class="uk-margin-medium-top">
+        <h6 class="uk-text-bold">Profile Templates</h6>
+        <div class="uk-grid uk-child-width-1-4@m uk-child-width-1-3@s uk-grid-match" uk-grid
+             uk-height-match="target: .name;">
           <ng-template ngFor [ngForOf]="displayDefaultStakeholders" let-stakeholder let-i="index">
             <ng-container *ngTemplateOutlet="stakeholderBox; context: {stakeholder:stakeholder}"></ng-container>
           </ng-template>
@@ -37,11 +40,10 @@
           </div>
         </div>
       </div>
-    <div *ngIf="tab != 'templates' && isManager()" class="uk-margin-top">
-      <h6 class="">Profiles</h6>
-      <div class="uk-grid-match uk-grid-small uk-child-width-1-4@m uk-child-width-1-3@s"
-         uk-grid>
-      <loading *ngIf="loading"></loading>
+      <div *ngIf="tab != 'templates' && isManager()" class="uk-margin-large-top">
+        <h6 class="uk-text-bold">Profiles</h6>
+        <div class="uk-grid uk-grid-match uk-child-width-1-4@m uk-child-width-1-3@s" uk-grid uk-grid
+             uk-height-match="target: .name;">
           <ng-template ngFor [ngForOf]="displayStakeholders" let-stakeholder let-i="index">
             <ng-container *ngTemplateOutlet="stakeholderBox; context: {stakeholder:stakeholder}"></ng-container>
           </ng-template>
@@ -54,18 +56,18 @@
       </div>
     </div>
   </div>
+</div>
 
 <ng-template #stakeholderBox let-stakeholder="stakeholder">
-  <div>
-    <div *ngIf="stakeholder" class="uk-card uk-card-default">
-      <div class="uk-padding-small uk-padding-remove-bottom">
-        <div class="md-card-toolbar-actions uk-float-right"  >
-          <div class="md-card-dropdown uk-inline clickable">
+  <div *ngIf="stakeholder">
+    <div class="uk-card uk-card-default uk-card-body uk-position-relative">
+      <div class="uk-position-top-right uk-margin-small-right uk-margin-small-top clickable">
         <i uk-icon="more-vertical"
            (click)="$event.stopPropagation();$event.preventDefault()"></i>
         <div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false">
           <ul class="uk-nav uk-dropdown-nav">
-                <li><a (click)="$event.stopPropagation();editStakeholder(stakeholder, !stakeholder.defaultId);hide(element);$event.preventDefault()">Edit</a>
+            <li><a
+                (click)="$event.stopPropagation();editStakeholder(stakeholder, !stakeholder.defaultId);hide(element);$event.preventDefault()">Edit</a>
             </li>
             <ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
               <li *ngIf="stakeholder.visibility != v.value"><a (click)="changeStakeholderStatus(stakeholder, v.value);
@@ -80,51 +82,52 @@
           </ul>
         </div>
       </div>
-        </div>
-        <div class="md-card-dropdown uk-inline clickable visibility">
-          <i [attr.uk-icon]="stakeholderUtils.visibilityIcon.get(stakeholder.visibility)"
-             (click)="$event.stopPropagation();$event.preventDefault()"></i>
-          <div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false">
+      <div class="uk-position-top-left uk-margin-small-left uk-margin-small-top clickable visibility">
+          <span class="clickable color">
+            <icon [name]="stakeholderUtils.visibilityIcon.get(stakeholder.visibility)"></icon>
+          </span>
+        <div #element uk-dropdown="mode: click; pos: bottom-left; delay-hide: 0; flip: false">
           <ul class="uk-nav uk-dropdown-nav">
-              <li *ngFor="let v of stakeholderUtils.visibility" [class.selectedVisibility]="v.value ==
-              stakeholder.visibility">
-              <a
-                *ngIf="stakeholder.visibility != v.value"
+            <li *ngFor="let v of stakeholderUtils.visibility">
+              <a *ngIf="stakeholder.visibility != v.value"
                  (click)="$event.stopPropagation();changeStakeholderStatus(stakeholder,v.value);hide(element);$event.preventDefault()">
-                <i [attr.uk-icon]="stakeholderUtils.visibilityIcon.get( v.value)"></i> {{v.label}}</a>
+                <icon [name]="stakeholderUtils.visibilityIcon.get(v.value)" ratio="0.8"></icon>
+                <span> {{v.label}}</span>
+              </a>
               <a *ngIf="stakeholder.visibility == v.value">
-                <i [attr.uk-icon]="stakeholderUtils.visibilityIcon.get( v.value)"></i> {{v.label}} <icon
-                customClass="uk-text-secondary uk-float-right" [ratio]="0.5"
-                name="bullet"></icon></a>
+                <icon [name]="stakeholderUtils.visibilityIcon.get(v.value)" [ratio]="0.8"></icon>
+                <span> {{v.label}}</span>
+                <span class="uk-position-center-right">
+                  <icon customClass="uk-text-secondary" [ratio]="0.5" name="bullet"></icon>
+                </span>
+              </a>
             </li>
-
           </ul>
         </div>
       </div>
-      </div>
-      <div class="uk-padding-small">
-        <a class="" [routerLink]="stakeholder.alias">
-          <div class="uk-flex uk-flex-center">
+      <a class="uk-display-block uk-text-center uk-card-title" [routerLink]="stakeholder.alias">
+        <div class="name uk-width-2-3@l">
           {{stakeholder.name}}
         </div>
-        </a>
+        <div *ngIf="stakeholder.logoUrl" class="logo uk-margin-medium-top">
+          <img *ngIf="stakeholder.isUpload" [src]="properties.utilsService + '/download/' + stakeholder.logoUrl">
+          <img *ngIf="!stakeholder.isUpload" [src]="stakeholder.logoUrl">
         </div>
+      </a>
     </div>
   </div>
 </ng-template>
 
 <ng-template #newBox let-text="text" let-isDefault="isDefault">
   <div *ngIf="!loading">
-    <div class="uk-card uk-card-default clickable" (click)="editStakeholder(null, isDefault)">
-      <div class="uk-card-body">
-        <div>
-          <div class="uk-width-1-1">
+    <div class="uk-card uk-card-default uk-text-center uk-card-body clickable" (click)="editStakeholder(null, isDefault)">
+      <div class="uk-text-small uk-text-muted">
         {{text}}
       </div>
-          <div class="uk-width-1-1 uk-flex uk-flex-center">
-            <i class="material-icons md-48" uk-icon="plus"></i>
-          </div>
-        </div>
+      <div class="uk-margin-medium-top">
+        <span class="uk-text-secondary">
+          <icon name="add" [ratio]="3"></icon>
+        </span>
       </div>
     </div>
   </div>
@@ -133,6 +136,6 @@
              id="edit_modal" [large]="true"
              (alertOutput)="editStakeholderComponent.save(callback)"
              [okDisabled]="editStakeholderComponent.disabled">
-  <edit-stakeholder #editStakeholderComponent [maxHeight]="'70vh'"></edit-stakeholder>
+  <edit-stakeholder #editStakeholderComponent></edit-stakeholder>
 </modal-alert>
 <modal-alert #deleteStakeholderModal (alertOutput)="deleteStakeholder()"></modal-alert>

src/app/manageStakeholders/manageStakeholders.component.ts

@@ -17,7 +17,8 @@ declare var UIkit;
 
 @Component({
   selector: 'home',
-  templateUrl: "./manageStakeholders.component.html"
+  templateUrl: "./manageStakeholders.component.html",
+  styleUrls: ['manageStakeholders.component.css']
 })
 export class ManageStakeholdersComponent implements OnInit, OnDestroy {
   
@@ -54,6 +55,7 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
   @ViewChild('editStakeholderComponent') editStakeholderComponent: EditStakeholderComponent;
   
   tab: "all" | "templates" | "profiles" = "all";
+  
   constructor(private stakeholderService: StakeholderService,
               private userManagementService: UserManagementService,
               private propertiesService: EnvironmentSpecificService,
@@ -138,8 +140,10 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
     if (value === null || value === '') {
       return stakeholders;
     } else {
-      return stakeholders.filter(stakeholder => (
-        stakeholder.index_id && stakeholder.index_id.toLowerCase().includes(value.toLowerCase())) ||
+      return stakeholders.filter(stakeholder =>
+        stakeholder.name && stakeholder.name.toLowerCase().includes(value.toLowerCase()) ||
+        stakeholder.type && stakeholder.type.toLowerCase().includes(value.toLowerCase()) ||
+        stakeholder.index_id && stakeholder.index_id.toLowerCase().includes(value.toLowerCase()) ||
         stakeholder.index_shortName && stakeholder.index_shortName.toLowerCase().includes(value.toLowerCase()) ||
         stakeholder.index_name && stakeholder.index_name.toLowerCase().includes(value.toLowerCase())
       );
@@ -207,6 +211,7 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
       }
     });
   }
+  
   changeStakeholderStatus(stakeholder: Stakeholder, visibility: Visibility) {
     let path = [
       stakeholder._id
@@ -215,6 +220,7 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
       stakeholder.isActive = isActive;
     });
   }
+  
   toggleStakeholderStatus(stakeholder: Stakeholder) {
     let path = [
       stakeholder._id
@@ -232,18 +238,23 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
       stakeholder.isPublic = isPublic;
     });
   }
+  
   public isManager(): boolean {
     return this.isCurator() || (Session.isKindOfMonitorManager(this.user));
   }
+  
   public isProfileManager(stakeholder: Stakeholder): boolean {
     return this.isCurator() || (Session.isManager(stakeholder.type, stakeholder.alias, this.user));
   }
+  
   public isCurator(): boolean {
     return this.isAdmin() || Session.isCommunityCurator(this.user) || Session.isMonitorCurator(this.user);
   }
+  
   public isAdmin(): boolean {
     return Session.isPortalAdministrator(this.user);
   }
+  
   changeTab(tab: "all" | "templates" | "profiles") {
     this.tab = tab;
   }

src/app/manageStakeholders/manageStakeholders.module.ts

@@ -11,8 +11,9 @@ import {ReactiveFormsModule} from "@angular/forms";
 import {EditStakeholderModule} from "../general/edit-stakeholder/edit-stakeholder.module";
 import {IconsModule} from "../openaireLibrary/utils/icons/icons.module";
 import {IconsService} from "../openaireLibrary/utils/icons/icons.service";
-import {bullet} from "../openaireLibrary/utils/icons/icons";
+import {add, bullet, earth, group, lock, search} from "../openaireLibrary/utils/icons/icons";
 import {LoginGuard} from "../openaireLibrary/login/loginGuard.guard";
+import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
 
 @NgModule({
   declarations: [ManageStakeholdersComponent],
@@ -25,7 +26,8 @@ import {LoginGuard} from "../openaireLibrary/login/loginGuard.guard";
     AlertModalModule,
     ReactiveFormsModule,
     EditStakeholderModule,
-    IconsModule
+    IconsModule,
+    PageContentModule
   ],
   providers: [
     LoginGuard, PreviousRouteRecorder,
@@ -34,6 +36,6 @@ import {LoginGuard} from "../openaireLibrary/login/loginGuard.guard";
 })
 export class ManageStakeholdersModule {
   constructor(private iconsService: IconsService) {
-    this.iconsService.registerIcons([bullet]);
+    this.iconsService.registerIcons([bullet, search, earth, group, lock, add]);
   }
 }

src/app/monitor/monitor.component.html

@@ -40,9 +40,8 @@
   </ng-container>
   <!--  </div>-->
 </ng-template>
-<div id="page_content" [class.greyOut]="filterToggle" (click)=" (filterToggle)?filterToggle = false:filterToggle">
-  <div *ngIf="activeTopic && activeTopic.categories.length > 1" id="page_content_header">
-    <div class="uk-margin-large-left">
+<div page-content [class.greyOut]="filterToggle" (click)=" (filterToggle)?filterToggle = false:filterToggle">
+  <div *ngIf="activeTopic && activeTopic.categories.length > 1" header>
     <nav class=" ">
       <div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="">
         <ul
@@ -75,8 +74,7 @@
       <ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:true}"></ng-container>
     </div>
   </div>
-  </div>
-  <div id="page_content_inner" class="">
+  <div id="page_content_inner" inner>
     <div class=" indicators">
       <div *ngIf="privateStakeholder">
         <div class="uk-text-center uk-height-medium">

src/app/monitor/monitor.module.ts

@@ -21,12 +21,13 @@ import {ClickModule} from "../openaireLibrary/utils/click/click.module";
 import {BottomModule} from "../openaireLibrary/sharedComponents/bottom.module";
 import {RangeFilterModule} from "../openaireLibrary/utils/rangeFilter/rangeFilter.module";
 import {SearchFilterModule} from "../openaireLibrary/searchPages/searchUtils/searchFilter.module";
+import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
 
 @NgModule({
   imports: [
     CommonModule, FormsModule, RouterModule, ErrorMessagesModule,
     HelperModule, Schema2jsonldModule, SEOServiceModule, MonitorRoutingModule, SideBarModule, InputModule,
-    UserMiniModule, ClickModule, BottomModule, RangeFilterModule, SearchFilterModule
+    UserMiniModule, ClickModule, BottomModule, RangeFilterModule, SearchFilterModule, PageContentModule
   ],
   declarations: [
     MonitorComponent

src/app/topic/topic.component.html

@@ -69,9 +69,8 @@
     <span class="uk-position-center" *ngIf="open" uk-icon="icon: chevron-left; ratio:1.5"></span>
   </div>
 </aside>
-<div id="page_content">
-  <div *ngIf="stakeholder" id="page_content_header">
-    <div class="uk-margin-large-left">
+<div *ngIf="stakeholder" page-content>
+  <div header>
     <nav class=" ">
       <div *ngIf="stakeholder  && stakeholder.topics[topicIndex]" class="">
         <ul *ngIf="stakeholder.topics[topicIndex] && stakeholder.topics[topicIndex].categories.length > 0"
@@ -137,7 +136,7 @@
               <span class="uk-invisible-hover uk-position-center-right color"
                     (click)="$event.stopPropagation();$event.preventDefault()">
                   <span class="clickable" uk-icon="more-vertical"></span>
-                  <div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false">
+                  <div #element uk-dropdown="mode: click; pos: bottom-right; offset: 10; delay-hide: 0; flip: false">
                     <ul class="uk-nav uk-dropdown-nav">
                       <li><a (click)="editSubCategoryOpen(i); hide(element)">Edit</a></li>
                       <ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
@@ -168,9 +167,8 @@
       </li>
     </ul>
   </div>
-  </div>
-  <div id="page_content_inner">
-    <indicators *ngIf="stakeholder" [properties]="properties"
+  <div inner>
+    <indicators [properties]="properties"
                 [topicIndex]="topicIndex"
                 [categoryIndex]="categoryIndex"
                 [subcategoryIndex]="subCategoryIndex"></indicators>

src/app/topic/topic.module.ts

@@ -17,11 +17,12 @@ import {AdminDashboardGuard} from "../utils/adminDashboard.guard";
 import {IconsService} from "../openaireLibrary/utils/icons/icons.service";
 import {preview, bullet, add, earth, lock, group} from "../openaireLibrary/utils/icons/icons";
 import {IconsModule} from "../openaireLibrary/utils/icons/icons.module";
+import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
 
 @NgModule({
   imports: [
     CommonModule, TopicRoutingModule, ClickModule, RouterModule, FormsModule, AlertModalModule,
-    ReactiveFormsModule, InputModule, IconsModule
+    ReactiveFormsModule, InputModule, IconsModule, PageContentModule
   ],
   declarations: [
     TopicComponent, IndicatorsComponent

src/app/users/users.component.html

@@ -1,9 +1,7 @@
-<div id="page_content">
-  <div *ngIf="loading" class="uk-section">
+<div *ngIf="loading" page-content>
+  <div inner>
     <loading></loading>
   </div>
-  <div *ngIf="!loading && alias" class="uk-padding">
-    <dashboard-users [id]="alias" [name]="name" [type]="type" [link]="link"></dashboard-users>
-  </div>
 </div>
+<dashboard-users *ngIf="!loading && alias" [id]="alias" [name]="name" [type]="type" [link]="link"></dashboard-users>
 

src/app/users/users.module.ts

@@ -5,9 +5,10 @@ import {UsersRoutingModule} from "./users-routing.module";
 import {AdminDashboardGuard} from "../utils/adminDashboard.guard";
 import {DashboardUsersModule} from "../openaireLibrary/dashboard/users/dashboard-users.module";
 import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
+import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
 
 @NgModule({
-  imports: [CommonModule, UsersRoutingModule, DashboardUsersModule, LoadingModule],
+  imports: [CommonModule, UsersRoutingModule, DashboardUsersModule, LoadingModule, PageContentModule],
   declarations: [UsersComponent],
   exports: [UsersComponent],
   providers: [AdminDashboardGuard]

src/assets/dashboard-theme/card.css

@@ -8,6 +8,17 @@
   padding: 19px 25px;
 }
 
+.uk-card-body .uk-card-title {
+  font-size: var(--font-size);
+  font-family: "Roboto", sans-serif;
+  font-weight: 700;
+  color: var(--muted-color) !important;
+}
+
+.uk-card-body a.uk-card-title:hover, .uk-card-body a.uk-card-title:active, .uk-card-body a.uk-card-title:focus {
+  color: var(--secondary-color) !important;
+}
+
 .uk-card .uk-grid-divider>:not(.uk-first-column)::before {
   border-left: 1px solid currentColor;
   opacity: 0.2;

src/assets/dashboard-theme/dropdowns.css

@@ -5,7 +5,7 @@
   text-align: left;
 }
 
-.sidebar_main_swipe.sidebar_mini .uk-dropdown {
+.sidebar_main_swipe.sidebar_mini #sidebar_content .uk-dropdown {
   min-width: auto;
 }
 
@@ -16,24 +16,14 @@
 
 .uk-dropdown-nav > li > a, .uk-dropdown-nav > li:hover > a {
   padding: 3px 10px;
-  color: rgb(var(--text-color));
+  color: var(--text-color);
   font-weight: 400 !important;
   font-size: var(--xs-font-size);
   font-family: "Open Sans", sans-serif;
 }
 
-.uk-dropdown-nav > li, .uk-dropdown-nav > li > a  {
-  position: relative;
-}
-
-.uk-dropdown-nav > li:hover::before {
-  content: "";
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  left: 0;
-  background-color: var(--secondary-color);
-  opacity: 0.3;
+.uk-dropdown-nav > li:hover {
+  background-color: rgba(var(--secondary-color-rgb), 0.3);
 }
 
 .uk-dropdown .uk-nav-divider {

src/assets/dashboard-theme/structure.css

@@ -53,7 +53,7 @@
 #sidebar_main .menu_section ul:not(.uk-dropdown-nav) > li > a, #sidebar_main .special_section ul:not(.uk-dropdown-nav) > li > a {
   display: block;
   font-size: var(--sidebar-font-size);
-  color: rgba(var(--text-color), 0.5);
+  color: rgba(var(--text-color-rgb), 0.5);
 }
 
 #sidebar_main .menu_section  ul:not(.uk-dropdown-nav) > li:hover > a, #sidebar_main .special_section  ul:not(.uk-dropdown-nav) > li:hover > a {
@@ -70,7 +70,7 @@
   transform: translateY(-50%);
   position: fixed;
   background: #ffffff;
-  border: 1px solid rgb(var(--text-color));
+  border: 1px solid var(--text-color);
   border-left: 0;
   cursor: pointer;
   padding: 0 4px;
@@ -123,7 +123,7 @@
 }
 
 #sidebar_main #sidebar_content {
-  border-right: 1px solid rgb(var(--text-color));
+  border-right: 1px solid var(--text-color);
 }
 
 #page_content {
@@ -131,21 +131,27 @@
   background-color: var(--background-color);
 }
 
-#page_content_header + #page_content_inner {
-  margin-top: 100px;
-}
-
 #page_content_header {
   position: fixed;
   background: var(--background-color);
   top: var(--header-height);
   z-index: 980;
-  width: 100%;
-  height: 100px;
+  width: calc(100% - var(--sidebar-width) - 180px);
+  padding: 0 90px;
+  transition-property: width;
+  transition: 0.5s;
+  -webkit-transition: 0.5s;
+  -moz-transition: 0.5s;
+  -ms-transition: 0.5s;
+  -o-transition: 0.5s;
+}
+
+.sidebar_mini #page_content_header{
+  width: calc(100vw - var(--sidebar-mini-width) - 200px);
 }
 
 #page_content_inner {
-  padding: 90px;
+  padding: 50px 90px 90px;
 }
 
 navbar > * {

src/assets/dashboard-theme/tabs-pills.css

@@ -16,7 +16,7 @@
 .uk-subnav-pill > * > *, .uk-subnav > * > *:first-child {
   text-transform: none;
   font-size: var(--font-size);
-  color: rgb(var(--text-color));
+  color: var(--text-color);
 }
 
 .uk-subnav-pill > li > a:hover, .uk-subnav-pill > li > span > a:hover {
@@ -35,7 +35,7 @@
 }
 
 .uk-tab > li > a {
-  color: rgb(var(--text-color), 0.5) !important;
+  color: rgb(var(--text-color-rgb), 0.5) !important;
   font-size: var(--small-font-size);
   font-family: "Open Sans", sans-serif !important;
   text-transform: capitalize;
@@ -62,8 +62,6 @@
   border-bottom: none !important;
 }
 
-/*dashboard tabs*/
-
 .customTabs.uk-tab.admin > li.uk-active > a .title {
   border-bottom: 3px solid var(--portal-main-color);
   margin-left: 3px;

src/assets/dashboard-theme/text.css

@@ -1,6 +1,7 @@
 :root {
   --font-size: 16px;
-  --text-color: 26,26,26;
+  --text-color: #1A1A1A;
+  --text-color-rgb: 26,26,26;
   --muted-color: #4D4D4D;
   --xs-font-size: 12px;
   --small-font-size: 14px;
@@ -8,13 +9,13 @@
 }
 
 body {
-  color: rgb(var(--text-color));
+  color: var(--text-color);
   font-size: var(--font-size);
   font-family: "Open Sans", sans-serif;
 }
 
 .color {
-  color: rgb(var(--text-color));
+  color: var(--text-color) !important;
 }
 
 .uk-text-small {
@@ -26,11 +27,11 @@ body {
 }
 
 .uk-text-muted {
-  color: var(--muted-color);
+  color: var(--muted-color) !important;
 }
 
 .uk-logo {
   font-family: "Roboto", sans-serif;
   font-size: 24px;
-  color: rgb(var(--text-color));
+  color: var(--text-color);
 }

src/assets/dashboard-theme/variables.css

@@ -4,11 +4,15 @@
   --portal-dark-color: #7c9144;
   --primary-color: var(--theme-primary-color);
   --secondary-color: var(--theme-secondary-color);
+  --primary-color-rgb: var(--theme-primary-color-rgb);
+  --secondary-color-rgb: var(--theme-secondary-color-rgb);
   --contrast-color: white;
 
   /* Portable Variables*/
   --theme-primary-color: #222080;
-  --theme-secondary-color: #4686E5;
+  --theme-secondary-color: #4686e5;
+  --theme-primary-color-rgb: 34,31,128;
+  --theme-secondary-color-rgb: 70,134,229;
   --openaire-main-color: #313179;
   --explore-portal-color: #D95F2D;
   --provide-portal-color: #37C7E9;

src/assets/new.css

@@ -7,15 +7,20 @@
 .stakeholderPage {
   --primary-color: var(--theme-secondary-color);
   --secondary-color: var(--theme-secondary-color);
+  --primary-color-rgb: var(--theme-secondary-color-rgb);
+  --secondary-color-rgb: var(--theme-secondary-color-rgb);
 }
+
 /*Stakeholder Specific*/
 .publicationsSearchForm {
   background-image: none;
 }
+
 .stakeholderPage #page_content > div, .stakeholderPage #page_content .uk-navbar-container {
   background-color: #F9FBFC !important;
   box-shadow: none;
 }
+
 /*.stakeholderPage #header_main, .stakeholderPage .uk-sticky.uk-navbar-container {*/
 /*    background: #F9FBFC !important;*/
 /*}*/
@@ -27,6 +32,7 @@
   background-attachment: fixed;
 
 }
+
 /*General*/
 .stakeholderPage {
   background: #F9FBFC !important;
@@ -36,6 +42,7 @@
   box-sizing: border-box;
   padding: 16px;
 }
+
 #style_switcher_toggle {
   top: 320px !important;
   position: fixed;
@@ -49,6 +56,7 @@
   box-sizing: border-box;
   /*z-index: 981;*/
 }
+
 #filters_switcher_toggle {
   top: 320px !important;
   position: fixed;
@@ -71,7 +79,7 @@
 /*}*/
 /*Sidebar Header logo */
 #sidebar_main .sidebar_main_header .portalLogo {
-    background: url("/assets/logo-large-monitor.png") no-repeat;
+  background: url("/assets/common-assets/logo-large-monitor.png") no-repeat;
   background-size: contain;
   margin-left: 35px;
   margin-top: 5px;
@@ -79,9 +87,12 @@
 }
 
 .sidebar_mini #sidebar_main .sidebar_main_header .portalLogo {
-    background: url("/assets/logo-small-monitor.png") no-repeat !important;
-    background-size: 50px 50px !important;
+  background: url("/assets/common-assets/logo-small-monitor.png") no-repeat;
+  background-size: contain;
+  margin-right: 15px;
+  margin-left: 15px;
 }
+
 /*Sidebar Rotation*/
 
 .stakeholderPage #sidebar_main .menu_section > ul > li.uk-active {
@@ -99,6 +110,7 @@
   transform: rotate(-90deg);
   margin: 63px auto 63px auto;
 }
+
 .stakeholderPage #sidebar_main .menu_section > ul > li {
   transition: 0.70s;
   -webkit-transition: 0.70s;
@@ -126,6 +138,7 @@
 .stakeholderPage #sidebar_main #sidebar_content, .stakeholderPage #sidebar_switcher_toggle {
   border-color: var(--monitor-portal-color);
 }
+
 /* Section Tools*/
 
 .dashboard .section {
@@ -166,12 +179,10 @@
 }
 
 .dashboard .section:hover .tools .actions a:last-child {
-    margin-left: 3px
-;
+  margin-left: 3px;
 }
 
 
-
 /* New section*/
 .dashboard .new-section {
   padding-top: 10px;
@@ -205,6 +216,7 @@
   transform: translate(-50%, -50%);
   margin: 0;
 }
+
 /*Search */
 #searchFormPanel {
   margin-top: 30px;
@@ -217,11 +229,11 @@
 }
 
 .visibility {
-    border-right: 1px solid var(--secondary-color);
-    border-bottom: 1px solid var(--secondary-color);
+  border-right: 1px solid rgba(var(--secondary-color-rgb), 0.5);
+  border-bottom: 1px solid rgba(var(--secondary-color-rgb), 0.5);
   padding: 10px 8px;
   margin-right: 4px;
-    color: rgba(var(--text-color), 0.5);
+  color: rgba(var(--text-color-rgb), 0.5);
 }
 
 .visibility.small {