From bc6edeb65ce6463d8adf263934e0d9e7ae477fbc Mon Sep 17 00:00:00 2001 From: Chris Houseknecht Date: Wed, 5 Mar 2014 11:14:03 -0500 Subject: [PATCH] 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. --- awx/ui/static/less/ansible-ui.less | 84 ++++++++++++++++++++---------- awx/ui/templates/ui/index.html | 15 +++--- 2 files changed, 63 insertions(+), 36 deletions(-) diff --git a/awx/ui/static/less/ansible-ui.less b/awx/ui/static/less/ansible-ui.less index 20d0f28574..59f155b624 100644 --- a/awx/ui/static/less/ansible-ui.less +++ b/awx/ui/static/less/ansible-ui.less @@ -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; + } + } } diff --git a/awx/ui/templates/ui/index.html b/awx/ui/templates/ui/index.html index 8fdfe3626a..3e9ed72099 100644 --- a/awx/ui/templates/ui/index.html +++ b/awx/ui/templates/ui/index.html @@ -136,9 +136,7 @@ -
-