[ui] [event-viewer] optimize vertical scrolling

Author: loukaspd

src/app/components/event-viewer/event-viewer.component.css

@@ -3,4 +3,11 @@
     font-size: 1.4rem;
     font-weight: 900;
     line-height: 53px;
+}
+
+.loadmore {
+    text-align: center;
+    margin-top: 12px;
+    height: 32px;
+    line-height: 32px;
 }

src/app/components/event-viewer/event-viewer.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container" style="height: 100%; overflow-y: auto;">
 
     <!-- Title -->
     <div class="title event-viewer-title">
@@ -28,14 +28,16 @@
     </div>
 
     <!-- Main List-->
-    <event-entry-item
-    *ngFor="let event of viewModel.events"
-    [event]="event">
-    </event-entry-item>
-
-    <!-- Load More -->
-    <div class="loadmore">
-        <button nz-button *ngIf="!viewModel.loading && viewModel.hasMore" (click)="uiOnMoreClicked()">load more</button>
+    <div>
+        <event-entry-item
+        *ngFor="let event of viewModel.events"
+        [event]="event">
+        </event-entry-item>
+
+        <!-- Load More -->
+        <div class="loadmore" *ngIf="!viewModel.loading && viewModel.hasMore">
+            <button nz-button (click)="uiOnMoreClicked()">load more</button>
+        </div>
     </div>
 
     <!-- Loaders & NoResults -->

src/app/components/main.component.html

@@ -1,4 +1,5 @@
 <div class="main-container">
+  <!-- Sidebar -->
   <div id="sidebar">
     <!-- Title -->
     <div class="title">
@@ -18,8 +19,9 @@
 
 
   <!-- Events List-->
-  <div style="height:100%">
-    <event-viewer
+  <event-viewer
+    style="flex-grow: 1;"
+
     *ngFor="let tab of tabs; let i = index"
     [hidden]="activeIndex != i"
 
@@ -28,8 +30,7 @@
     (unreadEventsUpdated)="tabsWithNewContent[i]=$event"
     >
 
-    </event-viewer>
-  </div>
+  </event-viewer>
 
 
 </div>

src/styles.scss

@@ -41,12 +41,4 @@ html, body {
 }
 .event-icon-info {
   color:#486274;
-}
-
-// Event-Viewer
-.loadmore {
-  text-align: center;
-  margin-top: 12px;
-  height: 32px;
-  line-height: 32px;
 }