Mohin/refactor notificationbar (#208)

Signed-off-by: mohin7 <[email protected]>

layouts/_default/baseof.html

@@ -172,6 +172,18 @@
     {{ block "header-top" . }}
     <!-- new navbar area start  -->
     <div class="navbar-area active-headroom header--fixed">
+      <!-- iframe  -->
+      {{ $currentPageType := index (split .Page.Permalink "/") 3 }}
+      <iframe src="https://appscode.com/notification-top/" id="notification" class="{{ if eq $currentPageType "docs" }} is-hidden {{ end }}" frameborder="0" scrolling="no" onload="resizeIframe()" style="height: 38px; width: 100%; display: flex; overflow: hidden;"></iframe>
+
+      <script>
+          function resizeIframe() {
+          var iframe = document.getElementById("notification");
+          iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
+        }
+      </script>
+      <!-- iframe  -->
+
       <div class="navbar-appscode-wrapper ">
         <!-- appscode navbar start  -->
         {{ $currentPageType := index (split .Page.Permalink "/") 3 }}
@@ -560,9 +572,9 @@ <h6><a href="{{ $p.RelPermalink }}">{{ $p.Title }}</a></h6>
       </div>
       {{ block "header-bottom" . }}
       {{ $p := (index .Site.Data.products .Site.Params.product_key) }}
-      <div class="navbar-appscode-wrapper navbar-product">
+      {{ $currentPageType := index (split .Page.Permalink "/") 3 }}
+      <div class="navbar-appscode-wrapper navbar-product {{ if eq $currentPageType "docs" }} is-docs-page {{ end }}">
         <!-- product navbar start  -->
-        {{ $currentPageType := index (split .Page.Permalink "/") 3 }}
         <div class="navbar-appscode{{ if eq $currentPageType "docs" }} bb-1 {{ else }}
           container{{ end }}">
           <!-- navbar left start  -->

layouts/articles/list.html

@@ -6,8 +6,8 @@
 <!-- articles area for page start -->
 <section class="articles-area">
   <div class="container">
-    <div class="columns is-multiline">
-      <div class="column is-12">
+    <div class="columns is-multiline pb-0 mb-0">
+      <div class="column is-12 pb-0 mb-0">
         <h4>All Articles</h4>
       </div>
       {{ range $idx, $p := $pages.ByDate.Reverse }}

static/assets/sass/base/_global.scss

@@ -453,7 +453,7 @@ Responsive Classes
   }
 
   .container {
-    max-width: 1100px !important;
+    max-width: 1200px !important;
   }
 }
 

static/assets/sass/components/_navbar.scss

@@ -3,6 +3,20 @@
   position: relative;
   z-index: 99;
   background-color: $ac-white;
+  iframe#notification {
+    @media (min-width: 250px) and (max-width:316px) {
+     height: 108px;
+    }
+    @media (min-width: 317px) and (max-width:590px) {
+      height: 90px;
+     }
+    @media (min-width: 591px) and (max-width: 731px) {
+      height: 70px;
+    }
+    @media (min-width: 732px) {
+      height: 38px;
+    }
+  }
 }
 
 .navbar-appscode-wrapper {
@@ -55,7 +69,7 @@
     border-left: 1px solid $ac-white-light;
 
     .mega-menu-wrapper {
-      top: 104px;
+      top: 54px;
     }
 
     .navbar-right {
@@ -888,11 +902,14 @@
 }
 
 .headroom--unpinned {
-  transform: translateY(-165px);
+  transform: translateY(-156px);
 
   .navbar-appscode-wrapper {
     &.navbar-product {
-      transform: translateY(104px);
+      transform: translateY(56px);
+      &.is-docs-page {
+        transform: translateY(94px);
+      }
     }
   }
 }
@@ -921,7 +938,7 @@ Responsive Classes
     .navbar-appscode-wrapper {
       &.navbar-product {
         padding: 0 0;
-        transform: translateY(104px);
+        transform: translateY(0px);
 
         .navbar-appscode {
           .navbar-right {

static/assets/sass/layouts/_articles.scss

@@ -1,5 +1,5 @@
 .articles-area {
-  padding-top: 140px;
+  padding-top: 170px;
   padding-bottom: 40px;
 }
 .single-article-card {