Align page titles to top left,decrease font size

Set global style for page titles
update the style for page titles

Change-Id: Ib2f1fd256ceac73193bf72dcde26971347ab0bc3
Issue-Id: RICPLT-1497
Signed-off-by: Jun (Nicolas) Hu <jh245g@att.com>

diff --git a/docs/release-notes.rst b/docs/release-notes.rst
index aec43e6..a672a8d 100644 (file)
--- a/docs/release-notes.rst
+++ b/docs/release-notes.rst
@@ -19,7 +19,7 @@
 RIC Dashboard Release Notes
 ===========================
 
-Version 1.2.4, 18 Oct 2019
+Version 1.2.4, 21 Oct 2019
 --------------------------
 * Revise a1-med-client to use API spec in new submodule ric-plt/a1;
   removed cached copy
@@ -28,6 +28,8 @@ Version 1.2.4, 18 Oct 2019
 * Add Platform page showing Kubernetes pods in aux and platform obtained from CAAS-Ingress
 * Update Angular libraries to recent stable versions
 * Revise user controller to answer data sent by portal, drop the mock implementation
+* Set global style for page titles
+* Align page titles to top left,decrease font size
 
 Version 1.2.3, 4 Oct 2019
 -------------------------

diff --git a/webapp-frontend/src/app/ac-xapp/ac-xapp.component.html b/webapp-frontend/src/app/ac-xapp/ac-xapp.component.html
index f311ecf..08b6a1e 100644 (file)
--- a/webapp-frontend/src/app/ac-xapp/ac-xapp.component.html
+++ b/webapp-frontend/src/app/ac-xapp/ac-xapp.component.html
@@ -18,7 +18,7 @@
   ========================LICENSE_END===================================
   -->
 <div class="ac__section">
-  <h3 class="ac__header">AC xApp Policy</h3>
+  <h3 class="rd-global-page-title">AC xApp Policy</h3>
 
   <form [formGroup]="acForm" novalidate autocomplete="off" (ngSubmit)="updateAc(acForm.value)">
     <div name="enforce">

diff --git a/webapp-frontend/src/app/ac-xapp/ac-xapp.component.scss b/webapp-frontend/src/app/ac-xapp/ac-xapp.component.scss
index 42ea907..185a48f 100644 (file)
--- a/webapp-frontend/src/app/ac-xapp/ac-xapp.component.scss
+++ b/webapp-frontend/src/app/ac-xapp/ac-xapp.component.scss
@@ -21,15 +21,6 @@
  .ac__section {
 }
 
-.ac__header {
-    text-align: center;
-    color: #432c85;
-    font-size: 50px;
-    font-weight: 200;
-    letter-spacing: .1em;
-    transform: translate(149 56);
-}
-
  /* used to place form fields on separate lines/rows */
 .input-display-block {
   display: block;

diff --git a/webapp-frontend/src/app/anr-xapp/anr-xapp.component.html b/webapp-frontend/src/app/anr-xapp/anr-xapp.component.html
index 914aeb7..def032e 100644 (file)
--- a/webapp-frontend/src/app/anr-xapp/anr-xapp.component.html
+++ b/webapp-frontend/src/app/anr-xapp/anr-xapp.component.html
@@ -18,7 +18,7 @@
   ========================LICENSE_END===================================
 -->
 <div class="anr__section">
-  <h3 class="anr__header">ANR xApp Neighbor Cell Relation Table</h3>
+  <h3 class="rd-global-page-title">ANR xApp Neighbor Cell Relation Table</h3>
 
   <mat-form-field class="input-width">
     <mat-label>GgNodeB</mat-label>

diff --git a/webapp-frontend/src/app/anr-xapp/anr-xapp.component.scss b/webapp-frontend/src/app/anr-xapp/anr-xapp.component.scss
index 983fb52..2307f8c 100644 (file)
--- a/webapp-frontend/src/app/anr-xapp/anr-xapp.component.scss
+++ b/webapp-frontend/src/app/anr-xapp/anr-xapp.component.scss
@@ -20,15 +20,6 @@
  .anr__section {
 }
 
-.anr__header {
-    text-align: center;
-    color: #432c85;
-    font-size: 50px;
-    font-weight: 200;
-    letter-spacing: .1em;
-    transform: translate(149 56);
-}
-
 .spinner-container {
     height: 100px;
     width: 100px;

diff --git a/webapp-frontend/src/app/app-control/app-control.component.html b/webapp-frontend/src/app/app-control/app-control.component.html
index 003f2a2..ec802f4 100644 (file)
--- a/webapp-frontend/src/app/app-control/app-control.component.html
+++ b/webapp-frontend/src/app/app-control/app-control.component.html
@@ -19,7 +19,7 @@
   -->
 
 <div class="app-control__section">
-  <h3 class="app-control__header">xApp Control</h3>
+  <h3 class="rd-global-page-title">xApp Control</h3>
 
   <table mat-table [dataSource]="dataSource" matSort multiTemplateDataRows class="app-control-table mat-elevation-z8">
 

diff --git a/webapp-frontend/src/app/app-control/app-control.component.scss b/webapp-frontend/src/app/app-control/app-control.component.scss
index 179b608..232562f 100644 (file)
--- a/webapp-frontend/src/app/app-control/app-control.component.scss
+++ b/webapp-frontend/src/app/app-control/app-control.component.scss
@@ -20,14 +20,6 @@
  .app-control__section {
 }
 
-.app-control__header {
-    text-align: center;
-    color: #432c85;
-    font-size: 50px;
-    font-weight: 200;
-    letter-spacing: .1em;
-    transform: translate(149 56);
-}
 
 .spinner-container {
   height: 100px;

diff --git a/webapp-frontend/src/app/caas-ingress/caas-ingress.component.html b/webapp-frontend/src/app/caas-ingress/caas-ingress.component.html
index fd22802..0799ec6 100644 (file)
--- a/webapp-frontend/src/app/caas-ingress/caas-ingress.component.html
+++ b/webapp-frontend/src/app/caas-ingress/caas-ingress.component.html
@@ -19,7 +19,7 @@
 -->
 
 <div class="caas-ingress__section">
-  <h3 class="caas-ingress__header">{{cluster}} Cluster Pods View</h3>
+  <h3 class="rd-global-page-title">{{cluster}} Cluster Pods View</h3>
 
   <table mat-table [dataSource]="dataSource" matSort class="caas-ingress-table mat-elevation-z8">
 

diff --git a/webapp-frontend/src/app/caas-ingress/caas-ingress.component.scss b/webapp-frontend/src/app/caas-ingress/caas-ingress.component.scss
index f977be7..770fcf5 100644 (file)
--- a/webapp-frontend/src/app/caas-ingress/caas-ingress.component.scss
+++ b/webapp-frontend/src/app/caas-ingress/caas-ingress.component.scss
@@ -21,15 +21,6 @@
  .caas-ingress__section {
 }
 
-.caas-ingress__header {
-    text-align: center;
-    color: #432c85;
-    font-size: 50px;
-    font-weight: 200;
-    letter-spacing: .1em;
-    transform: translate(149 56);
-}
-
 .spinner-container {
   height: 100px;
   width: 100px;

diff --git a/webapp-frontend/src/app/catalog/catalog.component.html b/webapp-frontend/src/app/catalog/catalog.component.html
index fd58336..78d525c 100644 (file)
--- a/webapp-frontend/src/app/catalog/catalog.component.html
+++ b/webapp-frontend/src/app/catalog/catalog.component.html
@@ -18,7 +18,7 @@
   ========================LICENSE_END===================================
   -->
 <div class="catalog__section">
-  <h3 class="catalog__header">xApp Catalog</h3>
+  <h3 class="rd-global-page-title">xApp Catalog</h3>
 
   <table mat-table [dataSource]="dataSource" matSort class="catalog-table mat-elevation-z8">
 

diff --git a/webapp-frontend/src/app/catalog/catalog.component.scss b/webapp-frontend/src/app/catalog/catalog.component.scss
index 7a98d79..49195a4 100644 (file)
--- a/webapp-frontend/src/app/catalog/catalog.component.scss
+++ b/webapp-frontend/src/app/catalog/catalog.component.scss
@@ -20,15 +20,6 @@
  .catalog__section {
 }
 
-.catalog__header {
-    text-align: center;
-    color: #432c85;
-    font-size: 50px;
-    font-weight: 200;
-    letter-spacing: .1em;
-    transform: translate(149 56);
-}
-
 .spinner-container {
   height: 100px;
   width: 100px;

diff --git a/webapp-frontend/src/app/ran-control/ran-control.component.html b/webapp-frontend/src/app/ran-control/ran-control.component.html
index a4ab4ce..01dd292 100644 (file)
--- a/webapp-frontend/src/app/ran-control/ran-control.component.html
+++ b/webapp-frontend/src/app/ran-control/ran-control.component.html
@@ -19,7 +19,7 @@
 -->
 
 <div class="ran-control__section">
-  <h3 class="ran-control__header">RAN Connections</h3>
+  <h3 class="rd-global-page-title">RAN Connections</h3>
 
   <button mat-raised-button (click)="setupRANConnection()">Setup Connection..</button>
   <button mat-raised-button color="warn" class="disconnect-all-button"

diff --git a/webapp-frontend/src/app/ran-control/ran-control.component.scss b/webapp-frontend/src/app/ran-control/ran-control.component.scss
index 74cd790..c86d062 100644 (file)
--- a/webapp-frontend/src/app/ran-control/ran-control.component.scss
+++ b/webapp-frontend/src/app/ran-control/ran-control.component.scss
@@ -20,15 +20,6 @@
  .ran-control__section {
 }
 
-.ran-control__header {
-    text-align: center;
-    color: #432c85;
-    font-size: 50px;
-    font-weight: 200;
-    letter-spacing: .1em;
-    transform: translate(149 56);
-}
-
 .disconnect-all-button {
     float: right;
 }

diff --git a/webapp-frontend/src/app/stats/stats.component.html b/webapp-frontend/src/app/stats/stats.component.html
index c3f1107..8975c5f 100644 (file)
--- a/webapp-frontend/src/app/stats/stats.component.html
+++ b/webapp-frontend/src/app/stats/stats.component.html
@@ -19,7 +19,7 @@
   -->
 <div class="stats__section">
 
-       <h3 class="stats__header">Platform stats</h3>
+       <h3 class="rd-global-page-title">Platform stats</h3>
 
        <mat-card class="bar-chart-card">
                <mat-card-header>

diff --git a/webapp-frontend/src/app/stats/stats.component.scss b/webapp-frontend/src/app/stats/stats.component.scss
index d8310c1..5cfc7ab 100644 (file)
--- a/webapp-frontend/src/app/stats/stats.component.scss
+++ b/webapp-frontend/src/app/stats/stats.component.scss
@@ -20,15 +20,6 @@
  .stats__section {
 }
 
-.stats__header {
-    text-align: center;
-    color: #432c85;
-    font-size: 40px;
-    font-weight: 200;
-    letter-spacing: .1em;
-    transform: translate(149 56);
-}
-
 .bar-chart-card {
     height: 100%;
     width: 100%;

diff --git a/webapp-frontend/src/app/user/user.component.html b/webapp-frontend/src/app/user/user.component.html
index 69a94e6..5bffc79 100644 (file)
--- a/webapp-frontend/src/app/user/user.component.html
+++ b/webapp-frontend/src/app/user/user.component.html
@@ -18,7 +18,7 @@
   ========================LICENSE_END===================================
 -->
 <div class="user__section">
-  <h3 class="user__header">Users</h3>
+  <h3 class="rd-global-page-title">Users</h3>
   <button mat-raised-button (click)="addUser()">Add User</button>
   <div class="spinner-container" *ngIf="dataSource.loading$ | async">
     <mat-spinner></mat-spinner>

diff --git a/webapp-frontend/src/app/user/user.component.scss b/webapp-frontend/src/app/user/user.component.scss
index 6d63dd9..f3a5d89 100644 (file)
--- a/webapp-frontend/src/app/user/user.component.scss
+++ b/webapp-frontend/src/app/user/user.component.scss
@@ -20,15 +20,6 @@
 .user__section {
 }
 
-.user__header {
-    text-align: center;
-    color: #432c85;
-    font-size: 50px;
-    font-weight: 200;
-    letter-spacing: .1em;
-    transform: translate(149 56);
-}
-
 .spinner-container {
     height: 360px;
     width: 390px;

diff --git a/webapp-frontend/src/styles.scss b/webapp-frontend/src/styles.scss
index 7f1a0b8..fc7a29e 100644 (file)
--- a/webapp-frontend/src/styles.scss
+++ b/webapp-frontend/src/styles.scss
@@ -16,3 +16,10 @@ html, body {
   text-align: center;
   font-size: 20px;
 }
+
+.rd-global-page-title {
+  margin-left: 0.5%;
+  color: #432c85;
+  font-size: 25px;
+  font-weight: 100;
+}
\ No newline at end of file