From e4fd79f653f7f4e03ff1b821ed0c90e08c81eb1c Mon Sep 17 00:00:00 2001
From: Chris Houseknecht <chouse@ansible.com>
Date: Wed, 25 Jun 2014 12:59:58 -0400
Subject: [PATCH] 2.0 style changes Fixed drop-down account menu so that it no
 longer behaves like a drop-down when the menu collapses on small viewports.
 On large screens added a right margin to the drop-down menu. Moved Logout to
 the bottom of the submenu. On large screens the drop-down now includes a
 divider above the logout option.

---
 awx/ui/static/less/main-layout.less | 17 +++++++++++++++++
 awx/ui/templates/ui/index.html      | 12 +++++++++---
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/awx/ui/static/less/main-layout.less b/awx/ui/static/less/main-layout.less
index ce2297e3c6..8656a3453e 100644
--- a/awx/ui/static/less/main-layout.less
+++ b/awx/ui/static/less/main-layout.less
@@ -36,6 +36,9 @@ body {
     .navbar-collapse {
         margin-left: 42px;
     }
+    .collapsed-option {
+        display: none;
+    }
 }
 
 #content-container {
@@ -54,7 +57,21 @@ body {
     display: block;
 }
 
+#account-submenu {
+    margin-right: 5px;
+}
 @media (max-width: 1075px) {
+
+    #main-menu-container {
+        .collapsed-option {
+            display: block;
+        }
+    }
+
+    #account-menu {
+        display: none;
+    }
+
     #socket-beacon-div {
         display: block;
         position: fixed;
diff --git a/awx/ui/templates/ui/index.html b/awx/ui/templates/ui/index.html
index 4501a27af8..20c797db91 100644
--- a/awx/ui/templates/ui/index.html
+++ b/awx/ui/templates/ui/index.html
@@ -193,17 +193,23 @@
                         <li id="inventories"><a href="#inventories" id="main_inventories_link">Inventories</a></li>
                         <li id="job_templates"><a href="#job_templates" id="main_job_templates_link">Job Templates</a></li>
                         <li id="jobs"><a href="#jobs" id="main_jobs_link">Jobs</a></li>
+                        <li class="collapsed-option" ng-show="current_user.username != null && current_user.username != undefined">
+                                   <a id="main_view_user" href="" ng-click="viewCurrentUser()" ng-bind="'Hello! ' + current_user.username"></a></li>
+                        <li class="collapsed-option"><a id="main_view_license" href="" ng-click="viewLicense()">View License</a></li>
+                        <li class="collapsed-option"><a id="main_contact_support" target="_blank" href="https://ansibleworks.zendesk.com/anonymous_requests/new">Contact Support</a></li>
+                        <li class="collapsed-option"><a id="main_logout" href="#/logout">Logout</a></li>
                     </ul>
                     <ul class="nav navbar-nav navbar-right" id="account-menu">
                         <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">
+                            <a href="" id="account-menu-link" class="dropdown-toggle" data-toggle="dropdown">Account <span class="caret"></span></a>
+                            <ul class="dropdown-menu" id="account-submenu">
                                <li ng-show="current_user.username != null && current_user.username != undefined">
                                    <a id="main_view_user" href="" ng-click="viewCurrentUser()" ng-bind="'Hello! ' + current_user.username"></a></li>
-                               <li><a id="main_logout" href="#/logout">Logout</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>
+                               <li class="divider"></li>
+                               <li><a id="main_logout" href="#/logout">Logout</a></li>
                             </ul>
                         </li>
                     </ul>