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 +} diff --git a/styles/components/_footer.scss b/styles/components/_footer.scss index eff6e76a..f6871dd5 100644 --- a/styles/components/_footer.scss +++ b/styles/components/_footer.scss @@ -10,16 +10,18 @@ left: 0; bottom: 0; width: 100%; + height: $footer-height; .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; } } } 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