Fixed drop-down menu hover issue that caused search drop-down to not display on small screens. Fixed js error in Socket.js

awx/ui/static/js/lists/Projects.js

@@ -30,18 +30,18 @@ angular.module('ProjectsListDefinition', [])
                 dataTipWatch: 'project.statusTip',
                 dataPlacement: 'top',
                 icon: "icon-job-{{ project.statusIcon }}",
-                columnClass: "col-md-1 col-sm-2 col-xs-3",
+                columnClass: "col-lg-1 col-md-1 col-sm-2 col-xs-2",
                 nosort: true
             },
             name: {
                 key: true,
                 label: 'Name',
-                columnClass: "col-md-4 col-sm-3 col-xs-3"
+                columnClass: "col-lg-6 col-md-4 col-sm-6 col-xs-6"
             },
             last_updated: {
                 label: 'Last Updated',
                 filter: "date:'MM/dd/yy HH:mm:ss'",
-                columnClass: "col-md-2 hidden-sm hidden-xs",
+                columnClass: "col-lg-2 col-md-2 hidden-sm hidden-xs",
                 excludeModal: true,
                 searchable: false,
                 nosort: true

awx/ui/static/less/ansible-ui.less

@@ -738,55 +738,54 @@ select.page-size {
 
 /* breadcrumbs */
 .nav-path {
-  padding: 5px 0 10px 0;
+    padding: 5px 0 10px 0;
-  margin-right: 5px;
+    margin-right: 5px;
-  margin-bottom: 20px;
+    margin-bottom: 20px;
-  font-size: 14px;
+    font-size: 14px;
-  font-weight: bold;
+    font-weight: bold;
-  background-color: #f5f5f5;
+    background-color: #f5f5f5;
-  border: 1px solid #d8d8d8;
+    border: 1px solid #d8d8d8;
-  border-radius: 6px;
+    border-radius: 6px;
-  box-shadow: 3px 3px 4px 0 #808080;
+    box-shadow: 3px 3px 4px 0 #808080;
 
-  .breadcrumb {
+    .breadcrumb {
-    display: inline-block;
+      display: inline-block;
-    padding-bottom: 0;
+      padding-bottom: 0;
-    padding-left: 0;
+      padding-left: 0;
-    padding-right: 0;
+      padding-right: 0;
-    margin-bottom: 0;
+      margin-bottom: 0;
-    margin-left: 10px;
+      margin-left: 10px;
-  }
-
-  .dropdown {
-    display: inline-block;
-    margin-right: 0;
-    paddding-right: 0;
-
-    .toggle, .toggle:visited, .toggle:hover, .toggle:active {
-      color: @black;
     }
 
-    li a.active {
+    .dropdown {
-       color: @grey;
+        display: inline-block;
+        margin-right: 0;
+        paddding-right: 0;
+
+        .toggle, .toggle:visited, .toggle:hover, .toggle:active {
+          color: @black;
+        }
+
+        li a.active {
+           color: @grey;
+        }
+
+        .crumb-icon {
+           font-size: 12px;
+        }
     }
-
-    .crumb-icon {
-       font-size: 12px;
-    }
-
-  }
-
 }
 
 .actions .dropdown {
-  display: inline-block;
+    display: inline-block;
 }
 
 /* Display drop-down menus on hover. Remove margin between toggle link
    and menu, allowing smooth mouse movement between toggle and menu
 
    http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click
- */
+*/
+
   .dropdown-toggle:hover .dropdown-menu, .dropdown:hover .dropdown-menu {
      display: block;
   }
@@ -797,6 +796,7 @@ select.page-size {
 
   .dropdown-menu {
      margin-top: 0;
+     z-index: 200;
   }
 
 /* end */

awx/ui/static/lib/ansible/Socket.js

@@ -120,7 +120,7 @@ angular.module('SocketIO', ['AuthService', 'Utilities'])
                             self.scope.$apply(function() {
                                 self.scope.socketStatus = 'error';
                                 self.scope.$emit('socketStatusChange');
-                          });
+                            });
                         });
                     }
                     else {

awx/ui/static/lib/ansible/generator-helpers.js

@@ -728,7 +728,7 @@ angular.module('GeneratorHelpers', [])
     
             if (includeSize) {
                 html += "<div class=\"";
-                html += (size) ? size : "col-lg-4 col-md-6 col-sm-12 col-xs-12";
+                html += (size) ? size : "col-lg-4 col-md-6";
                 html += "\" id=\"search-widget-container" + modifier + "\">\n";
             }
 
@@ -737,8 +737,7 @@ angular.module('GeneratorHelpers', [])
             html += "<div class=\"input-group-btn dropdown\">\n";
             html += "<button type=\"button\" ";
             html += "id=\"search_field_ddown\" ";
-            html += "class=\"btn btn-default ";
+            html += "class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\"";
-            html += "dropdown-toggle\" data-toggle=\"dropdown\"";
             html += ">\n";
             html += "<span ng-bind=\"" + iterator + "SearchFieldLabel" + modifier + "\"></span>\n";
             html += "<span class=\"caret\"></span>\n";
@@ -772,14 +771,12 @@ angular.module('GeneratorHelpers', [])
             html += "<a class=\"search-reset-start\" ng-click=\"resetSearch('" + iterator + "')\"" +
                 "ng-hide=\"" + iterator + "SelectShow" + modifier + " || " + iterator + "InputHide" + modifier + " || " +
                 iterator + "ShowStartBtn" + modifier + " || " +
-                iterator + "HoldInput" + modifier + " || " +
                 iterator + "HideAllStartBtn" + modifier + "\"" +
                 "><i class=\"fa fa-times\"></i></a>\n";
 
             html += "<a class=\"search-reset-start\" ng-click=\"search('" + iterator + "')\"" +
                 "ng-hide=\"" + iterator + "SelectShow" + modifier + " || " + iterator + "InputHide" + modifier + " || " +
                 "!" + iterator + "ShowStartBtn" + modifier + " || " +
-                iterator + "HoldInput" + modifier + " || " +
                 iterator + "HideAllStartBtn" + modifier + "\"" +
                 "><i class=\"fa fa-search\"></i></a>\n";
             

awx/ui/static/lib/ansible/list-generator.js

@@ -293,7 +293,7 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
                     html += "<thead>\n";
                     html += "<tr>\n";
                     if (list.index) {
-                        html += "<th class=\"col-md-1 col-sm-2 hidden-xs\">#</th>\n";
+                        html += "<th class=\"col-lg-1 col-md-1 col-sm-2 hidden-xs\">#</th>\n";
                     }
                     for (fld in list.fields) {
                         if ((list.fields[fld].searchOnly === undefined || list.fields[fld].searchOnly === false) &&