Merge pull request #366 from dod-ccpo/ui/add-usa-header

Add USA header to base templates

styles/atat.scss

@@ -36,6 +36,7 @@
 @import 'components/selector';
 @import 'components/budget_chart';
 @import 'components/audit_log';
+@import 'components/usa_banner';
 
 @import 'sections/login';
 @import 'sections/home';

styles/components/_usa_banner.scss

@@ -0,0 +1,27 @@
+.usa-banner {
+  display: flex;
+  align-items: center;
+  padding: ($gap / 2) $gap;
+  z-index: 5;
+
+  img {
+    flex-grow: 0;
+    margin-right: $gap;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  button.icon-tooltip {
+    @include small-label;
+    color: $color-blue;
+    padding: 0 ($gap / 2);
+    margin: 0 ($gap / 2);
+    font-weight: normal;
+
+    .icon {
+      @include icon-size(12);
+    }
+  }
+}

templates/base.html

@@ -16,6 +16,8 @@
 
     {% block template_vars %}{% endblock %}
 
+    {% include 'components/usa_header.html' %}
+
     {% include 'navigation/topbar.html' %}
 
     <div class='global-layout'>

templates/base_public.html

@@ -16,6 +16,8 @@
 
 <div id='app-root'>
 
+  {% include 'components/usa_header.html' %}
+
   <header class="topbar topbar--public">
     <nav class="topbar__navigation">
       <a href="{{ url_for('atst.home') }}" class="topbar__link topbar__link--home">
@@ -47,6 +49,10 @@
   {% include 'footer.html' %}
 </div>
 
+{% assets "js_all" %}
+  <script src="{{ ASSET_URL }}"></script>
+{% endassets %}
+
 </body>
 </html>
 

templates/components/usa_header.html

@@ -0,0 +1,10 @@
+{% from "components/tooltip.html" import Tooltip %}
+
+<aside class='usa-banner'>
+  <img src='{{ url_for("static", filename="img/us_flag_small.png") }}' alt='U.S. Flag' />
+  <p>An official website of the United States government</p>
+
+  {{ Tooltip('<p><strong>The .mil means it’s official.</strong><br/>Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.</p><br/><p><strong>The site is secure.</strong><br>The <strong>https://</strong> ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.</p>',
+  title='Here’s how you know') }}
+
+</aside>