From 994c87eb0c62e940aa9a50ef4f36a34377ae66aa Mon Sep 17 00:00:00 2001
From: Chris Houseknecht <chouse@ansible.com>
Date: Wed, 25 Jun 2014 12:39:38 -0400
Subject: [PATCH] 2.0 style changes 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.

---
 awx/ui/static/js/app.js             |  6 +++++-
 awx/ui/static/less/main-layout.less | 28 ++++++++++++++++++++--------
 awx/ui/templates/ui/index.html      |  7 ++++---
 3 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/awx/ui/static/js/app.js b/awx/ui/static/js/app.js
index da01f3308e..4d04709825 100644
--- a/awx/ui/static/js/app.js
+++ b/awx/ui/static/js/app.js
@@ -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\" " +
                 "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);
             $compile(e)($rootScope);
 
diff --git a/awx/ui/static/less/main-layout.less b/awx/ui/static/less/main-layout.less
index 912d3abaf3..ce2297e3c6 100644
--- a/awx/ui/static/less/main-layout.less
+++ b/awx/ui/static/less/main-layout.less
@@ -46,12 +46,24 @@ body {
     margin-bottom: 20px;
 }
 
-/*
-@media (min-width: 1200px) {
-    #main-menu-container {
-        #account-menu {
-            margin-right: 60px;
-            float: right;
-        }
+#socket-beacon-div {
+    display: none;
+}
+
+#socket-beacon-li {
+    display: block;
+}
+
+@media (max-width: 1075px) {
+    #socket-beacon-div {
+        display: block;
+        position: fixed;
+        right: 30px;
+        top: 5px;
+        margin-right: 50px;
+        margin-top: 15px;
     }
-}*/
\ No newline at end of file
+    #socket-beacon-li {
+        display: none;
+    }
+}
diff --git a/awx/ui/templates/ui/index.html b/awx/ui/templates/ui/index.html
index 3ea96a466e..4501a27af8 100644
--- a/awx/ui/templates/ui/index.html
+++ b/awx/ui/templates/ui/index.html
@@ -173,7 +173,8 @@
         <div class="navbar navbar-default navbar-fixed-top" role="navigation">
             <div class="container-fluid">
                 <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="icon-bar"></span>
                       <span class="icon-bar"></span>
@@ -181,7 +182,7 @@
                     </button>
                     <a class="navbar-brand" href="http://www.ansible.com" target="_blank"><img src="{{ STATIC_URL }}img/tower_console_bug_black.png" /></a>
                 </div>
-                <div class="navbar-collapse collapse">
+                <div class="navbar-collapse collapse" id="main-navbar-collapse">
                     <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="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>
                     </ul>
                     <ul class="nav navbar-nav navbar-right" id="account-menu">
-                        <li id="socket-beacon"></li>
+                        <li id="socket-beacon-li"></li>
                         <li class="dropdown">
                             <a href="" id="account-menu-link" data-toggle="dropdown">Account <span class="caret"></span></a>
                             <ul class="dropdown-menu">