Styling fixes on Job Detail page

awx/ui/static/css/ansible-ui.css

@@ -79,6 +79,7 @@
 
  .login-alert {
     font-weight: bold;
+    font-size: 16px;
     text-align: center;
     color: #0088cc;
     margin-bottom: 15px;
@@ -259,6 +260,7 @@
  .status-actions {
     display: inline-block;
     height: 25px;
+    margin-bottom: 20px;
  }
 
  .status-spin {
@@ -268,10 +270,6 @@
     font-size: 22px;
  }
 
- .status-fields {
-    margin-top: 15px;
- }
-
  .search-widget label {
     display:inline-block;
     vertical-align: middle;
@@ -357,10 +355,6 @@
     margin-top: 2px;
  }
 
- .status-actions {
-    margin-bottom: 20px;
- }
-
  /* End Display list actions */
 
  .well {
@@ -425,9 +419,10 @@
  }
 
  .job-detail-status {
+    display: inline-block;
     font-size: 15px;
     font-weight: bold;
-    padding-left: 15px;
+    margin-top:5px;
  }
 
  .form-items .search-widget {

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

@@ -231,6 +231,7 @@ function JobsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams,
                $('input[type="checkbox"]').attr('disabled','disabled');
                $('input[type="radio"]').attr('disabled','disabled');
                $('#host_config_key-gen-btn').attr('disabled','disabled');
+               $('textarea').attr('disabled','disabled');
                })
            .error( function(data, status, headers, config) {
                ProcessErrors(scope, data, status, form,
@@ -319,6 +320,17 @@ function JobsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams,
                }
            }
 
+           // Calc row size of stdout and traceback textarea fields
+           var n = scope['result_stdout'].match(/\n/g);
+           var rows = (n) ? n.length : 1;
+           rows = (rows > 15) ? 15 : rows;
+           scope['stdout_rows'] = rows;
+
+           n = scope['result_traceback'].match(/\n/g);
+           var rows = (n) ? n.length : 1;
+           rows = (rows > 15) ? 15 : rows;
+           scope['traceback_rows'] = rows;
+
            LookUpInit({
                scope: scope,
                form: form,

awx/ui/static/js/forms/JobTemplates.js

@@ -96,24 +96,24 @@ angular.module('JobTemplateFormDefinition', [])
                 "default": '0',
                 addRequired: false, 
                 editRequired: false,
-                column: 2,
+                column: 1,
                 awPopOver: "<p>The number of parallel or simultaneous processes to use while executing the playbook. Provide a value between 0 and 100. " +
                     "A value of zero will use the ansible default setting of 5 parallel processes.</p>",
                 dataTitle: 'Forks',
-                dataPlacement: 'left'
+                dataPlacement: 'right'
                 },
             limit: {
                 label: 'Limit',
                 type: 'text', 
                 addRequired: false, 
                 editRequired: false,
-                column: 2,
+                column: 1,
                 awPopOver: "<p>Provide a host pattern to further constrain the list of hosts that will be managed or affected by the playbook. " +
                     "Multiple patterns can be separated by &#59; &#58; or &#44;</p><p>For more information and examples see the " +
                     "<a href=\"http://ansible.cc/docs/patterns.html#selecting-targets\" target=\"_blank\">Selecting Targets section</a> under Inventory and Patterns " + 
                     " in the Ansible documentation.</p>",
                 dataTitle: 'Limit',
-                dataPlacement: 'left'
+                dataPlacement: 'right'
                 },
             verbosity: {
                 label: 'Verbosity',
@@ -122,10 +122,10 @@ angular.module('JobTemplateFormDefinition', [])
                 "default": 0,
                 addRequired: true, 
                 editRequired: true,
-                column: 2,
+                column: 1,
                 awPopOver: "<p>Control the level of output ansible will produce as the playbook executes.</p>",
                 dataTitle: 'Verbosity',
-                dataPlacement: 'left'
+                dataPlacement: 'right'
                 },
             variables: {
                 label: 'Extra Variables',

awx/ui/static/js/forms/Jobs.js

@@ -82,7 +82,7 @@ angular.module('JobFormDefinition', [])
                 ngClick: 'lookUpCredential()',
                 addRequired: false, 
                 editRequired: false,
-                column: 2
+                column: 1
                 },
             forks: {
                 label: 'Forks',
@@ -96,24 +96,24 @@ angular.module('JobFormDefinition', [])
                 "default": '0',
                 addRequired: false, 
                 editRequired: false,
-                column: 2,
+                column: 1,
                 awPopOver: "<p>The number of parallel or simultaneous processes to use while executing the playbook. Provide a value between 0 and 100. " +
                     "A value of zero will use the ansible default setting of 5 parallel processes.</p>",
                 dataTitle: 'Forks',
-                dataPlacement: 'left'
+                dataPlacement: 'right'
                 },
             limit: {
                 label: 'Limit',
                 type: 'text', 
                 addRequired: false, 
                 editRequired: false,
-                column: 2,
+                column: 1,
                 awPopOver: "<p>Provide a host pattern to further constrain the list of hosts that will be managed or affected by the playbook. " +
                     "Multiple patterns can be separated by &#59; &#58; or &#44;</p><p>For more information and examples see the " +
                     "<a href=\"http://ansible.cc/docs/patterns.html#selecting-targets\" target=\"_blank\">Selecting Targets section</a> under Inventory and Patterns " + 
                     " in the Ansible documentation.</p>",
                 dataTitle: 'Limit',
-                dataPlacement: 'left'
+                dataPlacement: 'right'
                 },
             verbosity: {
                 label: 'Verbosity',
@@ -122,10 +122,10 @@ angular.module('JobFormDefinition', [])
                 "default": 0,
                 addRequired: true, 
                 editRequired: true,
-                column: 2,
+                column: 1,
                 awPopOver: "<p>Control the level of output ansible will produce as the playbook executes.</p>",
                 dataTitle: 'Verbosity',
-                dataPlacement: 'left'
+                dataPlacement: 'right'
                 },
             variables: {
                 label: 'Extra Variables',
@@ -238,10 +238,10 @@ angular.module('JobFormDefinition', [])
 
         statusFields: {
             status: {
-                label: 'Job Status <span class="job-detail-status job-\{\{ status \}\}"><i class="icon-circle"></i> \{\{ status \}\}</span>',
+                label: 'Job Status',
-                type: 'text',
+                type: 'custom',
+                control: '<div class="job-detail-status job-\{\{ status \}\}"><i class="icon-circle"></i> \{\{ status \}\}</div>',
                 readonly: true,
-                control: false
                 },
             created: {
                 label: 'Date',
@@ -252,15 +252,16 @@ angular.module('JobFormDefinition', [])
                 label: 'Standard Out', 
                 type: 'textarea',
                 readonly: true,
-                rows: 20,
+                rows: "\{\{ stdout_rows \}\}",
-                "class": 'span12'
+                "class": 'span12 nowrap',
+                ngShow: "result_stdout != ''"
                 },
             result_traceback: {
                 label: 'Traceback',
                 type: 'textarea', 
                 readonly: true,
-                rows: 10,
+                rows: "\{\{ traceback_rows \}\}",
-                "class": 'span12',
+                "class": 'span12 nowrap',
                 ngShow: "result_traceback != ''"
                 }
             },

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

@@ -604,7 +604,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
               html += "</div>\n";
               html += "<div class=\"status-spin\"><i class=\"icon-spinner icon-spin\" ng-show=\"statusSearchSpin == true\"></i></div>\n";
           }
-          html += "<div class=\"status-fields\">\n";
+          html += "<div class=\"form-horizontal status-fields\">\n";
           for (var fld in this.form.statusFields) {
               field = this.form.statusFields[fld];
               html += this.buildField(fld, field, options);

awx/ui/static/partials/login-dialog.html

@@ -6,7 +6,7 @@
           <img ng-src="{{ AWXLoginLogo }}" />
         </div>
         <div class="modal-body">
-          <div class="login-alert" ng-show="(sessionExpired == false)">Welcome to AWX! &nbsp;Please sign in.</div>
+          <div class="login-alert" ng-show="(sessionExpired == false)">Welcome to AnsibleWorks AWX! &nbsp;Please sign in.</div>
           <div class="login-alert" ng-show="(sessionExpired == true)">Your session timed out due to inactivity. Please sign in.</div>
           <form id="login-form" name="loginForm" class="form-horizontal" autocomplete="off" novalidate >
             <div class="control-group">