refactor to encapsulate all side affects of displaying announcement bnr in one file

9 years ago · 542b04558f
3 changed files with 34 additions and 18 deletions
--- a/website/source/assets/stylesheets/_announcement-bnr.scss
+++ b/website/source/assets/stylesheets/_announcement-bnr.scss
@ -6,6 +6,38 @@ $enterprise-bnr-font-weight: 300;
 $enterprise-bnr-consul-color: #B52A55;
 $enterprise-color-dark-white: #A9B1B5;

+body{
+  // when _announcment-bnr.erb (ie. Consul Enterprise Announcment) is being used in layout we need to push down content to accomodate
+  // add this class to body
+  &.-displaying-bnr{
+    #header{
+      > .container{
+        padding-top: 8px;
+        -webkit-transform: translateY(32px);
+            -ms-transform: translateY(32px);
+                transform: translateY(32px);
+      }
+    }
+
+    #jumbotron {
+      .container{
+        .jumbo-logo-wrap{
+          margin-top: 160px;
+        }
+      }
+    }
+
+    &.page-sub{
+      #header{
+        > .container{
+          padding-bottom: 32px;
+        }
+      }
+    }
+  }
+}
+
+
 #announcement-bnr {
  height: 40px;
  flex-shrink: 0;
--- a/website/source/assets/stylesheets/_header.scss
+++ b/website/source/assets/stylesheets/_header.scss
@ -8,11 +8,6 @@ body.page-sub{
  #header{
    @include consul-gradient-bg();

-    &.-displaying-bnr{
-      > .container{
-        padding-bottom: 32px;
-      }
-    }
    .navbar-brand {
      .logo{
        &:hover{
@ -24,17 +19,6 @@ body.page-sub{
 }

 #header {
-  // when _announcment-bnr.erb (ie. Consul Enterprise Announcment) is being used in layout we need to push down content to accomodate
-  // add this class
-  &.-displaying-bnr{
-    > .container{
-      padding-top: 8px;
-      -webkit-transform: translateY(32px);
-          -ms-transform: translateY(32px);
-              transform: translateY(32px);
-    }
-  }
-
  .navbar-brand {
    .logo{
      width: $project-logo-width;
--- a/website/source/layouts/_header.erb
+++ b/website/source/layouts/_header.erb
@ -24,8 +24,8 @@
    <%= yield_content :head %>
  </head>

-  <body class="page-<%= current_page.data.page_title ? "#{current_page.data.page_title} layout-#{current_page.data.layout} page-sub" : "home layout-#{current_page.data.layout}" %>">
-    <div id="header" class="-displaying-bnr navigation <%= current_page.data.page_title == "home" ? "" : "navbar-static-top" %>">
+  <body class="page-<%= current_page.data.page_title ? "#{current_page.data.page_title} layout-#{current_page.data.layout} page-sub" : "home layout-#{current_page.data.layout}" %> -displaying-bnr">
+    <div id="header" class="navigation <%= current_page.data.page_title == "home" ? "" : "navbar-static-top" %>">
      <%= partial "layouts/announcement-bnr" %>
      <div class="container">
    		<div class="row">