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

Fixed footer to always be 85px heigh and appear at the exact bottom of page when content does not fill entire page height. Prior to this the content area was fixed at 700px, which was a temporary hack.

Browse Source
This commit is contained in:
Chris Houseknecht 2014-01-09 05:45:58 +00:00
parent 9930c6d356
commit ec5686770b
2 changed files with 56 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,9 +29,10 @@
@tip-background: #0088CC;
@tip-color: #fff;
html, body { height: 100%; }
html {
background-color: @black;
background-color: @white;
}
body {
@ -39,6 +40,12 @@ body {
color: @black;
}
/* Bootstrap fix that's causing a right margin to appear
whenver a modal is opened */
body.modal-open {
margin-right: 0;
}
/* Helper Classes */
.pad-right-sm { padding-right: 10px; }
@ -299,11 +306,24 @@ dd {
min-height: 15px;
}
.main-container {
min-height: 700px;
/* footer variables */
@footer-height: 85px;
@footer-margin: 60px;
@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);
}
.main-menu {
#navbar-container, .main-menu {
width: 100%;
background-color: @black;
}

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

@ -132,29 +132,32 @@
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top main-menu" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#home"><img class="logo" src="{{ STATIC_URL }}img/logo.png" /></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav pull-right">
<li ng-show="current_user.username != null && current_user.username != undefined">
<a id="main_view_user" href="" ng-click="viewCurrentUser()" ng-bind="'Hello! ' + current_user.username"></a></li>
<li ng-show="userLoggedIn == true"><a id="main_view_license" href="" ng-click="viewLicense()">View License</a></li>
<li ng-show="userLoggedIn == true"><a id="main_contact_support" target="_blank"
href="https://ansibleworks.zendesk.com/anonymous_requests/new">Contact Support</a><li>
<li ng-show="userLoggedIn == true"><a id="main_logout" href="#/logout">Logout</a></li>
</ul>
</div><!-- nav-collapse -->
</div>
</div><!-- navbar -->
<div id="wrap">
<div id="navbar-container">
<div class="navbar navbar-inverse navbar-fixed-top main-menu" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#home"><img class="logo" src="{{ STATIC_URL }}img/logo.png" /></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav pull-right">
<li ng-show="current_user.username != null && current_user.username != undefined">
<a id="main_view_user" href="" ng-click="viewCurrentUser()" ng-bind="'Hello! ' + current_user.username"></a></li>
<li ng-show="userLoggedIn == true"><a id="main_view_license" href="" ng-click="viewLicense()">View License</a></li>
<li ng-show="userLoggedIn == true"><a id="main_contact_support" target="_blank"
href="https://ansibleworks.zendesk.com/anonymous_requests/new">Contact Support</a><li>
<li ng-show="userLoggedIn == true"><a id="main_logout" href="#/logout">Logout</a></li>
</ul>
</div><!-- nav-collapse -->
</div>
</div><!-- navbar -->
</div>
<div class="container main-container" id="main">
<div class="row">
@ -352,12 +355,16 @@
<!-- Help dialog -->
<div id="help-modal"></div>
</div><!-- container -->
<div class="overlay"></div>
<div class="spinny"><i class="fa fa-cog fa-spin fa-2x"></i> <p>working...</p></div>
<div id="push"></div>
</div><!-- wrap -->
<div class="site-footer">
<div class="container">
<div class="row">