Adjust CSS and HTML for main container

Use a calculated height for the main container body
so the tables and other content appear at the top,
not floating down to be vertically centered.

Signed-off-by: Sarkar, Anand (as0481) <as0481@att.com>
Issue-Id: RICPLT-1339
Change-Id: Ib4fb95eccfd7114eb602dd212a7b8f1136bfc45c
Signed-off-by: Lott, Christopher (cl778h) <cl778h@att.com>

diff --git a/docs/release-notes.rst b/docs/release-notes.rst
index 6fa3759..cddc051 100644 (file)
--- a/docs/release-notes.rst
+++ b/docs/release-notes.rst
@@ -20,7 +20,7 @@
 RIC Dashboard Release Notes
 ===========================
 
-Version 1.0.4, 11 June 2019
+Version 1.0.4, 13 June 2019
 ---------------------------
 * Add AC xApp neighbor control screen
 * Add ANR xApp neighbor cell relation table
@@ -29,6 +29,7 @@ Version 1.0.4, 11 June 2019
 * Add disconnect-all button to RAN connection screen
 * Update ANR xApp client to spec version 0.0.8
 * Update E2 manager client to spec version 20190611
+* Adjust CSS and HTML for main container positioning
 
 Version 1.0.3, 28 May 2019
 --------------------------

diff --git a/webapp-frontend/src/app/admin/admin.component.css b/webapp-frontend/src/app/admin/admin.component.css
index 6161ce0..380dd35 100644 (file)
--- a/webapp-frontend/src/app/admin/admin.component.css
+++ b/webapp-frontend/src/app/admin/admin.component.css
@@ -17,9 +17,7 @@
  * limitations under the License.
  * ========================LICENSE_END===================================
  */
-.admin__section {
-    position: relative;
-    top: -50px;
+ .admin__section {
 }
 
 .admin__header {

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 fd03446..094a32d 100644 (file)
--- a/webapp-frontend/src/app/anr-xapp/anr-xapp.component.scss
+++ b/webapp-frontend/src/app/anr-xapp/anr-xapp.component.scss
@@ -18,8 +18,6 @@
  * ========================LICENSE_END===================================
  */
  .anr__section {
-    position: relative;
-    top: -50px;
 }
 
 .anr__header {

diff --git a/webapp-frontend/src/app/app.component.css b/webapp-frontend/src/app/app.component.css
index 43e88c1..b8d1778 100644 (file)
--- a/webapp-frontend/src/app/app.component.css
+++ b/webapp-frontend/src/app/app.component.css
@@ -304,9 +304,16 @@ main {
 ================
 */
 
-.main-container__bg {
+.main__container {
   height: 100%;
   width: 100%;
+}
+
+.main__container__body {
+  min-height: calc(100vh - 140px);
+}
+
+.main-container__bg {
   position: absolute;
   top: 0;
   left: 0;
@@ -329,11 +336,9 @@ main {
 */
 .main__footer {
   background: transparent;
-  /* position: absolute;
-  bottom: 1rem;
-  left: 1.5rem; */
   margin: 10px;
   z-index: 100;
+  height: 35px;
 }
 
 .main__footer-dark {

diff --git a/webapp-frontend/src/app/app.component.html b/webapp-frontend/src/app/app.component.html
index 2d4834f..1a6a640 100644 (file)
--- a/webapp-frontend/src/app/app.component.html
+++ b/webapp-frontend/src/app/app.component.html
@@ -43,6 +43,7 @@
 </aside>
 
 <div class="root__container">
+
   <header [ngClass]="{'main__header-dark': darkModeActive}" class="main__header">
 
     <div class="left__section3Col">
@@ -85,8 +86,10 @@
 
   <!-- Main Content -->
   <main class="main__container">
-    <div class="main-container__bg" [ngClass]="{'main-container__bg-dark': darkModeActive}"></div>
-    <router-outlet></router-outlet>
+    <div class = main__container__body>
+      <div class="main-container__bg" [ngClass]="{'main-container__bg-dark': darkModeActive}"></div>
+      <router-outlet></router-outlet>
+    </div>
   </main>
 
   <!-- Footer -->

diff --git a/webapp-frontend/src/app/catalog/catalog.component.css b/webapp-frontend/src/app/catalog/catalog.component.css
index 00617b6..91510bb 100644 (file)
--- a/webapp-frontend/src/app/catalog/catalog.component.css
+++ b/webapp-frontend/src/app/catalog/catalog.component.css
@@ -17,9 +17,7 @@
  * limitations under the License.
  * ========================LICENSE_END===================================
  */
-.catalog__section {
-    position: relative;
-    top: -150px;
+ .catalog__section {
 }
 
 .catalog__header {

diff --git a/webapp-frontend/src/app/control/control.component.css b/webapp-frontend/src/app/control/control.component.css
index e589e3e..d90ce2e 100644 (file)
--- a/webapp-frontend/src/app/control/control.component.css
+++ b/webapp-frontend/src/app/control/control.component.css
@@ -17,10 +17,7 @@
  * limitations under the License.
  * ========================LICENSE_END===================================
  */
-
-.control__section {
-    position: relative;
-    top: -150px;
+ .control__section {
 }
 
 .control__header {

diff --git a/webapp-frontend/src/app/ran-connection/ran-connection.component.scss b/webapp-frontend/src/app/ran-connection/ran-connection.component.scss
index 7589e9a..72db5c3 100644 (file)
--- a/webapp-frontend/src/app/ran-connection/ran-connection.component.scss
+++ b/webapp-frontend/src/app/ran-connection/ran-connection.component.scss
@@ -17,9 +17,7 @@
  * limitations under the License.
  * ========================LICENSE_END===================================
  */
-.ranconnect__section {
-    position: relative;
-    top: -50px;
+ .ranconnect__section {
 }
 
 .ranconnect__header {

diff --git a/webapp-frontend/src/app/stats/stats.component.scss b/webapp-frontend/src/app/stats/stats.component.scss
index f36ecee..9ba1bad 100644 (file)
--- a/webapp-frontend/src/app/stats/stats.component.scss
+++ b/webapp-frontend/src/app/stats/stats.component.scss
@@ -1,6 +1,23 @@
-.stats__section {
-    position: relative;
-    top: -10px;
+/*-
+ * ========================LICENSE_START=================================
+ * O-RAN-SC
+ * %%
+ * Copyright (C) 2019 AT&T Intellectual Property and Nokia
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================LICENSE_END===================================
+ */
+ .stats__section {
 }
 
 .stats__header {