gh-582 Polish CSS styles

Author: ghillert

ui/src/app/app.component.ts

@@ -2,17 +2,21 @@ import { Component, DoCheck } from '@angular/core';
 import { ToastyConfig } from 'ng2-toasty';
 import { AuthService } from './auth/auth.service';
 import { SecurityInfo } from './auth/model/security-info.model';
+import { Renderer2 } from '@angular/core';
+import { OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
 })
-export class AppComponent implements DoCheck {
+export class AppComponent implements DoCheck, OnInit {
 
   public securityInfo: SecurityInfo;
   public isCollapsed = true;
 
-  constructor(private toastyConfig: ToastyConfig, private authService: AuthService) {
+  constructor(private toastyConfig: ToastyConfig,
+      private renderer: Renderer2,
+      private authService: AuthService) {
     this.toastyConfig.theme = 'bootstrap';
     this.toastyConfig.limit = 5;
     this.toastyConfig.showClose = true;
@@ -26,6 +30,34 @@ export class AppComponent implements DoCheck {
     this.securityInfo = this.authService.securityInfo;
   }
 
+  ngOnInit() {
+    this.renderer.listen('document', 'scroll', (evt) => {
+      this.updateToasty();
+    });
+    this.renderer.listen('document', 'resize', (evt) => {
+      this.updateToasty();
+    });
+    this.updateToasty();
+  }
+
+  private updateToasty() {
+    const bodyScrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    const navHeight = document.getElementsByTagName('nav')[0].offsetHeight;
+    let marginToParent = 10;
+    const toastyElement = document.getElementById('toasty');
+
+    if (window.outerWidth <= 768) {
+      marginToParent = 0;
+    }
+
+    if (bodyScrollTop > navHeight) {
+      toastyElement.style.top = marginToParent + 'px';
+    } else if (bodyScrollTop >= 0) {
+      const distance = navHeight - bodyScrollTop;
+      toastyElement.style.top = distance + marginToParent + 'px';
+    }
+  }
+
   public toggleCollapse(): void {
     this.isCollapsed = !this.isCollapsed;
   }

ui/src/app/apps/apps.component.html

@@ -4,7 +4,7 @@ <h1 [ngBusy]="busy">Apps</h1>
 </p>
 
 <div class="row">
-  <div class="col-md-18">
+  <div class="col-xs-10 col-md-18">
       <button id="registerApplicationButton" type="button" (click)="registerApps()"
       class="btn btn-default" [appRoles]="['ROLE_CREATE']"
       ><span class="glyphicon glyphicon-plus"></span>
@@ -26,9 +26,9 @@ <h1 [ngBusy]="busy">Apps</h1>
       <span class="hidden-xs">Bulk Import Applications</span>
       </button>
   </div>
-  <div class="col-md-6 text-right">
+  <div class="col-xs-14 col-md-6 text-right">
       <label *ngIf="appRegistrations" class="control">
-          <input type="text" class="input" placeholder="Filter items" [(ngModel)]="appRegistrations.filter" >
+          <input type="text" class="input filter-input" placeholder="Filter items" [(ngModel)]="appRegistrations.filter" >
         </label>
         <button id="refreshAppRegistrationsButton" type="button" (click)="loadAppRegistrations(true)"
                 class="btn btn-default"

ui/src/app/streams/stream-definitions/stream-definitions.component.html

@@ -14,7 +14,7 @@
   </div>
 </div>
 <div class="row">
-  <div class="col-md-19 col-actions">
+  <div class="col-xs-10 col-md-19 col-actions">
     <app-tri-state-button *ngIf="streamDefinitions?.items" class="toggle-all" [appRoles]="['ROLE_CREATE']"
       [items]="streamDefinitions.getItemsAsObservable()"
       (eventHandler)="deployMultipleStreamDefinitions(streamDefinitions.items)"
@@ -47,9 +47,9 @@
       icon="remove"
     ></app-tri-state-button>
   </div>
-  <div class="col-md-5 text-right" style="padding-left: 0;">
+  <div class="col-xs-14 col-md-5 text-right" style="padding-left: 0;">
     <label *ngIf="streamDefinitions" class="control">
-      <input type="text" class="input" placeholder="Filter definitions" [(ngModel)]="streamDefinitions.filter">
+      <input type="text" class="input filter-input" placeholder="Filter definitions" [(ngModel)]="streamDefinitions.filter">
     </label>
     <button *ngIf="streamDefinitions" type="button" (click)="loadStreamDefinitions()"
             class="btn btn-default">

ui/src/app/tasks/task-definitions/task-definitions.component.html

@@ -1,16 +1,16 @@
 
 <ng-template [ngBusy]="{busy: busy, wrapperClass: 'ng-busy ng-busy-no-margin', minDuration: 2000}"></ng-template>
 <div class="row">
-  <div class="col-md-19">
+  <div class="col-xs-8">
     <button type="button" [appRoles]="['ROLE_CREATE']" (click)="bulkDefineTasks()"
             class="btn btn-default">
       <span class="glyphicon glyphicon-import"></span>
       <span class="hidden-xs">Bulk Define Tasks</span>
     </button>
   </div>
-  <div class="col-md-5 text-right" style="padding-left: 0;">
+  <div class="col-xs-16 text-right" style="padding-left: 0;">
     <label *ngIf="taskDefinitions" class="control">
-      <input type="text" class="input" placeholder="Filter definitions" [(ngModel)]="taskDefinitions.filter">
+      <input type="text" class="input filter-input" placeholder="Filter definitions" [(ngModel)]="taskDefinitions.filter">
     </label>
     <button *ngIf="taskDefinitions" type="button" (click)="loadTaskDefinitions()"
             class="btn btn-default">

ui/src/styles.scss

@@ -100,10 +100,6 @@ body {
   margin-right: 2px;
 }
 
-#toasty {
-  top: unset !important;
-}
-
 .navbar {
 
   .container {
@@ -153,6 +149,10 @@ body {
 .form-control-feedback {
   top: 5px;
 }
+
+.filter-input {
+  max-width: 125px;
+}
 // ~~~~ responsive
 
 @media (max-width: 768px) {