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

@@ -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);
 

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;
     }
-}*/
+    #socket-beacon-li {
+        display: none;
+    }
+}