External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-22 11:25:08 -02: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
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-background: #0088CC;
@tip-color: #fff; @tip-color: #fff;
html, body { height: 100%; }
html { html {
background-color: @black; background-color: @white;
} }
body { body {
@@ -39,6 +40,12 @@ body {
color: @black; 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 */ /* Helper Classes */
.pad-right-sm { padding-right: 10px; } .pad-right-sm { padding-right: 10px; }
@@ -299,11 +306,24 @@ dd {
min-height: 15px; min-height: 15px;
} }
.main-container { /* footer variables */
min-height: 700px; @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; background-color: @black;
} }

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

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