External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-13 11:00:03 -03:30
Code Issues Packages Projects Releases Wiki Activity

Fixed site footer unhappiness. The footer sometimes had a bottom margin. Slimmed the footer down as well. Made sure it looks good down to phone size.

Browse Source
This commit is contained in:
Chris Houseknecht 2014-03-05 11:14:03 -05:00
parent 770eab8af1
commit bc6edeb65c
2 changed files with 63 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
awx/ui/static/less/ansible-ui.less
View File

@ -347,21 +347,33 @@ dd {
min-height: 15px;
}
/* footer variables */
@footer-height: 96px;
@footer-margin: 40px;
@push-height: (@footer-height + @footer-margin);
@push-margin: 0px;
#wrap {
min-height: 100%;
height: 100%;
height: auto !important;
margin: 0 auto -(@push-height + @push-margin);
}
#push {
height: (@footer-height + @footer-margin); /* push height = footer height + footer padding */
margin-bottom: (@footer-margin);
}
/* The sticky footer: http://css-tricks.com/snippets/css/sticky-footer, with less variables */
@footer-height: 68px;
@footer-margin: 40px;
@push-height: (@footer-height + @footer-margin);
#wrap {
min-height: 100%;
height: 100%;
height: auto !important;
margin-bottom: -(@push-height);
}
#wrap:after {
content: "";
display: block;
}
.site-footer, #wrap:after {
height: @footer-height;
}
.site-footer {
margin-top: @footer-margin;
}
/*#push {
height: @push-height;
margin-bottom: (@footer-margin);
}*/
#navbar-container, .main-menu {
width: 100%;
@ -373,6 +385,7 @@ dd {
}
.main-menu .nav > li > a {
font-size: 12px;
color: @grey;
}
@ -428,15 +441,21 @@ dd {
text-decoration: none;
}
.navbar.site-footer {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
margin-bottom: 0;
}
.site-footer {
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 60px;
color: @grey;
text-align: center;
background-color: @black;
padding-top: 10px;
padding-bottom: 10px;
font-size: 12px;
a,
a:active,
a:visited {
@ -444,11 +463,11 @@ dd {
}
a:hover {
color: @white;
color: @blue;
}
.help {
padding-top: 18px;
padding-top: 14px;
font-weight: normal;
}
@ -457,7 +476,7 @@ dd {
}
.logo img {
max-width: 125px;
max-width: 46px;
}
.copyright {
@ -1483,7 +1502,7 @@ tr td button i {
/* Portrait tablet to landscape and desktop */
@media (max-width: 1200px) {
/*@media (max-width: 1200px) {
.site-footer {
.logo {
text-align: center;
@ -1491,7 +1510,7 @@ tr td button i {
margin-bottom: 10px;
}
}
}
}*/
@media (min-width: 768px) and (max-width: 1199px) {
@ -1569,6 +1588,17 @@ tr td button i {
.label-text {
text-align: left;
}
}
.site-footer {
height: 145px;
padding-top: 5px;
padding-bottom: 5px;
.logo {
text-align: center;
padding-top: 10px;
margin-bottom: 10px;
}
}
}

15
awx/ui/templates/ui/index.html
View File

@ -136,9 +136,7 @@
</head>
<body>
<div id="wrap">
<div id="navbar-container">
<div class="navbar navbar-inverse navbar-fixed-top main-menu" role="navigation">
<div class="container-fluid">
@ -363,27 +361,26 @@
<div class="spinny"><i class="fa fa-cog fa-spin fa-2x"></i> <p>working...</p></div>
<div id="push"></div>
</div>
</div><!-- wrap -->
<div class="site-footer">
<div class="navbar navbar-inverse site-footer">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 text-left help">
<div class="col-sm-3 text-left help">
<a href="https://ansibleworks.zendesk.com/anonymous_requests/new"
target="_blank"><i class="fa fa-question-circle"></i> Contact Support</a>
</div>
<div class="col-lg-6 text-center copyright">
<div class="col-sm-6 text-center copyright">
<a href="http://www.ansible.com">Ansible Tower <span ng-bind="version"></span><br />Copyright &copy; 2014 Ansible, Inc. All rights reserved.</a>
</div>
<div class="col-lg-3">
<div class="col-sm-3">
<div class="logo">
<a href="http://www.ansible.com" target="_blank"><img src="{{ STATIC_URL }}img/tower_console_bug.png" /></a>
</div>
</div>
</div>
</div>
</div><!-- site footer -->
</div>
<script src="{{ STATIC_URL }}lib/twitter/dist/js/bootstrap.min.js"></script>
<script src="{{ STATIC_URL }}lib/js-yaml/js-yaml.min.js"></script>