[Monitor Dashaboard | Trunk]: 1. Add window resize method. 2. Some changes on stakeholder's page. 3. Make width of sidebar smaller.

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

src/app/app.component.html

@@ -1,4 +1,3 @@
-<!--disable_transitions -->
 <div *ngIf="loading == true">
   <loading [full]="true"></loading>
 </div>

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectorRef, Component, OnDestroy, OnInit} from '@angular/core';
+import {ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit} from '@angular/core';
 import {ActivatedRoute, NavigationEnd, Params, Router} from '@angular/router';
 import {EnvProperties} from './openaireLibrary/utils/properties/env-properties';
 import {EnvironmentSpecificService} from './openaireLibrary/utils/properties/environment-specific.service';
@@ -72,6 +72,16 @@ export class AppComponent implements OnInit, OnDestroy {
     }));
   }
   
+  @HostListener('window:resize', ['$event'])
+  onResize(event) {
+    if(this.layoutService.isSmallScreen && event.target.innerWidth > 1219) {
+      this.layoutService.setSmallScreen(false);
+    } else if(!this.layoutService.isSmallScreen && event.target.innerWidth < 1219) {
+      this.layoutService.setSmallScreen(true);
+      this.layoutService.setOpen(false);
+    }
+  }
+  
   ngOnInit() {
     if (typeof document !== 'undefined' && window) {
       this.innerWidth = window.innerWidth;

src/app/monitor/monitor.component.html

@@ -41,7 +41,7 @@
   <!--  </div>-->
 </ng-template>
 <div page-content [class.greyOut]="filterToggle" (click)=" (filterToggle)?filterToggle = false:filterToggle">
-  <div *ngIf="activeTopic && activeTopic.categories.length > 1" header>
+  <div *ngIf="activeTopic && activeTopic.categories.length > 0" header>
     <nav class=" ">
       <div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="">
         <ul
@@ -50,9 +50,9 @@
             <li *ngIf="isPublicOrIsMember(category.visibility)"
                 [class.uk-active]="category.alias ===
                  activeCategory.alias">
-              <a (click)="navigateTo(stakeholder.alias,activeTopic.alias, category.alias)"
+              <a (click)="navigateTo(stakeholder.alias,activeTopic.alias, category.alias)">
-                 class="uk-margin-remove-bottom uk-h4"
+                <span class="title">{{category.name}}</span>
-              ><span class="title">{{category.name}}</span></a>
+              </a>
             </li>
           </ng-template>
         </ul>
@@ -64,21 +64,21 @@
         <li *ngIf="isPublicOrIsMember(subCategory.visibility)"
             [ngClass]="(subCategory.alias === activeSubCategory.alias)?'uk-active':''">
           <a (click)="navigateTo(stakeholder.alias,activeTopic.alias,activeCategory.alias, subCategory.alias)"
-             class="uk-margin-remove-bottom uk-h3"
+             class="uk-margin-remove-bottom"
           ><span>{{subCategory.name}}</span></a>
         </li>
       </ng-template>
     </ul>
-    <div *ngIf="countSelectedFilters() > 0" class="uk-grid uk-grid-small uk-margin-bottom">
+    <div *ngIf="countSelectedFilters() > 0" class="uk-grid uk-grid-small uk-margin-bottom uk-text-small">
       <span class="uk-grid-margin">Filters: </span>
       <ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:true}"></ng-container>
     </div>
   </div>
-  <div id="page_content_inner" inner>
+  <div inner>
-    <div class=" indicators">
+    <div [class.uk-padding]="!isSmallScreen" class="uk-padding-remove-vertical">
       <div *ngIf="privateStakeholder">
         <div class="uk-text-center uk-height-medium">
-          <div class="uk-h3 "><i>
+          <h3><i>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="24px" height="24px">
               <path d="M0 0h24v24H0z" fill="none"/>
               <path
@@ -86,7 +86,7 @@
             </svg>
           </i>
             Private data
-          </div>
+          </h3>
           <div class="uk-text-large "></div>
         </div>
       </div>
@@ -100,7 +100,7 @@
           (activeCategory && activeCategory.description && activeCategory.description.length > 0) ||
           (activeTopic && activeTopic.description && activeTopic.description.length > 0))"
             class="uk-text-center">
-          <div class="uk-h5 uk-height-small uk-margin-large-top uk-margin-xlarge-right  uk-margin-xlarge-left">
+          <div class="uk-height-small uk-margin-large-top uk-margin-xlarge-right  uk-margin-xlarge-left">
             {{activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0 ? activeSubCategory.description
               : (activeCategory && activeCategory.description && activeCategory.description.length > 0 ? activeCategory.description :
                   (activeTopic.description && activeTopic.description.length > 0 ? activeTopic.description : ""))}}
@@ -115,9 +115,9 @@
                       (activeSubCategory.charts.length == 0 || (activeSubCategory.charts.length == 1 && activeSubCategory.charts[0].indicators.length == 0))
                     ) || !activeTopic || !activeCategory || !activeSubCategory)">
           <div class=" uk-text-center">
-            <div class="uk-h3">
+            <h3>
               No indicators available yet. Stay tuned!
-            </div>
+            </h3>
           </div>
         </div>
         <div *ngIf="activeSubCategory" class="uk-grid uk-grid-medium uk-margin-bottom uk-margin-top"
@@ -233,9 +233,10 @@
     </div>
     <div class="uk-padding">
       <div class="uk-grid uk-flex uk-flex-middle">
-        <div class="uk-h4 ">Filters</div>
+        <h5>Filters</h5>
         <a *ngIf="countSelectedFilters() > 1"
-           class="  portal-link uk-width-1-2" (click)="clearAll()"> Clear All </a></div>
+           class="  portal-link uk-width-1-2" (click)="clearAll()"> Clear All </a>
+      </div>
       <div class="uk-grid uk-grid-small uk-text-small" uk-grid>
         <ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:false}"></ng-container>
       </div>

src/app/monitor/monitor.component.ts

@@ -60,9 +60,18 @@ export class MonitorComponent implements OnInit, OnDestroy {
   public routerHelper: RouterHelper = new RouterHelper();
   filters: Filter[] = [];
   queryParams = {};
-  periodFilter:RangeFilter = { title: "Time range",  filterId: "year", originalFilterIdFrom: null, originalFilterIdTo: null, selectedFromValue: null, selectedToValue: null, selectedFromAndToValues: ""};
+  periodFilter: RangeFilter = {
+    title: "Time range",
+    filterId: "year",
+    originalFilterIdFrom: null,
+    originalFilterIdTo: null,
+    selectedFromValue: null,
+    selectedToValue: null,
+    selectedFromAndToValues: ""
+  };
   privateStakeholder = false;
   public keyword: FormControl;
+  
   constructor(
     private route: ActivatedRoute,
     private _router: Router,
@@ -115,17 +124,33 @@ export class MonitorComponent implements OnInit, OnDestroy {
               this.stakeholder = stakeholder;
               // add fl0 filter only for EC
               if (this.stakeholder.index_id == "ec__________::EC") {
-                this.filters.push({title: "Funding Stream",filterId: "relfundinglevel0_id",originalFilterId: "relfundinglevel0_id", countSelectedValues: 0,
+                this.filters.push({
-                  values:[{name: "EC|FP7", id: "ec__________::EC::FP7", selected:  false, number: 0}, {name: "EC|H2020", id: "ec__________::EC::H2020", selected:  false, number: 0}]
+                  title: "Funding Stream",
-                  ,filterOperator: "or", valueIsExact: true, filterType: "radio", radioValue:""});
+                  filterId: "relfundinglevel0_id",
+                  originalFilterId: "relfundinglevel0_id",
+                  countSelectedValues: 0,
+                  values: [{name: "EC|FP7", id: "ec__________::EC::FP7", selected: false, number: 0}, {
+                    name: "EC|H2020",
+                    id: "ec__________::EC::H2020",
+                    selected: false,
+                    number: 0
+                  }]
+                  ,
+                  filterOperator: "or",
+                  valueIsExact: true,
+                  filterType: "radio",
+                  radioValue: ""
+                });
               }
               if (this.stakeholder.type == "funder") {
                 // this.filters.push({title: "Co-funded research outcomes",filterId: "co-funded",originalFilterId: "co-funded", countSelectedValues: 0,
                 //   values:[{name: "true", id: "co-funded", selected:  false, number: 0}, {name: "false", id: "no-co-funded", selected:  false, number: 0}]
                 //   ,filterOperator: "or", valueIsExact: true, filterType: "radio", radioValue:""});
-                this.filters.push({title: "Co-funded",filterId: "co-funded",originalFilterId: "co-funded", countSelectedValues: 0,
+                this.filters.push({
+                  title: "Co-funded", filterId: "co-funded", originalFilterId: "co-funded", countSelectedValues: 0,
                   values: [{name: "Co-funded research output", id: "co-funded-results", selected: false, number: 0}]
-                  ,filterOperator: "or", valueIsExact: true, filterType: "checkbox", radioValue:""});
+                  , filterOperator: "or", valueIsExact: true, filterType: "checkbox", radioValue: ""
+                });
               }
               this.initializeFilters();
               this.seoService.createLinkForCanonicalURL(url, false);
@@ -162,6 +187,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
     }));
     
   }
+  
   private initializeFilters() {
     this.periodFilter.selectedFromValue = (this.queryParams['year'] && this.queryParams['year'].indexOf("range") == 0) ? this.queryParams['year'].split("range")[1].split(":")[0] : "";
     this.periodFilter.selectedToValue = (this.queryParams['year'] && this.queryParams['year'].indexOf("range") == 0) ? this.queryParams['year'].split("range")[1].split(":")[1] : "";
@@ -182,6 +208,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
     }
     
   }
+  
   private validateYearRange(navigateTo: boolean = false) {
     let validYears = true;
     
@@ -208,6 +235,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
       this.setIndicators();
     }
   }
+  
   clearAll() {
     for (let filter of this.filters) {
       this.clearfFilter(filter);
@@ -216,6 +244,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
     this.periodFilter.selectedToValue = "";
     this.validateYearRange(true)
   }
+  
   clearfFilter(filter: Filter) {
     filter.countSelectedValues = 0;
     filter.radioValue = "";
@@ -228,6 +257,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
       delete this.queryParams[filter.filterId];
     }
   }
+  
   countSelectedFilters(): number {
     let count = 0;
     if (this.periodFilter.selectedFromAndToValues.length > 0) {
@@ -238,6 +268,11 @@ export class MonitorComponent implements OnInit, OnDestroy {
     }
     return count;
   }
+  
+  public get isSmallScreen() {
+    return this.layoutService.isSmallScreen;
+  }
+  
   public get open() {
     return this.layoutService.open;
   }
@@ -319,6 +354,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
   filter() {
     this.validateYearRange(true);
   }
+  
   filterChanged($event, navigate: boolean = true) {
     let selected = "";
     for (let value of $event.value.values) {
@@ -338,18 +374,21 @@ export class MonitorComponent implements OnInit, OnDestroy {
     }
     
   }
+  
   private getfl0() {
     if (this.queryParams["relfundinglevel0_id"] && this.filters.length > 0) {
       return this.queryParams["relfundinglevel0_id"].split("::")[this.queryParams["relfundinglevel0_id"].split("::").length - 1];
     }
     return null;
   }
+  
   private getCoFunded() {
     if (this.queryParams["co-funded"] && this.filters.length > 0) {
       return this.queryParams["co-funded"] && this.queryParams["co-funded"] == "co-funded-results";
     }
     return false;
   }
+  
   clearPeriodFilter() {
     if (this.periodFilter.selectedFromValue || this.periodFilter.selectedToValue) {
       this.periodFilter.selectedFromValue = "";
@@ -358,6 +397,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
     }
     
   }
+  
   private setIndicators() {
     this.periodFilter.selectedFromAndToValues = (this.periodFilter.selectedFromValue || this.periodFilter.selectedToValue ? ((this.periodFilter.selectedFromValue && !this.periodFilter.selectedToValue ? "From " : "") + (!this.periodFilter.selectedFromValue && this.periodFilter.selectedToValue ? "Until " : "") + (this.periodFilter.selectedFromValue ? this.periodFilter.selectedFromValue : "") +
       (this.periodFilter.selectedFromValue && this.periodFilter.selectedToValue ? " - " : "") + (this.periodFilter.selectedToValue ? this.periodFilter.selectedToValue : "")) : "");
@@ -444,6 +484,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
     }
     return true;
   }
+  
   public countSubCategoriesToShow(category: Category): number {
     let counter = 0;
     for (let sub of category.subCategories) {
@@ -453,6 +494,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
     }
     return counter;
   }
+  
   public countIndicatorsToShow(indicators: Indicator[]): number {
     let counter = 0;
     for (let i of indicators) {
@@ -462,12 +504,14 @@ export class MonitorComponent implements OnInit, OnDestroy {
     }
     return counter;
   }
+  
   /*
   Feedback mail
    */
   public get mailText() {
     return "mailto:" + this.properties.feedbackmail + "?subject=%5BOpenAIRE%20Monitor%5D%20" + (this.stakeholder ? this.stakeholder.name : "") + "%20dashboard%20feedback"
   }
+  
   mailMe() {
     window.location.href = this.mailText;
   }

src/app/topic/topic.component.html

@@ -23,7 +23,7 @@
                     {i:i, type: 'topic', visibility: stakeholder.topics[i].visibility}">
                     </ng-container>
                   </span>
-                  <span class="uk-text-truncate" [class.uk-width-3-5]="!open">{{topic.name}}</span>
+                  <span [class.uk-text-center]="open" [class.uk-text-truncate]="!open" [class.uk-width-3-5]="!open">{{topic.name}}</span>
                   <span class="uk-invisible-hover color"
                         (click)="$event.stopPropagation();$event.preventDefault()">
                     <span class="uk-icon uk-position-center-right" uk-icon="more-vertical"></span>

src/assets/dashboard-theme/structure.css

@@ -1,5 +1,5 @@
 :root {
-  --sidebar-width: 320px;
+  --sidebar-width: 230px;
   --sidebar-mini-width: 130px;
   --sidebar-font-size: 14px;
   --header-height: 100px;
@@ -164,7 +164,7 @@
 }
 
 .sidebar_mini #page_content_header {
-  width: calc(100vw - var(--sidebar-mini-width) - 200px);
+  width: calc(100vw - var(--sidebar-mini-width) - 180px);
 }
 
 #page_content_inner {
@@ -185,7 +185,7 @@
   }
 
   .sidebar_mini #page_content_header {
-    width: calc(100vw - var(--sidebar-mini-width) - 50px);
+    width: calc(100vw - var(--sidebar-mini-width) - 90px);
   }
 }
 

src/assets/new.css

@@ -16,19 +16,11 @@
   background-image: none;
 }
 
-.stakeholderPage #page_content > div, .stakeholderPage #page_content .uk-navbar-container {
+.stakeholderPage #page_content {
-  background-color: #F9FBFC !important;
+  background-image: url("/assets/monitor-shapes-bg.svg");
-  box-shadow: none;
+  background-size: contain;
-}
-
-/*.stakeholderPage #header_main, .stakeholderPage .uk-sticky.uk-navbar-container {*/
-/*    background: #F9FBFC !important;*/
-/*}*/
-.stakeholderPage #page_content_inner {
-  background-image: url(/assets/monitor-shapes-bg.svg);
-  background-size: cover;
   background-repeat: no-repeat;
-  background-position: top;
+  background-position: center;
   background-attachment: fixed;
 
 }
@@ -83,6 +75,7 @@
   background-size: contain;
   margin-left: 35px;
   margin-top: 5px;
+  margin-right: 10px;
   height: 50px;
 }
 
@@ -137,7 +130,6 @@
 
 .stakeholderPage #sidebar_main #sidebar_content, .stakeholderPage #sidebar_switcher_toggle {
   border-color: var(--monitor-portal-color);
-  color: var(--monitor-portal-color);
 }
 
 /* Section Tools*/
@@ -245,3 +237,8 @@
 .uk-modal-container .uk-modal-dialog {
   width: 900px;
 }
+
+.stakeholderPage .selectedFilterLabel {
+  background-color: #E6EEF2;
+  border-color: #E6EEF2;
+}