Merge pull request #567 from dod-ccpo/sticky-footer-fixes

Sticky footer fixes
This commit is contained in:
leigh-mil 2019-01-23 15:07:09 -05:00 committed by GitHub
commit 39eeffb323
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 31 additions and 2 deletions

View File

@ -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: ['!{', '}']
})

15
js/lib/viewport.js Normal file
View File

@ -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
}

View File

@ -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;
}
}
}

View File

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

View File

@ -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