pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Sticky footer
This commit is contained in:
leigh-mil 2019-01-17 14:05:03 -05:00 committed by GitHub
commit dffb053574
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 14 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
styles/components/_footer.scss
View File

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

1
styles/components/_global_layout.scss
View File

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

15
templates/footer.html
View File

@ -2,20 +2,9 @@
<footer class='app-footer'> <footer class='app-footer'>
<div class='app-footer__info'> <div class='app-footer__info'>
<h5 class='app-footer__info__title'> <a href="#" class='icon-link app-footer__info__link' target='_blank' rel='noopener noreferrer'>
<a href="{{ url_for('atst.about') }}" class='icon-link' target='_blank' rel='noopener noreferrer'> {{ Icon('help', classes='icon--footer') }}
{{ "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') }}
<span>{{ "footer.jedi_help_link_text" | translate }}</span> <span>{{ "footer.jedi_help_link_text" | translate }}</span>
</a> </a>
</div> </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> </footer>

2
translations.yaml
View File

@ -41,7 +41,7 @@ components:
footer: footer:
about_link_text: Joint Enterprise Defense Infrastructure about_link_text: Joint Enterprise Defense Infrastructure
browser_support: JEDI Cloud supported on these web browsers 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: forms:
ccpo_review: 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>. 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>.