Removing on load calculation (#164)

* removing on load calculation * removing on load calculation * adding the padding top
US-CBP · Oct 11, 2017 · 408fed9 · 408fed9
1 parent 71cdf19
commit 408fed9
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 29 deletions.
diff --git a/app/js/app_navigation.js b/app/js/app_navigation.js
@@ -8,23 +8,11 @@ import $ from 'jquery';
 
     // make the header sticky
     $(window).scrollTop(0)
-    $(window).resize(function () {
+
     // height of only top header
-      var sidebarOffsetTopHeader = $('.cbp-header').height()
-
-    // height of only app header
-      var sidebarOffsetSingleHeader = $('.app-header').height()
-
-    // height of both header
-      var sidebarOffsetDoubleHeader = sidebarOffsetTopHeader + sidebarOffsetSingleHeader
-
-    // dynamically add the offset to sidebar on page load
-      if ($('.app-header').length === 0) {
-        $('.sidebar').css('top', sidebarOffsetTopHeader)
-      } else {
-        $('.sidebar').css('top', sidebarOffsetDoubleHeader)
-      }
+      var sidebarOffsetTopHeader = 50 //this is the height of the cbp-header
 
+
     // scroll function
       $(window).scroll(function () {
       // check when the scroll is more than the height of universal header
@@ -34,23 +22,23 @@ import $ from 'jquery';
         if ($('.app-header').length === 0) {
         // check when the scroll is more than the height of universal header
           if (scroll >= sidebarOffsetTopHeader) {
-            $('.sidebar').css('top', 0)
+            $('.sidebar').removeClass('after-header')
           } else {
-            $('.sidebar').css('top', sidebarOffsetTopHeader)
+            $('.sidebar').addClass('after-header')
           }
         } else {
         // check when the scroll is more than the height of universal header
           if (scroll >= sidebarOffsetTopHeader) {
             $('.app-header').addClass('top')
-            $('.sidebar').css('top', sidebarOffsetSingleHeader)
+           $('.sidebar').removeClass('after-double-header').addClass('after-header')
           } else {
             $('.app-header').removeClass('top')
-            $('.sidebar').css('top', sidebarOffsetDoubleHeader)
+            $('.sidebar').removeClass('after-header').addClass('after-double-header')
           }
         }
       })
 
-      $('.content').css('padding-top', sidebarOffsetSingleHeader)
-    }).resize()
+
+
   })
 }($))
diff --git a/app/kitchensink/index.html b/app/kitchensink/index.html
@@ -97,11 +97,11 @@
               <ul class="nav nav-tabs nav-tabs-light" role="tablist">
 
                 <li class="active" role="presentation">
-                  <a href="http://www.google.com" target="_blank" role="tab" >Active App View Link</a>
+                  <a href="http://www.google.com" target="_blank" role="tab" >Active App Link</a>
                 </li>
 
                 <li class="dropdown" role="presentation">
-                  <a class="pull-left" href="#pane1">View Link w/ View Options Dropdown</a>
+                  <a class="pull-left" href="#pane1">View Link Dropdown</a>
                   <a class="pull-right" href="#pane1"  type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                     <span class="caret"></span>
                     <span class="sr-only">Toggle Dropdown</span>
@@ -121,11 +121,11 @@
                 </li>
 
                 <li role="presentation">
-                  <a href="" role="tab" data-toggle="tab">Normal App View Link</a>
+                  <a href="" role="tab" data-toggle="tab">Normal App Link</a>
                 </li>
 
                 <li class="disabled" role="presentation">
-                  <a role="tab">Disabled App View Link</a>
+                  <a role="tab">Disabled App Link</a>
                 </li>
 
               </ul>
@@ -153,7 +153,7 @@
 
       <div class="container-fluid">
        <div class="content fixed">
-          <div class="cbp-sidebar sidebar" >
+          <div class="cbp-sidebar sidebar after-double-header" >
 
                 <form class="filters">
                   <div class="filter-list" role="tablist">

diff --git a/app/styles/custom/_containers.scss b/app/styles/custom/_containers.scss
@@ -2,7 +2,7 @@
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
-  //overflow-x: hidden;
+  padding-top: 50px;
   .sidebar {
     z-index: 990;
     background-color: $gray-lightest;
@@ -61,7 +61,13 @@
       overflow-y: auto;
       position: fixed;
       bottom: 0;
-      left: 0;     
+      left: 0; 
+      &.after-header{
+        top: 50px;  
+      }
+      &.after-double-header{
+        top: 100px;  
+      }  
     }
     .cbp-sidebar-offset {
       margin-left: 300px;
@@ -89,7 +95,13 @@
       overflow-y: auto;
       position: fixed;
       bottom: 0;
-      left: 0;      
+      left: 0;
+      &.after-header{
+        top: 50px;  
+      }
+      &.after-double-header{
+        top: 100px;  
+      }       
     }
     .cbp-sidebar-offset {
       margin-left: 350px;

diff --git a/app/styles/custom/_navbar.scss b/app/styles/custom/_navbar.scss
@@ -209,6 +209,43 @@
     margin-top: 10px;
     margin-bottom: 8px;
   }
+
+  @media (max-width: $screen-sm-max) {
+    .navbar-header {
+        float: none;
+    }
+    .navbar-left,.navbar-right {
+        float: none !important;
+    }
+    .navbar-toggle {
+        display: block;
+    }
+    .navbar-collapse {
+        border-top: 1px solid transparent;
+        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
+    }
+    .navbar-fixed-top {
+        top: 0;
+        border-width: 0 0 1px;
+    }
+    .navbar-collapse.collapse {
+        display: none!important;
+    }
+    .navbar-nav {
+        float: none!important;
+        margin-top: 7.5px;
+    }
+    .navbar-nav>li {
+        float: none;
+    }
+    .navbar-nav>li>a {
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+    .collapse.in{
+        display:block !important;
+    }
+  }
 }
 
 .app-header-bottom {