From 0bbc0e00a94186bb3642d23968132f803942eae8 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Tue, 22 Jan 2019 11:19:40 -0500
Subject: [PATCH 1/3] Fix padding around link on hover

---
 styles/components/_footer.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/styles/components/_footer.scss b/styles/components/_footer.scss
index eff6e76a..4599d203 100644
--- a/styles/components/_footer.scss
+++ b/styles/components/_footer.scss
@@ -13,13 +13,14 @@
 
   .app-footer__info {
     flex-grow: 1;
+    padding-left: 0.8rem;
 
     .app-footer__info__link {
       margin: (-$gap * 2) (-$gap);
 
       .icon--footer {
         @include icon-size(16);
-        margin: 0.8rem;
+        margin: 0rem 0.8rem 0rem 0rem;
       }
     }
   }

From ffb05bbc7415058aaca63aeb207faa0917200084 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Wed, 23 Jan 2019 10:57:13 -0500
Subject: [PATCH 2/3] Use variable for the footer height

---
 styles/components/_footer.scss        | 1 +
 styles/components/_global_layout.scss | 2 +-
 styles/core/_variables.scss           | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/styles/components/_footer.scss b/styles/components/_footer.scss
index 4599d203..f6871dd5 100644
--- a/styles/components/_footer.scss
+++ b/styles/components/_footer.scss
@@ -10,6 +10,7 @@
   left: 0;
   bottom: 0;
   width: 100%;
+  height: $footer-height;
 
   .app-footer__info {
     flex-grow: 1;
diff --git a/styles/components/_global_layout.scss b/styles/components/_global_layout.scss
index e9536579..ffc02311 100644
--- a/styles/components/_global_layout.scss
+++ b/styles/components/_global_layout.scss
@@ -14,7 +14,7 @@
   display: flex;
   flex-wrap: nowrap;
   flex-grow: 1;
-  margin-bottom: 50px;
+  margin-bottom: $footer-height;
 
   .global-navigation {
     margin-top: -1px;
diff --git a/styles/core/_variables.scss b/styles/core/_variables.scss
index fd101e90..3586faa9 100644
--- a/styles/core/_variables.scss
+++ b/styles/core/_variables.scss
@@ -10,6 +10,7 @@ $icon-size-small:         2.4rem;
 $hover-transition-time:   0.2s;
 $search-input-height:     4.4rem;
 $search-button-width:     5.0rem;
+$footer-height:           5.0rem;
 
 /*
  * USWDS Variables

From 6fbb49d74e7d77148d57d5c8c9619ccced42c625 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Wed, 23 Jan 2019 10:58:13 -0500
Subject: [PATCH 3/3] Add event listener for focus so elements hidden behind
 the footer will scroll to the center of the screen

---
 js/index.js        | 11 +++++++++++
 js/lib/viewport.js | 15 +++++++++++++++
 2 files changed, 26 insertions(+)
 create mode 100644 js/lib/viewport.js

diff --git a/js/index.js b/js/index.js
index 455c89d7..68b6a6e4 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,5 +1,7 @@
 import 'svg-innerhtml'
 import 'babel-polyfill'
+import ally from 'ally.js'
+
 
 import classes from '../styles/atat.scss'
 import Vue from 'vue/dist/vue'
@@ -28,6 +30,7 @@ import MembersList from './components/members_list'
 import LocalDatetime from './components/local_datetime'
 import RequestsList from './components/requests_list'
 import ConfirmationPopover from './components/confirmation_popover'
+import {isNotInVerticalViewport} from './lib/viewport'
 
 Vue.config.productionTip = false
 
@@ -77,6 +80,14 @@ const app = new Vue({
       const modal = modalOpen.getAttribute("data-modal")
       this.openModal(modal)
     }
+
+    ally.query.focusable().forEach( function(el) {
+      el.addEventListener('focus', function(){
+        if (isNotInVerticalViewport(el)) {
+          el.scrollIntoView({block: 'center'})
+        }
+      })
+    })
   },
   delimiters: ['!{', '}']
 })
diff --git a/js/lib/viewport.js b/js/lib/viewport.js
new file mode 100644
index 00000000..afe5aa8d
--- /dev/null
+++ b/js/lib/viewport.js
@@ -0,0 +1,15 @@
+export const isNotInVerticalViewport = (el) => {
+  const bounds = el.getBoundingClientRect()
+
+  if (bounds.top < 0) {
+    return true
+  }
+
+  if (bounds.bottom > ((window.innerHeight - 50))) {
+    // 50 is a magic number to offset for the sticky footer
+    // see variables.scss for $footer-height
+    return true
+  }
+
+  return false
+}