External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-10 14:09:28 -02: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
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; min-height: 15px;
} }
/* footer variables */ /* The sticky footer: http://css-tricks.com/snippets/css/sticky-footer, with less variables */
@footer-height: 96px; @footer-height: 68px;
@footer-margin: 40px; @footer-margin: 40px;
@push-height: (@footer-height + @footer-margin); @push-height: (@footer-height + @footer-margin);
@push-margin: 0px; #wrap {
#wrap { min-height: 100%;
min-height: 100%; height: 100%;
height: 100%; height: auto !important;
height: auto !important; margin-bottom: -(@push-height);
margin: 0 auto -(@push-height + @push-margin); }
} #wrap:after {
#push { content: "";
height: (@footer-height + @footer-margin); /* push height = footer height + footer padding */ display: block;
margin-bottom: (@footer-margin); }
} .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 { #navbar-container, .main-menu {
width: 100%; width: 100%;
@@ -373,6 +385,7 @@ dd {
} }
.main-menu .nav > li > a { .main-menu .nav > li > a {
font-size: 12px;
color: @grey; color: @grey;
} }
@@ -428,15 +441,21 @@ dd {
text-decoration: none; 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 { .site-footer {
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 60px;
color: @grey; color: @grey;
text-align: center; text-align: center;
background-color: @black; padding-top: 10px;
padding-bottom: 10px;
font-size: 12px;
a, a,
a:active, a:active,
a:visited { a:visited {
@@ -444,11 +463,11 @@ dd {
} }
a:hover { a:hover {
color: @white; color: @blue;
} }
.help { .help {
padding-top: 18px; padding-top: 14px;
font-weight: normal; font-weight: normal;
} }
@@ -457,7 +476,7 @@ dd {
} }
.logo img { .logo img {
max-width: 125px; max-width: 46px;
} }
.copyright { .copyright {
@@ -1483,7 +1502,7 @@ tr td button i {
/* Portrait tablet to landscape and desktop */ /* Portrait tablet to landscape and desktop */
@media (max-width: 1200px) { /*@media (max-width: 1200px) {
.site-footer { .site-footer {
.logo { .logo {
text-align: center; text-align: center;
@@ -1491,7 +1510,7 @@ tr td button i {
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
} }*/
@media (min-width: 768px) and (max-width: 1199px) { @media (min-width: 768px) and (max-width: 1199px) {
@@ -1569,6 +1588,17 @@ tr td button i {
.label-text { .label-text {
text-align: left; 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> </head>
<body> <body>
<div id="wrap"> <div id="wrap">
<div id="navbar-container"> <div id="navbar-container">
<div class="navbar navbar-inverse navbar-fixed-top main-menu" role="navigation"> <div class="navbar navbar-inverse navbar-fixed-top main-menu" role="navigation">
<div class="container-fluid"> <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 class="spinny"><i class="fa fa-cog fa-spin fa-2x"></i> <p>working...</p></div>
<div id="push"></div> <div id="push"></div>
</div>
</div><!-- wrap --> <div class="navbar navbar-inverse site-footer">
<div class="site-footer">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <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" <a href="https://ansibleworks.zendesk.com/anonymous_requests/new"
target="_blank"><i class="fa fa-question-circle"></i> Contact Support</a> target="_blank"><i class="fa fa-question-circle"></i> Contact Support</a>
</div> </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> <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>
<div class="col-lg-3"> <div class="col-sm-3">
<div class="logo"> <div class="logo">
<a href="http://www.ansible.com" target="_blank"><img src="{{ STATIC_URL }}img/tower_console_bug.png" /></a> <a href="http://www.ansible.com" target="_blank"><img src="{{ STATIC_URL }}img/tower_console_bug.png" /></a>
</div> </div>
</div> </div>
</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/twitter/dist/js/bootstrap.min.js"></script>
<script src="{{ STATIC_URL }}lib/js-yaml/js-yaml.min.js"></script> <script src="{{ STATIC_URL }}lib/js-yaml/js-yaml.min.js"></script>