[Monitor Dashboard|Trunk]

Apply initial changes according to the latest mocks
Filters:
	hide filter icon when filter panel is open
	show an overlay film when at least one active filter cannot be applied to a chart
	when a filter is already applied by default to a chart (with multiple queries) with different value --> change the chart color to one with lower opacity





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

src/app/app.component.html

@@ -45,7 +45,6 @@
   </div>
   <dashboard-sidebar *ngIf="stakeholder && isFrontPage" [items]="sideBarItems"
                      [activeItem]="activeTopic?activeTopic.alias:null" [showHeader]=true
-                     headerName="Monitor"
                      [searchLink]="(properties.showContent)?properties.searchLinkToResults:null"
                      [searchParams]="createSearchParameters()"
                      [headerUrl]="properties.baseLink"

src/app/monitor/monitor.component.html

@@ -1,12 +1,10 @@
 <ng-template #selected_filters_pills let-margin="margin">
 <!--  <div class="uk-grid uk-grid-small uk-text-small" uk-grid>-->
     <span *ngIf="periodFilter.selectedFromAndToValues.length > 0"  class="uk-grid-margin" >
-        <span  class="selectedFilterLabel"  [class.uk-margin-small-left]="margin" title="Remove {{periodFilter.selectedFromAndToValues}}">
+        <a (click)="clearPeriodFilter()" [class]="((loading)?'  uk-disabled':'  ')+' uk-link-text '"> <span  class="selectedFilterLabel"  [class.uk-margin-small-left]="margin" title="Remove {{periodFilter.selectedFromAndToValues}}">
-          <a (click)="clearPeriodFilter()" [class]="((loading)?'  uk-disabled':'  ')+' uk-link-text '"> <i
+          <i class=" material-icons"></i>
-            class=" material-icons"></i>
-
           <span class="uk-margin-small-left">{{periodFilter.selectedFromAndToValues}}</span>
-        </a></span>
+        </span></a>
     </span>
     <ng-container *ngFor="let filter of filters ">
       <ng-container *ngIf="filter.countSelectedValues > 0">
@@ -43,37 +41,44 @@
 <div id="page_content">
       <div  class="uk-navbar-container uk-sticky uk-sticky-fixed" style="top: 70px; position:
       fixed; width: 100%">
-      <nav class=" ">
+        <div class="uk-margin-large-left">
-        <div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="">
+        <nav class=" ">
-          <ul *ngIf="activeTopic && activeTopic.categories.length > 1"
+          <div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="">
-              class="categoriesTabs uk-tab uk-padding uk-padding-remove-bottom uk-padding-remove-left uk-margin-remove">
+            <ul *ngIf="activeTopic && activeTopic.categories.length > 1"
-            <ng-template ngFor [ngForOf]="activeTopic.categories" let-category let-i="index">
+                class="categoriesTabs uk-tab  ">
-              <li *ngIf="isPublicOrIsMember(category.isPublic) && category.isActive" [class.uk-active]="category.alias === activeCategory.alias">
+              <ng-template ngFor [ngForOf]="activeTopic.categories" let-category let-i="index">
-                <a (click)="navigateTo(stakeholder.alias,activeTopic.alias, category.alias)"
+                <li *ngIf="isPublicOrIsMember(category.isPublic) && category.isActive" [class.uk-active]="category.alias === activeCategory.alias">
-                   class="uk-margin-remove-bottom uk-h4"
+                  <a (click)="navigateTo(stakeholder.alias,activeTopic.alias, category.alias)"
-                ><span>{{category.name}}</span></a>
+                     class="uk-margin-remove-bottom uk-h4"
+                  ><span>{{category.name}}</span></a>
+                </li>
+              </ng-template>
+            </ul>
+          </div>
+        </nav>
+          <ul *ngIf="activeCategory && activeCategory.subCategories.length > 1"
+              class="uk-subnav uk-subnav-pill subCategoriesTabs ">
+            <ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory let-i="index">
+              <li *ngIf="isPublicOrIsMember(subCategory.isPublic) && subCategory.isActive"
+                  [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"
+                ><span>{{subCategory.name}}</span></a>
               </li>
             </ng-template>
           </ul>
+          <div *ngIf="countSelectedFilters() > 0" class="uk-grid uk-grid-small uk-margin-bottom">
+            <span class="uk-grid-margin">Filters: </span>
+            <ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:true}"></ng-container>
+          </div>
         </div>
-      </nav>
     </div>
-    <div id="page_content_inner" class="uk-margin-large-top">
+    <div id="page_content_inner" class="uk-margin-large-top" [style.padding-top.px]="(24+
+    (activeCategory &&
+    activeCategory.subCategories.length > 1?40:0)+(activeTopic &&
+    activeTopic.categories.length > 1?20:0)+(countSelectedFilters()
+    > 0?40:0))">
       <div class="uk-margin-top">
-        <ul *ngIf="activeCategory && activeCategory.subCategories.length > 1" class="uk-tab subCategoriesTabs">
-          <ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory let-i="index">
-            <li *ngIf="isPublicOrIsMember(subCategory.isPublic) && subCategory.isActive"
-                [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"
-              ><span>{{subCategory.name}}</span></a>
-            </li>
-          </ng-template>
-        </ul>
-        <div *ngIf="countSelectedFilters() > 0" class="uk-grid uk-grid-small">
-          <span class="uk-grid-margin">Filters: </span>
-          <ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:true}"></ng-container>
-        </div>
         <div *ngIf="privateStakeholder">
           <div class="uk-text-center uk-height-medium">
             <div class="uk-h3 "><i>
@@ -126,9 +131,12 @@
                    [class.uk-width-1-5@m]="indicator.width === 'small'"
                    [class.uk-width-1-3@m]="indicator.width === 'medium'"
                    [class.uk-width-1-2]="indicator.width === 'large'" class=" uk-margin-bottom">
-                <div class="md-card" [attr.uk-tooltip]="indicator.description">
+                <div class="md-card" [attr.uk-tooltip]="indicator.description"
+                     [class.uk-disabled]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()"
+                     [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
                   <div class="md-card-content">
-<!--                    <div>Filtered: {{indicator.indicatorPaths[0].filteredApplied}}</div>-->
+                    <!--<div>Filtered: {{indicator.indicatorPaths[0].filtersApplied}} out of
+                      {{countSelectedFilters()}}</div>-->
                     <h2 *ngIf="numberResults.get(i + '-' + j)" class="">
                       <span>{{numberResults.get(i + '-' + j) | number}}</span>
                     </h2>
@@ -155,7 +163,13 @@
                   <h4 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom ">
                     <div>{{indicator.name + " "}}</div>
                   </h4>
-                  <div class="md-card"><!--[attr.uk-tooltip]="indicator.description">-->
+                  <div class="md-card"
+                       [class.uk-disabled]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()"
+                       [class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()"
+                  ><!--[
+                       attr
+                       .uk-tooltip]="indicator
+                  .description">-->
                     <div class="md-card-content uk-text-center">
                       <div *ngIf="indicator.indicatorPaths.length > 1" class="uk-button-group">
                         <button *ngFor="let indicatorPath of indicator.indicatorPaths;"
@@ -165,7 +179,8 @@
                           {{indicatorPath.type}}
                         </button>
                       </div>
-<!--                      <div>Filtered: {{chartsActiveType.get(i + '-' + j).filteredApplied}}</div>-->
+                      <!--<div>Filtered: {{chartsActiveType.get(i + '-' + j).filtersApplied}}  out of
+                        {{countSelectedFilters()}}</div>-->
                       <iframe *ngIf="chartsActiveType.get(i + '-' + j).source !== 'image'"
                               [src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
                               class="uk-width-1-1 uk-height-medium"></iframe>
@@ -191,7 +206,8 @@
   </div>
 <div *ngIf="stakeholder && !privateStakeholder" id="style_switcher" class="filters_switcher"
      [class.switcher_active]="filterToggle">
-    <div id="style_switcher_toggle" (click)="filterToggle= !filterToggle">
+    <div id="style_switcher_toggle" (click)="filterToggle= !filterToggle"
+         [style.display]="(filterToggle?'none':'inherit')">
       <i class="  uk-text-muted">
         <svg style="margin-top: 8px;" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
              viewBox="0 0 24 24"
@@ -215,7 +231,8 @@
       <div class="uk-grid uk-grid-small uk-text-small" uk-grid>
         <ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:false}"></ng-container>
       </div>
-
+      <div class="uk-margin-small-top"><i  class="uk-text-muted uk-text-small"> If any of the filters cannot be
+        applied to a chart, it will appear faded.</i></div>
       <ul class="uk-list uk-list-divider  uk-margin-medium">
         <li>
           <range-filter   [filter]="periodFilter" yearMin="2000" yearMax="2020" [mandatoryRange]="true"

src/app/monitor/monitor.component.ts

@@ -52,7 +52,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
   public routerHelper: RouterHelper = new RouterHelper();
   filters:Filter[] = [];
   queryParams = {};
-  periodFilter:RangeFilter = { title: "Period",  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(
@@ -220,7 +220,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
   countSelectedFilters():number{
     let count = 0;
     if(this.periodFilter.selectedFromAndToValues.length > 0){
-      count++;
+      count+=2;
     }
     for(let filter of this.filters) {
       count +=filter.countSelectedValues;
@@ -244,6 +244,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
   }
 
   private setView(params: Params) {
+    this.loading = false;
     if (params['topic']) {
       this.activeTopic = this.stakeholder.topics.find(topic => topic.alias === decodeURIComponent(params['topic']) && this.isPublicOrIsMember(topic.isPublic) && topic.isActive);
       if (this.activeTopic) {

src/app/utils/indicator-utils.ts

@@ -297,7 +297,7 @@ export class IndicatorUtils {
     return indicatorPath.url + encodeURIComponent(replacedUrl);
   }
   public getFullUrlWithFilters(stakeholder:Stakeholder, indicatorPath: IndicatorPath, fundingL0: string = null, startYear: string = null, endYear: string = null, isNumber:boolean=false): string {
-    indicatorPath.filteredApplied = false;
+    indicatorPath.filtersApplied = 0;
     let replacedUrl = indicatorPath.chartObject?indicatorPath.chartObject:indicatorPath.url;
     if (indicatorPath.parameters) {
       Object.keys(indicatorPath.parameters).forEach(key => {
@@ -325,21 +325,21 @@ export class IndicatorUtils {
       if(indicatorPath.source == "stats-tool" && indicatorPath.chartObject) {
         let filterResults = this.addFilter(replacedUrl, 'fundingL0', fundingL0);
         replacedUrl = filterResults.url;
-        indicatorPath.filteredApplied = indicatorPath.filteredApplied|| filterResults.filteredApplied;
+        indicatorPath.filtersApplied += filterResults.filtersApplied;
       }
     }
     if (startYear) {
       if(indicatorPath.source == "stats-tool" && indicatorPath.chartObject) {
         let filterResults =  this.addFilter(replacedUrl, 'start_year', startYear);
         replacedUrl = filterResults.url;
-        indicatorPath.filteredApplied = indicatorPath.filteredApplied|| filterResults.filteredApplied;
+        indicatorPath.filtersApplied += filterResults.filtersApplied;
       }
     }
     if (endYear ) {
       if(indicatorPath.source == "stats-tool" && indicatorPath.chartObject) {
         let filterResults = this.addFilter(replacedUrl, 'end_year', endYear);
         replacedUrl = filterResults.url;
-        indicatorPath.filteredApplied = indicatorPath.filteredApplied|| filterResults.filteredApplied;
+        indicatorPath.filtersApplied += filterResults.filtersApplied;
       }
     }
 
@@ -360,11 +360,12 @@ export class IndicatorUtils {
   private  addFilter(replacedUrl, filterType:FilterType, filterValue){
     let newJsonObject = JSON.parse(replacedUrl);
     let filterApplied:boolean = false;
+    let queryIndex = 0;
     for (let queries of this.getQueryObjectName(newJsonObject)?newJsonObject[this.getDescriptionObjectName(newJsonObject)][this.getQueryObjectName(newJsonObject)]:newJsonObject[this.getDescriptionObjectName(newJsonObject)]) {
 
       if(queries["query"]["name"] && !queries["query"]["select"]){
 
-        if(queries["query"]["name"].indexOf("monitor.")==-1 ){
+        if(queries["query"]["name"].indexOf("monitor.")==-1 || !queries["query"]["parameters"]){
           continue;
         }
         filterApplied = true;
@@ -423,19 +424,39 @@ export class IndicatorUtils {
         queries["query"]["filters"] = [];
       }
       let field = queries["query"]["select"][0]["field"];
-      // console.debug("Field is"+field)
       let filterString =  IndicatorFilterUtils.getFilter(field,filterType);
       if(filterString){
-        filterApplied = true;
         let filter = JSON.parse(filterString);
-        let filterposition = IndicatorFilterUtils.filterIndexOf(filter,queries["query"]["filters"]);
+        let filterposition = IndicatorFilterUtils.filterIndexOf(filter,queries["query"]["filters"])
         if(filterposition){
-          queries["query"]["filters"][filterposition.filter][filterposition.groupFilter] = filter['groupFilters'][0]["values"][0].replace(ChartHelper.prefix + filterType + ChartHelper.suffix, filterValue);
+          if(queries["query"]["filters"][filterposition.filter]['groupFilters'][filterposition.groupFilter]["values"][0] != filter['groupFilters'][0]["values"][0].replace(ChartHelper.prefix + filterType + ChartHelper.suffix, filterValue)){
+            //change filter value
+            // queries["query"]["filters"][filterposition.filter]['groupFilters'][filterposition.groupFilter]["values"][0] = filter['groupFilters'][0]["values"][0].replace(ChartHelper.prefix + filterType + ChartHelper.suffix, filterValue);
+            //add user filter value
+            // queries["query"]["filters"].push(JSON.parse(filterString.replace(ChartHelper.prefix + filterType + ChartHelper.suffix, filterValue)));
+            // update colors
+            //if noit a pie, map and chart has more than one query
+            //
+            if(!newJsonObject.hasOwnProperty("mapDescription") && queries["type"]!="pie" && (this.getQueryObjectName(newJsonObject)?newJsonObject[this.getDescriptionObjectName(newJsonObject)][this.getQueryObjectName(newJsonObject)].length:newJsonObject[this.getDescriptionObjectName(newJsonObject)].length) >1) {
+              let activeColors = ["#7CB5EC", "#434348", "#8bbc21", "#910000", "#1aadce", "#492970", "#f28f43", "#77a1e5", "#c42525", "#a6c96a"];
+              let inActiveColors = ["#E4EFFB", "#D8D8D9", "#8bbc21", "#910000", "#1aadce", "#492970", "#f28f43", "#77a1e5", "#c42525", "#a6c96a"];
+              if (!newJsonObject[this.getDescriptionObjectName(newJsonObject)]["colors"]) {
+                newJsonObject[this.getDescriptionObjectName(newJsonObject)]["colors"] = activeColors;
+              }
+              newJsonObject[this.getDescriptionObjectName(newJsonObject)]["colors"][queryIndex] = inActiveColors[queryIndex];
+              filterApplied = true;
+            }
+          }else{
+            filterApplied = true;
+          }
+        }else {
+          queries["query"]["filters"].push(JSON.parse(filterString.replace(ChartHelper.prefix + filterType + ChartHelper.suffix, filterValue)));
+          filterApplied = true;
         }
-        queries["query"]["filters"].push(JSON.parse(filterString.replace(ChartHelper.prefix + filterType + ChartHelper.suffix, filterValue)));
       }
+      queryIndex++;
     }
-    return  { "url":JSON.stringify(newJsonObject), "filteredApplied":filterApplied};
+    return  { "url":JSON.stringify(newJsonObject), "filtersApplied":(filterApplied)?1:0};
   }
 
   generateIndicatorByForm(form: any, indicatorPaths: IndicatorPath[], type:IndicatorType, addParameters:boolean = true ): Indicator {

src/assets/monitor-custom.css

@@ -1,5 +1,5 @@
 :root {
-    --portal-main-color: #8DCA26;
+    --portal-main-color: #4686E5; /*#8DCA26;*/
     --portal-main-contrast: white;
     --portal-dark-color: #7c9144;
 
@@ -7,7 +7,7 @@
 
     --explore-portal-color: #D95F2D;
     --provide-portal-color: #37C7E9;
-    --monitor-portal-color: #9ABB55;
+    --monitor-portal-color: #8DCA26;
     --connect-portal-color: #EBB13E;
     --develop-portal-color: #DA65AB;
 
@@ -82,15 +82,16 @@
 .stakeholderPage #sidebar_main .menu_section > ul > li.current_section, .stakeholderPage #sidebar_main .menu_section > ul > li.current_section:hover,
 .stakeholderPage #sidebar_main .menu_section > ul > li.current_section:hover > a:hover
 {
-    background-color: var(--portal-main-color)  !important;
+    /*background-color: var(--portal-main-color)  !important;*/
 }
 .stakeholderPage #sidebar_main .menu_section > ul > li.current_section .menu_title,.stakeholderPage #sidebar_main .menu_section > ul > li.current_section .menu_mini_title, .stakeholderPage #sidebar_main .menu_section > ul > li.current_section:hover  .menu_title,  .stakeholderPage #sidebar_main .menu_section > ul > li.current_section:hover  .menu_mini_title, .stakeholderPage #sidebar_main .menu_section > ul > li.current_section > a > .menu_icon .material-icons,
 .stakeholderPage #sidebar_main .menu_section > ul > li.current_section > a > .menu_icon svg *
 /*, .stakeholderPage #sidebar_main .menu_section > ul > li.current_section:hover > a > .menu_icon svg **/
 /*.stakeholderPage #sidebar_main .menu_section > ul > li:hover > a > .menu_icon .material-icons*/
 {
-    color: white !important;
+    /*color: white !important;*/
-    fill: white !important;
+    /*fill: white !important;*/
+    color: var(--portal-main-color) !important;
     font-weight: 700;
 }
 
@@ -98,7 +99,8 @@
     max-height: calc(var(--header-height) - 30px);
 }
 .stakeholderPage .uk-tab > li.uk-active > a,.stakeholderPage .uk-tab > li > a:focus, .stakeholderPage .uk-tab > li > a:hover {
-    border-bottom-color: var(--portal-main-color) !important;
+    /*border-bottom-color: var(--portal-main-color) !important;*/
+    border: 0px !important;
     color: var(--portal-main-color) !important
 }
 .stakeholderPage #style_switcher {
@@ -106,19 +108,19 @@
 }
 
 .stakeholderPage .uk-navbar-container{
-    box-shadow: 0px 1px 3px #0000004D;
+    /*box-shadow: 0px 1px 3px #0000004D;*/
 
 }
-
+/*
 .stakeholderPage #sidebar_main{
     background-color: #F0F4F2;
-}
+}*/
 .stakeholderPage .categoriesTabs >li a{
-    font-size: 16px;
+    font-size: 14px;
     text-transform: capitalize;
 }
 .stakeholderPage .subCategoriesTabs >li a{
-    font-size: 14px;
+    font-size: 13px;
     text-transform: capitalize;
 }
 .stakeholderPage .categoriesTabs > li.uk-active a, .stakeholderPage .subCategoriesTabs > li.uk-active a{
@@ -192,6 +194,91 @@ bottom a:not(.license), bottom a > :not(svg) {
     overflow: hidden;
 }
 
-.stakeholderPage:not(.sidebar_mini) #sidebar_main .menu_section > ul > li .menu_mini_title, .dashboard:not(.sidebar_mini) #sidebar_main .menu_section > ul > li .menu_mini_title{
+.stakeholderPage:not(.sidebar_mini) #sidebar_main .menu_section > ul > li .menu_mini_title, .stakeholderPage:not(.sidebar_mini) #sidebar_main .menu_section > ul:not(.searchLink) > li .menu_icon, .dashboard .sidebar_main_swipe:not(.stakeholderPage):not(.sidebar_mini) #sidebar_main .menu_section > ul > li .menu_mini_title{
     display: none;
 }
+.stakeholderPage #sidebar_main .menu_section > ul > li {
+    transition: 0.70s;
+    -webkit-transition: 0.70s;
+    -moz-transition: 0.70s;
+    -ms-transition: 0.70s;
+    -o-transition: 0.70s;
+    display: block;
+    text-align: center;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+.stakeholderPage #sidebar_main .menu_section > ul > li > a {
+    display: inherit !important;
+    text-align: center;
+}
+.stakeholderPage #sidebar_main .menu_section > ul > li.current_section {
+    width: 100%;
+    height: 100%;
+    transition: 0.70s;
+    -webkit-transition: 0.70s;
+    -moz-transition: 0.70s;
+    -ms-transition: 0.70s;
+    -o-transition: 0.70s;
+    -webkit-transform: rotate(-90deg);
+    -moz-transform: rotate(-90deg);
+    -o-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    margin: 80px 0px;
+}
+.sidebar_mini #sidebar_main .menu_section > ul > li.current_section{
+    transform: rotate(0deg);
+    width: inherit;
+    height: inherit;
+
+    margin: 0px 0px;
+}
+
+.uk-subnav-pill.subCategoriesTabs > li > a{
+    border: 1px solid #1a1a1a;
+    color:  #1a1a1a;
+    border-radius: 40px;
+    background-color: white;
+    opacity: 0.5 ;
+    /*background: var(--portal-main-color) !important;*/
+    /*color: var(--portal-main-contrast) !important;*/
+
+}
+
+
+.uk-subnav-pill.subCategoriesTabs > li.uk-active > a{
+    color: white;
+    border: 1px solid var(--portal-main-color);
+    background-color: var(--portal-main-color);
+    opacity: 1 ;
+}
+
+.uk-tab.categoriesTabs::before {
+    border-bottom: none !important;
+}
+
+
+.stakeholderPage #style_switcher {
+    box-shadow: none;
+    border: 1px solid var(--monitor-portal-color);
+}
+
+.stakeholderPage #sidebar_main {
+    border-right: 1px solid var(--monitor-portal-color);
+}
+
+.stakeholderPage .md-card.uk-disabled, .stakeholderPage .md-card.semiFiltered{
+    opacity: 0.5;
+}
+.stakeholderPage .md-card.semiFiltered > * > .highcharts-series-group{
+    opacity: 0.5;
+}
+.stakeholderPage:not(.sidebar_mini) #sidebar_main .menu_section > ul.searchLink {
+    bottom: 65px;
+    right:0;
+    left:0;
+    position:fixed;
+}
+

src/assets/theme-assets/dashboard-custom.css

@@ -88,13 +88,13 @@ html .dashboard {
 }
 
 .dashboard .sidebar_main_active #hide_controls {
-  background: #F0F4F2;
+  /*background: #F0F4F2;*/
   /*border-top: 1px solid rgba(0,0,0,.30);*/
   width: 319px;
   transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
   -webkit-transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
   -moz-transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
-  border-right: 1px solid rgba(0,0,0,.12);
+  /*border-right: 1px solid rgba(0,0,0,.12);*/
 }
 
 @media only screen and (max-width: 767px) {
@@ -543,7 +543,7 @@ body.dashboard {
   background-color: white;
 }
 .dashboard #sidebar_main{
-  background-color: #F0F4F2;
+  /*background-color: #F0F4F2;*/
 }
 
 .dashboard .md-card {
@@ -559,12 +559,12 @@ body.dashboard {
 }
 
 .selectedFilterLabel {
-  background: var(--portal-main-color) !important;
+  /*background: var(--portal-main-color) !important;*/
-  color: var(--portal-main-contrast) !important;
+  color: #424242 !important;
   padding: 6px 10px !important;
-  border-radius: 25px !important;
+  border-radius: 5px !important;
 }
-
+/*
 .selectedFilterLabel:hover {
   background: var(--portal-dark-color) !important;
 }
@@ -575,7 +575,7 @@ body.dashboard {
 
 .selectedFilterLabel .material-icons{
   color: var(--portal-main-contrast) !important;
-}
+}*/
 
 #style_switcher_toggle{
   left: -36px !important;