[PORTAL]Adjust Container height in case no header

Adjust Container height in case no header required and sdk is getting
open inside portal

Issue-ID: PORTAL-1025
Change-Id: Idff007af2e5eaff3072693d85127d80ca7a17fe7
Signed-off-by: Sudarshan Kumar <sudarshan.kumar@att.com>

diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.html
index c86a069..f91e882 100644 (file)
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.html
@@ -1,5 +1,5 @@
 <div class="sidebar" [ngClass]="{'siderbar-height': showHeader, 'siderbar-height-noHeader': !showHeader}" >
-       <div class="sidebar-list" [ngClass]="{collapsed: collapsed}">
+       <div class="sidebar-list" [ngClass]="{collapsed: collapsed, 'remove-header-margin': showHeader == false}">
  
         <nav  [ngClass]="{sidebarPushRight: isActive, collapsed: collapsed}">
                
@@ -47,7 +47,7 @@
                 </div>
         </nav>
  </div>
-        <div class="toggle-button" [ngClass]="{collapsed: collapsed}" (click)="toggleCollapsed()">
+        <div class="toggle-button" [ngClass]="{collapsed: collapsed, 'toggle-button-no-header': showHeader == false }" (click)="toggleCollapsed()">
                 <!-- <i class="fa fa-angle-double-{{collapsed?'right':'left'}}"></i>&nbsp; -->
                 <i class="icon ion-md-arrow-{{collapsed?'dropright':'dropleft'}}" style="float:right"></i> 
                         <i class="icon ion-md-arrow-{{collapsed?'dropright':'dropleft'}}" style="float:right"></i>&nbsp;

diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.scss b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.scss
index 59b7e34..50bc1b5 100644 (file)
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.scss
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.scss
@@ -153,6 +153,10 @@
          }
      }
  }
+
+ .remove-header-margin{
+    top: 4.2em;
+ }
  
  .nested-menu {
      .list-group-item {
@@ -215,7 +219,7 @@
  }
  .toggle-button {
      position: fixed;
-     width: 236px;
+     width: 235px;
      cursor: pointer;
      padding: 12px;
      // bottom: 5.5em;
@@ -238,6 +242,10 @@
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
  }
+
+ .toggle-button-no-header{
+    top: 8px;
+ }
  
  .collapsed {
      width: 60px;

diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/layout.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/layout.component.html
index bf4507f..2ae6c46 100644 (file)
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/layout.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/layout.component.html
@@ -4,7 +4,7 @@
        </section>
 </div>
 
-<section class="main-container" [ngClass]="{collapsed: collapedSideBar}">
+<section class="main-container" [ngClass]="{'collapsed': collapedSideBar , 'remove-header': showHeader == false }">
        <app-sidebar (collapsedEvent)="receiveCollapsed($event)"></app-sidebar>
 
        <router-outlet></router-outlet>

diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/layout.component.scss b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/layout.component.scss
index 561f493..141da81 100644 (file)
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/layout.component.scss
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/layout.component.scss
@@ -52,6 +52,11 @@
     position: relative;
     overflow: hidden;
 }
+
+.remove-header{
+    margin-top: -9px;
+}
+
 .collapsed {
     margin-left: 60px;
 }