2.0 Styling changes

Removed breadcrumbs from lists. Removed breadcrumbs from job tab. Added some space to top of jobs tab content. Fixed auto-sizing on jobs page.

awx/ui/static/js/controllers/JobStdout.js

@@ -104,7 +104,7 @@ function JobStdoutController ($log, $rootScope, $scope, $compile, $routeParams,
 
     function resizeToFit() {
         available_height = $(window).height() - $('#main-menu-container .navbar').outerHeight() - $('#job-status').outerHeight() -
-            $('#breadcrumb-container').outerHeight() - 20;
+            $('#breadcrumb-container').outerHeight() - 30;
         $('#pre-container').height(available_height);
         $('#pre-container').mCustomScrollbar("update");
     }

awx/ui/static/js/controllers/Jobs.js

@@ -15,8 +15,7 @@ function JobsListController ($scope, $compile, $routeParams, ClearScope, Breadcr
 
     ClearScope();
 
-    var e,
+    var completed_scope, running_scope, queued_scope, scheduled_scope,
-        completed_scope, running_scope, queued_scope, scheduled_scope,
         choicesCount = 0,
         listCount = 0,
         api_complete = false,
@@ -111,9 +110,9 @@ function JobsListController ($scope, $compile, $routeParams, ClearScope, Breadcr
     LoadBreadCrumbs();
 
     // Add breadcrumbs
-    e = angular.element(document.getElementById('breadcrumbs'));
+    //e = angular.element(document.getElementById('breadcrumbs'));
-    e.html(Breadcrumbs({ list: { editTitle: 'Jobs' } , mode: 'edit' }));
+    //e.html(Breadcrumbs({ list: { editTitle: 'Jobs' } , mode: 'edit' }));
-    $compile(e)($scope);
+    //$compile(e)($scope);
 
     if ($scope.removeListLoaded) {
         $scope.removeListLoaded();
@@ -243,7 +242,8 @@ function JobsListController ($scope, $compile, $routeParams, ClearScope, Breadcr
             search_row, page_row, height, header, row_height;
         if (docw > 1240 && doch > 800) {
             // customize the container height and # of rows based on available viewport height
-            available_height = $(window).height() - $('.main-menu').outerHeight() - $('#main_tabs').outerHeight() - $('#breadcrumbs').outerHeight() - $('.site-footer').outerHeight() - 25;
+            available_height = $(window).height() - $('#main-menu-container .navbar').outerHeight() - $('#job-status').outerHeight() -
+                $('#breadcrumb-container').outerHeight() - 80;
             $('.jobs-list-container').each(function() {
                 $(this).height(Math.floor(available_height / 2));
             });

awx/ui/static/less/jobs.less

@@ -8,7 +8,9 @@
  */
 
 
-#jobs { 
+#jobs-page {
+
+    margin-top: 20px;
 
     .jobs-list-container {
         border: 1px solid @grey;
@@ -38,7 +40,7 @@
     #completed_jobs_table i[class*="icon-job-"] {
         font-size: 13px;
     }
-    
+
     .title {
         font-weight: bold;
         margin-top: 5px;
@@ -56,7 +58,7 @@
 }
 
 @media (min-width: 1024px) {
-    #jobs {
+    #jobs-page {
         .left-side {
             padding-right: 7px;
         }
@@ -72,7 +74,7 @@
 }
 
 @media (max-width: 1023px) {
-    #jobs .jobs-list-container { 
+    #jobs-page .jobs-list-container {
         margin-top: 15px;
     }
     #jobs .jobs-list-container.completed {

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

@@ -137,20 +137,21 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
                     // Breadcrumbs for activity stream widget
                     // Make the links clickable using ng-click function so we can first remove the stream widget
                     // before navigation
-                    html += "<div class=\"nav-path\">\n";
+                    html += "<div>\n";
-                    html += "<ul class=\"breadcrumb\">\n";
+                    html += "<ul class=\"ansible-breadcrumb\">\n";
                     html += "<li ng-repeat=\"crumb in breadcrumbs\"><a href=\"\" " + "ng-click=\"closeStream(crumb.path)\">" +
                         "{{ crumb.title }}</a></li>\n";
                     html += "<li class=\"active\">";
                     html += list.editTitle;
                     html += "</li>\n</ul>\n</div>\n";
-                } else if (options.mode !== 'lookup' && (options.breadCrumbs === undefined || options.breadCrumbs)) {
-                    //Breadcrumbs
-                    html += Breadcrumbs({
-                        list: list,
-                        mode: options.mode
-                    });
                 }
+                //else if (options.mode !== 'lookup' && (options.breadCrumbs === undefined || options.breadCrumbs)) {
+                    //Breadcrumbs
+                //    html += Breadcrumbs({
+                //        list: list,
+                //        mode: options.mode
+                //    });
+                //}
 
                 if (options.mode === 'edit' && list.editInstructions) {
                     html += "<div class=\"alert alert-info alert-block\">\n";

awx/ui/static/partials/job_detail.html

@@ -1,14 +1,14 @@
 <div class="tab-pane" id="jobs-detail">
     <div ng-cloak id="htmlTemplate">
 
-        <div class="row">
+        <!-- <div class="row">
             <div id="breadcrumb-container" class="col-md-12" style="position: relative;">
                 <ul class="ansible-breadcrumb" id="breadcrumb-list">
                     <li><a href="/#/jobs">Jobs</a></li>
                     <li class="active"><a href="">{{ job_id }} - {{ job.name }}</a></li>
                 </ul>
             </div>
-        </div>
+        </div> -->
 
         <div class="row" style="position: relative;">
             <div id="job-detail-container">

awx/ui/static/partials/jobs.html

@@ -1,8 +1,8 @@
-<div class="tab-pane" id="jobs">
+<div class="tab-pane" id="jobs-page">
     <div ng-cloak id="htmlTemplate">
         <div class="row">
             <div class="col-md-12" id="breadcrumbs"></div>
-        </div>    
+        </div>
         <div class="row">
             <div class="col-md-6 left-side">
                 <div class="jobs-list-container completed">
@@ -51,10 +51,10 @@
                 </div>
             </div>
         </div><!-- row -->
-       
+
         <div id="schedule-dialog-target"></div>
         <div ng-include="'/static/partials/logviewer.html'"></div>
         <div ng-include="'/static/partials/schedule_dialog.html'"></div>
-    
+
     </div>
 </div>