Merge pull request #1103 from mabashian/activity-stream-responsive

Activity Stream/General List header responsive styling

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 {
+    .fa-lg {
-    margin-left: 4px;
+        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;
 }

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;
+    }
+}

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

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

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>

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>";
                           }
                         }
 

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;