Merge pull request #552 from dod-ccpo/sticky-footer

Sticky footer

styles/components/_footer.scss

@@ -1,40 +1,25 @@
 .app-footer {
-  background-color: $color-gray-lightest;
-  border-top: 1px solid $color-gray-lighter;
+  background-color: $color-white;
+  border-top: 1px solid $color-black;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  padding: $gap * 2;
+  padding: $gap * 1.5;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
 
   .app-footer__info {
     flex-grow: 1;
 
-    .app-footer__info__title {
-      display: inline-block;
-      padding: 0;
-      margin: 0 $gap 0 0;
-      //margin: ($gap * 2);
-    }
-
     .app-footer__info__link {
       margin: (-$gap * 2) (-$gap);
-    }
-  }
 
-  .app-footer__browser-support {
-    color: $color-gray;
-    margin: 0;
-    text-align: right;
-    dt, dd {
-      @include h5;
-      display: inline-block;
-    }
-
-    dd {
-      font-weight: normal;
-      &::before {
-        content: '・';
+      .icon--footer {
+        @include icon-size(16);
+        margin: 0.8rem;
       }
     }
   }

styles/components/_global_layout.scss

@@ -14,6 +14,7 @@
   display: flex;
   flex-wrap: nowrap;
   flex-grow: 1;
+  margin-bottom: 50px;
 
   .global-navigation {
     margin-top: -1px;

templates/footer.html

@@ -2,20 +2,9 @@
 
 <footer class='app-footer'>
   <div class='app-footer__info'>
-    <h5 class='app-footer__info__title'>
-      <a href="{{ url_for('atst.about') }}" class='icon-link' target='_blank' rel='noopener noreferrer'>
-        {{ "footer.about_link_text" | translate }}
-      </a>
-    </h5>
-
-    <a href="{{ url_for('atst.helpdocs') }}" class='icon-link app-footer__info__link' target='_blank' rel='noopener noreferrer'>
-      {{ Icon('help') }}
+    <a href="#" class='icon-link app-footer__info__link' target='_blank' rel='noopener noreferrer'>
+      {{ Icon('help', classes='icon--footer') }}
       <span>{{ "footer.jedi_help_link_text" | translate }}</span>
     </a>
   </div>
-
-  <dl class='app-footer__browser-support'>
-    <dt>{{ "footer.browser_support" | translate }}</dt>
-    <dd>Chrome</dd><dd>Firefox</dd><dd>Safari</dd><dd>Edge</dd><dd>IE11 on Windows 10</dd><dd>IE10 on Windows 7</dd>
-  </dl>
 </footer>

translations.yaml

@@ -41,7 +41,7 @@ components:
 footer:
   about_link_text: Joint Enterprise Defense Infrastructure
   browser_support: JEDI Cloud supported on these web browsers
-  jedi_help_link_text: JEDI Cloud Help
+  jedi_help_link_text: Questions? Contact your CCPO Representative
 forms:
   ccpo_review:
     comment_description: Provide instructions or notes for additional information that is necessary to approve the request here. The requestor may then re-submit the updated request or initiate contact outside of AT-AT if further discussion is required. <strong>This message will be shared with the person making the JEDI request.</strong>.