External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-13 12:27:37 -02:30
Code Issues Packages Projects Releases Wiki Activity

2.0 style changes

Browse Source 
Fixed collapsed menu on small viewports. On a small viewport the web socket beacon now displays to the left of the menu button. On large screens it appears as part of the menu.
This commit is contained in:
Chris Houseknecht
2014-06-25 12:39:38 -04:00
parent 3b9fe8b954
commit 994c87eb0c
3 changed files with 29 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
awx/ui/static/js/app.js
View File

@@ -530,7 +530,11 @@ angular.module('Tower', [
html = "<a href=\"\" aw-pop-over=\"{{ socketTip }}\" aw-pop-over-watch=\"socketTip\" data-placement=\"bottom\" data-trigger=\"hover\" " + html = "<a href=\"\" aw-pop-over=\"{{ socketTip }}\" aw-pop-over-watch=\"socketTip\" data-placement=\"bottom\" data-trigger=\"hover\" " +
"data-popover-title=\"Live Updates\" data-container=\"body\" style=\"font-size: 10px;\"><i class=\"fa icon-socket-{{ socketStatus }}\"></i></a>"; "data-popover-title=\"Live Updates\" data-container=\"body\" style=\"font-size: 10px;\"><i class=\"fa icon-socket-{{ socketStatus }}\"></i></a>";
e = angular.element(document.getElementById('socket-beacon')); e = angular.element(document.getElementById('socket-beacon-div'));
e.empty().append(html);
$compile(e)($rootScope);
e = angular.element(document.getElementById('socket-beacon-li'));
e.empty().append(html); e.empty().append(html);
$compile(e)($rootScope); $compile(e)($rootScope);

28
awx/ui/static/less/main-layout.less
View File

@@ -46,12 +46,24 @@ body {
margin-bottom: 20px; margin-bottom: 20px;
} }
/* #socket-beacon-div {
@media (min-width: 1200px) { display: none;
#main-menu-container { }
#account-menu {
margin-right: 60px; #socket-beacon-li {
float: right; display: block;
} }
@media (max-width: 1075px) {
#socket-beacon-div {
display: block;
position: fixed;
right: 30px;
top: 5px;
margin-right: 50px;
margin-top: 15px;
} }
}*/ #socket-beacon-li {
display: none;
}
}

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

@@ -173,7 +173,8 @@
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid"> <div class="container-fluid">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse"> <div id="socket-beacon-div"></div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
@@ -181,7 +182,7 @@
</button> </button>
<a class="navbar-brand" href="http://www.ansible.com" target="_blank"><img src="{{ STATIC_URL }}img/tower_console_bug_black.png" /></a> <a class="navbar-brand" href="http://www.ansible.com" target="_blank"><img src="{{ STATIC_URL }}img/tower_console_bug_black.png" /></a>
</div> </div>
<div class="navbar-collapse collapse"> <div class="navbar-collapse collapse" id="main-navbar-collapse">
<ul class="nav navbar-nav" id="ansible-main-menu"> <ul class="nav navbar-nav" id="ansible-main-menu">
<li id="home" class="active"><a href="#home" id="main_home_link" >Dashboard</a></li> <li id="home" class="active"><a href="#home" id="main_home_link" >Dashboard</a></li>
<li id="organizations"><a href="#organizations" id="main_organizations_link">Organizations</a></li> <li id="organizations"><a href="#organizations" id="main_organizations_link">Organizations</a></li>
@@ -194,7 +195,7 @@
<li id="jobs"><a href="#jobs" id="main_jobs_link">Jobs</a></li> <li id="jobs"><a href="#jobs" id="main_jobs_link">Jobs</a></li>
</ul> </ul>
<ul class="nav navbar-nav navbar-right" id="account-menu"> <ul class="nav navbar-nav navbar-right" id="account-menu">
<li id="socket-beacon"></li> <li id="socket-beacon-li"></li>
<li class="dropdown"> <li class="dropdown">
<a href="" id="account-menu-link" data-toggle="dropdown">Account <span class="caret"></span></a> <a href="" id="account-menu-link" data-toggle="dropdown">Account <span class="caret"></span></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">