Merge pull request #80 from 18F/beta-banner

Beta banner disclaimer
18F · Apr 11, 2016 · c824e69 · c824e69
2 parents 7cd8e04 + 2f59529
commit c824e69
Show file tree

Hide file tree

Showing 10 changed files with 277 additions and 93 deletions.
diff --git a/forecast-admin/forecast/opportunities/templates/includes/disclaimer.html b/forecast-admin/forecast/opportunities/templates/includes/disclaimer.html
@@ -0,0 +1,23 @@
+{% load static from staticfiles %}
+
+<header class="usa-site-header disclaimer" role="banner">
+
+  <div class="usa-disclaimer">
+    <div class="usa-grid-no-padding">
+      <div class="usa-width-one-whole">
+      	<div class="disclaimer-left">
+	        <span class="usa-disclaimer-official">
+	          An official website of the United States Government
+	          <img class="usa-flag_icon" alt="US flag signifying that this is a United States Federal Government website" src="{% static 'assets/img/us_flag_small.png' %}">
+	        </span>
+	      </div>
+	      <div class="disclaimer-right">
+	        <span>
+	          This site is in <a href="https://18f.gsa.gov/dashboard/stages/#beta">beta</a>.
+	        </span>
+	      </div>
+      </div>
+    </div>
+  </div>
+
+</header>
diff --git a/forecast-admin/forecast/opportunities/templates/layout.html b/forecast-admin/forecast/opportunities/templates/layout.html
@@ -29,6 +29,7 @@
 
   </head>
   <body>
+    {% include 'includes/disclaimer.html' %}
     {% include 'includes/header.html' %}
 
     <div class="usa-grid content-wrapper">

diff --git a/forecast-admin/forecast/static/admin/css/base.css b/forecast-admin/forecast/static/admin/css/base.css
@@ -1923,5 +1923,47 @@ li.usa-footer-primary-content:last-child {
 }
 
 #login-form {
-    padding-bottom: 3rem;
+  padding-bottom: 3rem;
+}
+
+/* DISCLAIMER */
+
+
+.usa-disclaimer {
+  background-color: #f1f1f1;
+  font-size: 13px;
+  padding-bottom: 0.5rem;
+  padding-top: 0.5rem;
+}
+
+@media screen and (min-width: 480px) {
+  .usa-disclaimer {
+    font-size: 15px;
+  }
+}
+
+
+.disclaimer {
+  background-color: #f1f1f1;
+  padding-left: 1.25em;
+  padding-right: 1.25em;
+
+}
+
+.usa-flag_icon {
+  margin-left: 0.2rem;
+}
+
+.disclaimer-left {
+  float: left;
+}
+
+.disclaimer-right {
+  float: right;
+}
+
+.usa-grid-no-padding {
+  clear: both;
+  display: table;
+  width: 100%;
 }
diff --git a/forecast-admin/forecast/static/assets/_scss/all.scss b/forecast-admin/forecast/static/assets/_scss/all.scss
@@ -47,6 +47,7 @@
 @import 'components/social-links';
 @import 'components/pagination';
 @import 'components/drawer';
+@import 'components/disclaimer';
 
 // Blocks -------------- //
 

diff --git a/forecast-admin/forecast/static/assets/_scss/components/_disclaimer.scss b/forecast-admin/forecast/static/assets/_scss/components/_disclaimer.scss
@@ -2,6 +2,7 @@
   @include media($small-screen) {
     font-size: $h5-font-size;
   }
+
   background-color: $color-gray-lightest;
   font-size: $h6-font-size;
   padding: {
@@ -10,7 +11,7 @@
   }
 }
 
-// This hides the stage note (i.e. alpha, beta, etc) of the disclaimer for 
+// This hides the stage note (i.e. alpha, beta, etc) of the disclaimer for
 // anything smaller than large screen sizes
 .usa-disclaimer-stage {
   @include media($large-screen) {
@@ -21,5 +22,39 @@
 }
 
 .usa-flag_icon {
-  margin-right: .2rem;
+  margin-left: 0.2rem;
+}
+
+
+.disclaimer {
+  padding-left: $base-padding;
+  padding-right: $base-padding;
+  background-color: $color-gray-lightest;
+}
+
+
+.disclaimer-left {
+  text-align: center;
+}
+
+.disclaimer-right {
+  display: none;
+  float: right;
+}
+
+@include media($medium-screen) {
+  .disclaimer-left {
+    float: left;
+  }
+
+  .disclaimer-right {
+    display: inline-block;
+  }
 }
+
+.usa-grid-no-padding {
+  margin: 0;
+  max-width: initial;
+  padding: 0;
+}
+
diff --git a/forecast-admin/forecast/static/assets/_scss/components/_header.scss b/forecast-admin/forecast/static/assets/_scss/components/_header.scss
@@ -4,8 +4,8 @@
   display: table;
   font-family: $font-sans;
   padding-bottom: $base-padding-lite;
-  padding-left: $grid-margins;
-  padding-right: $grid-margins;
+  padding-left: $base-padding;
+  padding-right: $base-padding;
   padding-top: $base-padding-lite;
   width: 100%;
 }

diff --git a/forecast-admin/forecast/static/assets/_scss/layout/_grid-overrides.scss b/forecast-admin/forecast/static/assets/_scss/layout/_grid-overrides.scss
@@ -3,6 +3,14 @@
   padding-bottom: 0;
 }
 
+.usa-grid-no-padding {
+  @extend .usa-grid;
+
+  margin: 0;
+  max-width: initial;
+  padding: 0;
+}
+
 footer .usa-grid {
   padding: $base-padding;
 }