From 0cfb666548ff4e75bc26249a2e3b68e33c777ec8 Mon Sep 17 00:00:00 2001
From: Chris Houseknecht <chouse@ansibleworks.com>
Date: Tue, 8 Jul 2014 09:12:59 -0400
Subject: [PATCH] Z-index fix Fixed styling conflicts between bootstrap menu
 and jquery dialog.

---
 awx/ui/static/less/ansible-ui.less          |  4 ++--
 awx/ui/static/less/jquery-ui-overrides.less | 16 ++++++++++------
 awx/ui/static/less/main-layout.less         |  1 +
 awx/ui/static/partials/job_detail.html      | 14 ++++++++------
 awx/ui/templates/ui/index.html              |  2 +-
 5 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/awx/ui/static/less/ansible-ui.less b/awx/ui/static/less/ansible-ui.less
index 34924eb9d6..a580fd1121 100644
--- a/awx/ui/static/less/ansible-ui.less
+++ b/awx/ui/static/less/ansible-ui.less
@@ -766,7 +766,7 @@ select.page-size {
    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 {
+/*  .dropdown-toggle:hover .dropdown-menu, .dropdown:hover .dropdown-menu {
      display: block;
   }
 
@@ -778,7 +778,7 @@ select.page-size {
      margin-top: 0;
      z-index: 200;
   }
-
+*/
 /* end */
 
 
diff --git a/awx/ui/static/less/jquery-ui-overrides.less b/awx/ui/static/less/jquery-ui-overrides.less
index b43a19343a..42beca288f 100644
--- a/awx/ui/static/less/jquery-ui-overrides.less
+++ b/awx/ui/static/less/jquery-ui-overrides.less
@@ -1,9 +1,9 @@
 /*********************************************
  *  Copyright (c) 2014 AnsibleWorks, Inc.
- *  
+ *
  *  jquery-ui-overrides.less
- *  
- *  Additions to the custom-theme to make things 
+ *
+ *  Additions to the custom-theme to make things
  *  look closer to Twitter Bootstrap
  *
  */
@@ -15,7 +15,7 @@ table.ui-datepicker-calendar {
 
 /* Modal dialog */
 
-.ui-dialog-title { 
+.ui-dialog-title {
     font-size: 22px;
     color: @blue;
     font-weight: bold;
@@ -90,8 +90,8 @@ table.ui-datepicker-calendar {
 }
 
 .ui-widget-content {
-    a, 
-    a:visited, 
+    a,
+    a:visited,
     a:active {
         color: @blue;
         text-decoration: none;
@@ -124,3 +124,7 @@ table.ui-datepicker-calendar {
 .ui-spinner a.ui-spinner-button {
     border-left: 1px solid #A6C9E2;
 }
+
+.ui-front {
+    z-index: 1100;
+}
diff --git a/awx/ui/static/less/main-layout.less b/awx/ui/static/less/main-layout.less
index 1ac0c6d9fb..5487192fc3 100644
--- a/awx/ui/static/less/main-layout.less
+++ b/awx/ui/static/less/main-layout.less
@@ -62,6 +62,7 @@ body {
 
 #account-submenu {
     margin-right: 5px;
+    height: 140px;   /* shouldn't need this, but for some reason we do */
 }
 
 @media (max-width: 1075px) {
diff --git a/awx/ui/static/partials/job_detail.html b/awx/ui/static/partials/job_detail.html
index e16c8c6eaf..5a67b09c88 100644
--- a/awx/ui/static/partials/job_detail.html
+++ b/awx/ui/static/partials/job_detail.html
@@ -226,7 +226,7 @@
                             <div id="hosts-summary-table" class="table-detail" lr-infinite-scroll="hostSummariesScrollDown" scroll-threshold="10" time-threshold="500">
                                 <div class="row" ng-repeat="host in summaryList = (hosts | filter:{ status : searchAllStatus}) track by $index" id="{{ host.id }}">
                                     <div class="name col-lg-6 col-md-6 col-sm-6 col-xs-6">
-                                        <a href="" ng-click="hostEventsViewer(host.id, host.name)" aw-tool-tip="View all events for this host" 
+                                        <a href="" ng-click="hostEventsViewer(host.id, host.name)" aw-tool-tip="View all events for this host"
                                             data-placement="top">{{ host.name }}</a>
                                     </div>
                                     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 badge-column">
@@ -257,12 +257,8 @@
             </div><!-- col-md-5 -->
 
         </div>
-    <div id="job-detail-footer" class="footer-row"></div>
-    </div>
 
-    <div ng-include="'/static/partials/eventviewer.html'"></div>
-    
-    <div id="host-events-modal-dialog">
+        <div id="host-events-modal-dialog" style="display:none;">
         <form class="form-inline">
             <div class="form-group">
                 <label>Search</label>
@@ -288,6 +284,12 @@
                 <div class="col-md-2">{{ event.msg }}</div>
             </div>
         </div>
+
+        <div id="job-detail-footer" class="footer-row"></div>
+    </div>
+
+    <div ng-include="'/static/partials/eventviewer.html'"></div>
+
     </div>
 
 </div>
diff --git a/awx/ui/templates/ui/index.html b/awx/ui/templates/ui/index.html
index a0da847771..05370dcfdd 100644
--- a/awx/ui/templates/ui/index.html
+++ b/awx/ui/templates/ui/index.html
@@ -232,7 +232,7 @@
                         <li><a href="#/login" id="main_login_link" ng-show="!current_user.username">Login</a></li>
                         <li class="dropdown" ng-show="current_user.username">
                             <a href="" id="account-menu-link" class="dropdown-toggle" data-toggle="dropdown">Hello, <span ng-bind="current_user.username"></span> <span class="caret"></span></a>
-                            <ul class="dropdown-menu" role="menu" id="account-submenu">
+                            <ul class="dropdown-menu" id="account-submenu">
                                <li><a id="main_view_user" href="" ng-click="viewCurrentUser()">Account Settings</a></li>
                                <li><a id="main_view_license" href="" ng-click="viewLicense()">View License</a></li>
                                <li><a id="main_contact_support" target="_blank" href="https://ansibleworks.zendesk.com/anonymous_requests/new">Contact Support</a></li>