Merge pull request #567 from dod-ccpo/sticky-footer-fixes
Sticky footer fixes
This commit is contained in:
commit
39eeffb323
11
js/index.js
11
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: ['!{', '}']
|
||||
})
|
||||
|
15
js/lib/viewport.js
Normal file
15
js/lib/viewport.js
Normal 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
|
||||
}
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -14,7 +14,7 @@
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-grow: 1;
|
||||
margin-bottom: 50px;
|
||||
margin-bottom: $footer-height;
|
||||
|
||||
.global-navigation {
|
||||
margin-top: -1px;
|
||||
|
@ -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
|
||||
|
Loading…
x
Reference in New Issue
Block a user