From 54699b17ec45e14f5ae6604f15c943ae79d7d5a6 Mon Sep 17 00:00:00 2001
From: Michael Abashian <mabashian@ansible.com>
Date: Thu, 3 Mar 2016 08:19:45 -0500
Subject: [PATCH] Made list headers, buttons and search bars responsive down to
 mobile views.

---
 awx/ui/client/legacy-styles/ansible-ui.less   | 17 ++------
 awx/ui/client/legacy-styles/lists.less        | 40 +++++++++++++++++--
 awx/ui/client/src/controllers/Inventories.js  |  2 +-
 awx/ui/client/src/helpers/Hosts.js            |  2 +-
 .../list-generator/list-actions.partial.html  |  7 ++--
 .../list-generator/list-generator.factory.js  |  2 +
 awx/ui/client/src/widgets/Stream.js           |  2 +-
 7 files changed, 48 insertions(+), 24 deletions(-)

diff --git a/awx/ui/client/legacy-styles/ansible-ui.less b/awx/ui/client/legacy-styles/ansible-ui.less
index 6df1c3bada..4adaeb09eb 100644
--- a/awx/ui/client/legacy-styles/ansible-ui.less
+++ b/awx/ui/client/legacy-styles/ansible-ui.less
@@ -919,15 +919,11 @@ input[type="checkbox"].checkbox-no-label {
 
 /* Display list actions next to search widget */
 .list-actions {
-  text-align: right;
+    text-align: right;
 
-  button {
-    margin-left: 4px;
-  }
-
-  .fa-lg {
-    vertical-align: -8%;
-  }
+    .fa-lg {
+        vertical-align: -8%;
+    }
 }
 
 .jqui-accordion {
@@ -1952,11 +1948,6 @@ tr td button i {
     }
 }
 
-button.dropdown-toggle,
-.input-group-btn {
-    z-index: 1;
-}
-
 #login-modal-body {
     padding-bottom: 5px;
 }
diff --git a/awx/ui/client/legacy-styles/lists.less b/awx/ui/client/legacy-styles/lists.less
index e52ca73ec0..ba6adba673 100644
--- a/awx/ui/client/legacy-styles/lists.less
+++ b/awx/ui/client/legacy-styles/lists.less
@@ -143,7 +143,6 @@ table, tbody {
 
 .List-header {
     display: flex;
-    height: 34px;
     align-items: center;
 }
 
@@ -151,7 +150,7 @@ table, tbody {
     align-items: center;
     flex: 1 0 auto;
     display: flex;
-    margin-top: -2px;
+    height: 34px;
 }
 
 .List-titleBadge {
@@ -172,15 +171,22 @@ table, tbody {
     text-transform: uppercase;
 }
 
-.List-actions {
+.List-actionHolder {
     justify-content: flex-end;
     display: flex;
+    height: 34px;
+}
+
+.List-actions {
     margin-top: -10px;
+}
+
+.List-auxAction + .List-actions {
     margin-left: 10px;
 }
 
 .List-auxAction {
-    justify-content: flex-end;
+    align-items: center;
     display: flex;
 }
 
@@ -188,6 +194,10 @@ table, tbody {
     width: 175px;
 }
 
+.List-action:not(.ng-hide) ~ .List-action:not(.ng-hide) {
+    margin-left: 10px;
+}
+
 .List-buttonSubmit {
     background-color: @submit-button-bg;
     color: @submit-button-text;
@@ -352,3 +362,25 @@ table, tbody {
     display: block;
     font-size: 13px;
 }
+
+@media (max-width: 991px) {
+    .List-searchWidget + .List-searchWidget {
+        margin-top: 20px;
+    }
+}
+
+@media (max-width: 600px) {
+    .List-header {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    .List-actionHolder {
+        justify-content: flex-start;
+        align-items: center;
+        flex: 1 0 auto;
+        margin-top: 12px;
+    }
+    .List-well {
+        margin-top: 20px;
+    }
+}
diff --git a/awx/ui/client/src/controllers/Inventories.js b/awx/ui/client/src/controllers/Inventories.js
index 819baaea48..62dfb5b03b 100644
--- a/awx/ui/client/src/controllers/Inventories.js
+++ b/awx/ui/client/src/controllers/Inventories.js
@@ -922,7 +922,7 @@ export function InventoriesManage ($log, $scope, $rootScope, $location,
         generateList.inject(InventoryGroups, {
             mode: 'edit',
             id: 'group-list-container',
-            searchSize: 'col-lg-6 col-md-6 col-sm-6',
+            searchSize: 'col-lg-6 col-md-6 col-sm-6 col-xs-12',
             scope: $scope
         });
 
diff --git a/awx/ui/client/src/helpers/Hosts.js b/awx/ui/client/src/helpers/Hosts.js
index b9bde5fe2c..83eef613f2 100644
--- a/awx/ui/client/src/helpers/Hosts.js
+++ b/awx/ui/client/src/helpers/Hosts.js
@@ -229,7 +229,7 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', listGenerator.name,
                generator = GenerateList;
 
                // Inject the list html
-               generator.inject(InventoryHosts, { scope: host_scope, mode: 'edit', id: 'host-list-container', searchSize: 'col-lg-6 col-md-6 col-sm-6' });
+               generator.inject(InventoryHosts, { scope: host_scope, mode: 'edit', id: 'host-list-container', searchSize: 'col-lg-6 col-md-6 col-sm-6 col-xs-12' });
 
                // Load data
                HostsReload({ scope: host_scope, group_id: group_id, inventory_id: inventory_id, parent_scope: group_scope, pageSize: pageSize });
diff --git a/awx/ui/client/src/shared/list-generator/list-actions.partial.html b/awx/ui/client/src/shared/list-generator/list-actions.partial.html
index 5a97698872..ed82c52c11 100644
--- a/awx/ui/client/src/shared/list-generator/list-actions.partial.html
+++ b/awx/ui/client/src/shared/list-generator/list-actions.partial.html
@@ -1,4 +1,6 @@
-<span ng-repeat="(name, options) in list.actions">
+<span ng-repeat="(name, options) in list.actions" class="List-action" ng-hide="isHiddenByOptions(options) ||
+            hiddenOnCurrentPage(options.basePaths) ||
+            hiddenInCurrentMode(options.mode)">
     <!-- TODO: Unfortunately, the data-tip-watch attribute is not loaded for
     some reason -->
     <button
@@ -12,9 +14,6 @@
         data-title="{{options.dataTitle}}"
         ng-disabled="{{options.ngDisabled}}"
         ng-click="$eval(options.ngClick)"
-        ng-hide="isHiddenByOptions(options) ||
-                    hiddenOnCurrentPage(options.basePaths) ||
-                    hiddenInCurrentMode(options.mode)"
         toolbar="true"
         aw-feature="{{options.awFeature}}">
         <span ng-bind-html="options.buttonContent"></span>
diff --git a/awx/ui/client/src/shared/list-generator/list-generator.factory.js b/awx/ui/client/src/shared/list-generator/list-generator.factory.js
index 3d974db190..5071dfee54 100644
--- a/awx/ui/client/src/shared/list-generator/list-generator.factory.js
+++ b/awx/ui/client/src/shared/list-generator/list-generator.factory.js
@@ -316,6 +316,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
                               }
 
                               html += "</div>";
+                              html += "<div class=\"List-actionHolder\">";
                               if(list.toolbarAuxAction) {
                                   html += "<div class=\"List-auxAction\">";
                                   html += list.toolbarAuxAction;
@@ -333,6 +334,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
                               html += "</div>\n";
                               html += "</div>";
                               html += "</div>";
+                              html += "</div>";
                           }
                         }
 
diff --git a/awx/ui/client/src/widgets/Stream.js b/awx/ui/client/src/widgets/Stream.js
index b791e82279..23757dbae1 100644
--- a/awx/ui/client/src/widgets/Stream.js
+++ b/awx/ui/client/src/widgets/Stream.js
@@ -303,7 +303,7 @@ angular.module('StreamWidget', ['RestServices', 'Utilities', 'StreamListDefiniti
             }
 
             // Generate the list
-            view.inject(list, { mode: 'edit', id: 'stream-content', searchSize: 'col-lg-3', secondWidget: true, activityStream: true, scope: scope });
+            view.inject(list, { mode: 'edit', id: 'stream-content', searchSize: 'col-lg-4 col-md-4 col-sm-12 col-xs-12', secondWidget: true, activityStream: true, scope: scope });
 
             // descriptive title describing what AS is showing
             scope.streamTitle = (params && params.title) ? params.title : null;