[Monitor Dashboard | new-theme]: Updated develop page and added example | Made graph and feedback line sticky in indicators' page.

1. develop.component.ts: Added example bullet for research products & Updated view of bullets (removed quotes - type bold).
2. page-content.component.ts:
   a. Added <div id="page_content_sticky_footer" #sticky_footer> and <div id="page_content_footer" #footer>.
   b. Added methods "ngAfterContentChecked()", "observeStickyFooter()", "calcStickyFooterOffset()" to calculate offset of sticky footer.
3. monitor.component.html: Added graph & feedback line as sticky_footer in >= medium screens and as footer in small screens.

dashboard/sharedComponents/page-content/page-content.component.ts

@@ -1,14 +1,34 @@
-import {AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild} from "@angular/core";
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  OnDestroy,
+  OnInit,
+  ViewChild
+} from "@angular/core";
 import {LayoutService} from "../sidebar/layout.service";
+import {Subscription} from "rxjs";
 
 declare var UIkit;
+declare var ResizeObserver;
 
 @Component({
   selector: '[page-content]',
   template: `
     <div id="page_content">
+      <div id="page_content_sticky_footer" #sticky_footer class="uk-blur-background"
+           [attr.uk-sticky]="'bottom: true;'" [attr.offset]="footer_offset">
+        <div class="uk-container uk-container-large">
+          <div class="uk-padding-small uk-padding-remove-vertical">
+            <ng-content select="[sticky_footer]"></ng-content>
+          </div>
+        </div>
+      </div>
       <div id="page_content_header" #header class="uk-blur-background"
-           [attr.uk-sticky]="(headerSticky && shouldSticky)?'media: @m':null" [attr.offset]="offset">
+           [attr.uk-sticky]="(headerSticky && shouldSticky)?'media: @m':null" [attr.offset]="offset"
+           [attr.style]="'margin-top: '+(footer_height? '-'+footer_height+'px': '0')">
         <div class="uk-container uk-container-large">
           <div class="uk-padding-small uk-padding-remove-vertical">
             <ng-content select="[header]"></ng-content>
@@ -28,6 +48,13 @@ declare var UIkit;
           <ng-content select="[inner]"></ng-content>
         </div>
       </div>
+      <div id="page_content_footer" #footer>
+        <div class="uk-container uk-container-large">
+          <div class="uk-padding-small uk-padding-remove-vertical">
+            <ng-content select="[footer]"></ng-content>
+          </div>
+        </div>
+      </div>
     </div>
   `,
 })
@@ -40,8 +67,12 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild('actions') actions: ElementRef;
   private headerObserver: IntersectionObserver;
   private bottomObserver: IntersectionObserver;
+  public footer_offset: number = 0;
+  public footer_height: number = 0;
+  @ViewChild("sticky_footer") sticky_footer;
+  subscriptions = [];
 
-  constructor(private layoutService: LayoutService) {
+  constructor(private layoutService: LayoutService, private cdr: ChangeDetectorRef) {
   }
   
   ngOnInit() {
@@ -78,6 +109,10 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
         }, {threshold: 0.5});
         this.headerObserver.observe(this.header.nativeElement);
       }
+
+      if(this.sticky_footer) {
+        this.observeStickyFooter();
+      }
     }
   }
   
@@ -88,5 +123,39 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
     if(this.headerObserver) {
       this.headerObserver.disconnect();
     }
+    this.subscriptions.forEach(subscription => {
+      if (subscription instanceof Subscription) {
+        subscription.unsubscribe();
+      } else if (subscription instanceof Function) {
+        subscription();
+      } else if (subscription instanceof (ResizeObserver || IntersectionObserver)) {
+        subscription.disconnect();
+      }
+    });
+  }
+
+  ngAfterContentChecked() {
+    if(this.sticky_footer && typeof document !== 'undefined') {
+      this.footer_offset = this.calcStickyFooterOffset(this.sticky_footer.nativeElement);
+    }
+  }
+
+  public observeStickyFooter() {
+    let resizeObs = new ResizeObserver(entries => {
+      entries.forEach(entry => {
+        setTimeout(() => {
+          // console.log(entry);
+          this.footer_offset = this.calcStickyFooterOffset(entry.target);
+          this.cdr.detectChanges();
+        });
+      })
+    });
+    this.subscriptions.push(resizeObs);
+    resizeObs.observe(this.sticky_footer.nativeElement);
+  }
+
+  calcStickyFooterOffset(element) {
+    this.footer_height = element.offsetHeight;
+    return window.innerHeight-this.footer_height;
   }
 }