Fix minor UX/UI form inconsistencies across project

awx/ui/client/legacy-styles/ansible-ui.less

@@ -2330,3 +2330,15 @@ html input[disabled] {
 input[disabled].ui-spinner-input {
   background-color: @egrey;
 }
+
+.CodeMirror-scroll {
+    margin-bottom: 0;
+    padding-bottom: 0;
+    margin-right: 0;
+    overflow: auto !important;
+    overflow-y: auto !important;
+}
+
+.CodeMirror-lines {
+    margin-bottom: 20px;
+}

awx/ui/client/legacy-styles/codemirror.less

@@ -9,7 +9,7 @@
 
 .CodeMirror {
     height: auto;
-    overflow-x: scroll;
+    overflow-x: auto;
     overflow-y: hidden;
     border: 1px solid @b7grey;
 }

awx/ui/client/legacy-styles/forms.less

@@ -282,11 +282,21 @@
     color: @login-notice-text;
 }
 
+.Button-primary--hollow {
+    border: 1px solid @default-link;    
+    color: @default-link;
+    background: @default-bg;
+}
+.Button-primary--hollow:hover {
+    color: @default-link-hov;
+    border: 1px solid @default-link-hov;    
+}
+
 .ui-spinner{
     height: 30px;
-    background-color: @field-secondary-bg;
+    background-color: @field-secondary-bg !important;
     border-radius: 5px;
-    border:1px solid @field-border;
+    border:1px solid @field-border !important;
     color: @field-input-text;
     width:100%
 }

awx/ui/client/legacy-styles/lists.less

@@ -20,6 +20,7 @@ table, tbody {
 
 .List-table{
     width: 100%;
+    margin-top: 20px;
     table-layout: fixed;
 }
 
@@ -129,7 +130,7 @@ table, tbody {
 .List-titleBadge {
     font-size: 11px;
     font-weight: normal;
-    padding: 1px 10px;
+    padding: 2px 10px;
     height: 14px;
     margin: 3px 0;
     background-color: @list-title-badge;

awx/ui/client/legacy-styles/main-layout.less

@@ -21,7 +21,7 @@ body {
     padding-bottom: 50px;
     position: relative;
     background-color: @default-secondary-bg;
-    padding-top: 96px;
+    padding-top: 100px;
 }
 
 .container-fluid {

awx/ui/client/src/credentials/credentials.list.js

@@ -26,12 +26,9 @@ export default ['i18n', function(i18n) {
                 key: true,
                 label: i18n._('Name'),
                 columnClass: 'col-md-3 col-sm-9 col-xs-9',
-                modalColumnClass: 'col-md-11'
+                modalColumnClass: 'col-md-11',
-            },
+                awToolTip: '{{credential.description}}',
-            description: {
+                dataPlacement: 'top'
-                label: i18n._('Description'),
-                excludeModal: true,
-                columnClass: 'col-md-3 hidden-sm hidden-xs'
             },
             kind: {
                 label: i18n._('Type'),

awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.block.less

@@ -33,8 +33,6 @@
 .DashboardGraphs-graphSection {
     display: block;
     flex: 1;
-    padding-top:20px;
-    margin-bottom: -20px;
 }
 
 .DashboardGraphs-graphContainer {

awx/ui/client/src/home/dashboard/graphs/graph-helpers/auto-size.directive.js

@@ -20,12 +20,12 @@ function AutoSizeModule($window) {
         function adjustSize() {
             if (attrs.graphType === "hostStatus") {
                 if (element.parent().width() > 596) {
-                    element.height(320);//596);
+                    element.height(285);//596);
                 } else {
                     element.height(element.parent().width());
                 }
             } else {
-                element.height(320);
+                element.height(285);
             }
         }
 

awx/ui/client/src/inventories/inventory.list.js

@@ -44,7 +44,9 @@ export default ['i18n', function(i18n) {
                 label: i18n._('Name'),
                 columnClass: 'col-md-5 col-sm-5 col-xs-8 List-staticColumnAdjacent',
                 modalColumnClass: 'col-md-11',
-                linkTo: '/#/inventories/{{inventory.id}}/manage'
+                linkTo: '/#/inventories/{{inventory.id}}/manage',
+                awToolTip: "{{ inventory.description }}",
+                awTipPlacement: "top"
             },
             organization: {
                 label: i18n._('Organization'),

awx/ui/client/src/inventory-scripts/inventory-scripts.list.js

@@ -19,12 +19,9 @@ export default ['i18n', function(i18n){
                 key: true,
                 label: i18n._('Name'),
                 columnClass: 'col-md-3 col-sm-9 col-xs-9',
-                modalColumnClass: 'col-md-8'
+                modalColumnClass: 'col-md-8',
-            },
+                awToolTip: '{{inventory_script.description}}',
-            description: {
+                dataPlacement: 'top'
-                label: i18n._('Description'),
-                excludeModal: true,
-                columnClass: 'col-md-4 hidden-sm hidden-xs'
             },
             organization: {
                 label: i18n._('Organization'),

awx/ui/client/src/management-jobs/management-jobs.list.js

@@ -15,11 +15,9 @@ export default function(){
         fields: {
             name: {
                 label: 'Name',
-                columnClass: 'col-sm-4 col-xs-4'
+                columnClass: 'col-sm-4 col-xs-4',
-            },
+                awToolTip: '{{configure_job.description}}',
-            description: {
+                dataPlacement: 'top'
-                label: 'Description',
-                columnClass: 'col-sm-6 col-xs-6 hidden-sm hidden-xs'
             }
         },
         actions: {

awx/ui/client/src/notifications/notificationTemplates.list.js

@@ -31,7 +31,9 @@ export default ['i18n', function(i18n){
                 key: true,
                 label: i18n._('Name'),
                 columnClass: 'col-md-3 col-sm-9 col-xs-9',
-                linkTo: '/#/notification_templates/{{notification_template.id}}'
+                linkTo: '/#/notification_templates/{{notification_template.id}}',
+                awToolTip: '{{notification_template.description}}',
+                dataPlacement: 'top'
             },
             notification_type: {
                     label: i18n._('Type'),

awx/ui/client/src/organizations/list/organizations-list.partial.html

@@ -52,7 +52,11 @@
                     ng-class="{'OrgCards-card--selected': $stateParams.organization_id == card.id}"
                     ng-repeat="card in orgCards track by card.id">
                     <div class="OrgCards-header">
-                        <h3 class="OrgCards-label">{{ card.name }}</h3>
+                        <h3 class="OrgCards-label"
+                            aw-tool-tip="{{ card.description || 'Place organization description here' }}"
+                            aw-tip-placement="top">
+                            {{ card.name }}
+                        </h3>
                         <div class="OrgCards-actionItems">
                             <button class="OrgCards-actionItem
                                 List-actionButton"
@@ -80,7 +84,6 @@
                             </button>
                         </div>
                     </div>
-                    <p class="OrgCards-description">{{ card.description || "Place organization description here" }}</p>
                     <div class="OrgCards-links">
                         <div class="OrgCards-link" ng-repeat="link in card.links">
                             <span class="badge List-titleBadge

awx/ui/client/src/organizations/organizations.list.js

@@ -21,13 +21,10 @@ export default [function() {
             name: {
                 key: true,
                 label: 'Name',
-                columnClass: 'col-lg-4 col-md-6 col-sm-8 col-xs-8'
+                columnClass: 'col-lg-4 col-md-6 col-sm-8 col-xs-8',
+                awToolTip: '{{organization.description}}',
+                dataPlacement: 'top'
             },
-            description: {
-                label: 'Description',
-                columnClass: 'hidden-sm hidden-xs',
-                excludeModal: true
-            }
         },
 
         actions: {

awx/ui/client/src/organizations/orgcards.block.less

@@ -37,7 +37,6 @@
     border: 1px solid @default-border;
     display: flex;
     flex-wrap: wrap;
-    align-items: baseline;
     margin-top: 20px;
     width: ~"calc(33.333% - 20px)";
     margin-left: 10px;
@@ -52,7 +51,6 @@
 .OrgCards-header {
     display: flex;
     flex-wrap: nowrap;
-    align-items: baseline;
     width: 100%;
 }
 
@@ -66,6 +64,7 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    align-items: baseline;
 }
 
 .OrgCards-actionItems {

awx/ui/client/src/portal-mode/portal-job-templates.list.js

@@ -21,11 +21,9 @@ export default ['i18n', function(i18n) {
                 key: true,
                 label: i18n._('Name'),
                 columnClass: 'col-lg-5 col-md-5 col-sm-9 col-xs-8',
-                linkTo: '/#/templates/{{job_template.id}}'
+                linkTo: '/#/templates/{{job_template.id}}',
-            },
+                awToolTip: '{{job_template.description}}',
-            description: {
+                dataPlacement: 'top'
-                label: i18n._('Description'),
-                columnClass: 'col-lg-4 col-md-4 hidden-sm hidden-xs'
             }
         },
 

awx/ui/client/src/portal-mode/portal-mode-jobs.partial.html

@@ -1,18 +1,26 @@
 <div id="portal-container-jobs" class="Panel">
-	<div class="PortalMode-filterHolder">
+    <div class="FormToggle-container">
-		<div class="btn-group PortalMode-filter">
+        <div class="btn-group">
-		    <button ng-class="{'btn-primary ': activeFilter == 'user',
+            <button ng-class="{'btn-primary': activeFilter === 'user', 'Button-primary--hollow': activeFilter !== 'user'}"
-		    'btn-default' : activeFilter != 'user' }"
+                    ng-click='filterUser()'
-		    ng-click='filterUser()' class="btn btn-xs" translate>My Jobs</button>
+                    class="btn btn-xs"
-		    <button ng-class="{'btn-primary' : activeFilter == 'all',
+                    translate>
-		    'btn-default' : activeFilter != 'all'}" ng-click='filterAll()' class="btn btn-xs btn-default" translate>All Jobs</button>
+                My Jobs
-		</div>
+            </button>
-		<div class="PortalMode-refresh">
+            <button ng-class="{'btn-primary': activeFilter === 'all', 'Button-primary--hollow': activeFilter !== 'all'}"
-			<button id="refresh_btn" aw-tool-tip="Refresh the page" data-placement="top" class="btn List-buttonDefault" ng-click="refresh()" ng-show="socketStatus == 'error'">
+                    ng-click='filterAll()'
-					<span translate>REFRESH</span>
+                    class="btn btn-xs"
-			</button>
+                    translate>
-		</div>
+                All Jobs
-	</div>
+            </button>
+        </div>
+        <div class="PortalMode-refresh">
+            <button id="refresh_btn" aw-tool-tip="Refresh the page" data-placement="top" class="btn List-buttonDefault" 
+                    ng-click="refresh()" ng-show="socketStatus == 'error'">
+                <span translate>REFRESH</span>
+            </button>
+        </div>
+    </div>
     <div id="portal-jobs">
     </div>
 </div>

awx/ui/client/src/portal-mode/portal-mode-layout.partial.html

@@ -6,14 +6,25 @@
             <div class="PortalMode-panel--right">
                 <div id="portal-container-jobs" class="Panel">
                     <div class="PortalMode-filterHolder">
-                        <div class="btn-group PortalMode-filter">
+                        <div class="FormToggle-container">
-                            <button ng-class="{'btn-primary ': activeFilter == 'user',
+                            <div class="btn-group">
-            'btn-default' : activeFilter != 'user' }" ng-click='filterUser()' class="btn btn-xs PortalMode-filterButton--edges" translate>My Jobs</button>
+                                <button ng-class="{'btn-primary': activeFilter === 'user', 'Button-primary--hollow': activeFilter !== 'user'}"
-                            <button ng-class="{'btn-primary' : activeFilter == 'all',
+                                        ng-click='filterUser()'
-            'btn-default' : activeFilter != 'all'}" ng-click='filterAll()' class="btn btn-xs PortalMode-filterButton--edges" translate>All Jobs</button>
+                                        class="btn btn-xs"
+                                        translate>
+                                    My Jobs
+                                </button>
+                                <button ng-class="{'btn-primary': activeFilter === 'all', 'Button-primary--hollow': activeFilter !== 'all'}"
+                                        ng-click='filterAll()'
+                                        class="btn btn-xs"
+                                        translate>
+                                    All Jobs
+                                </button>
+                            </div>
                         </div>
                         <div class="PortalMode-refresh">
-                            <button id="refresh_btn" aw-tool-tip="Refresh the page" data-placement="top" class="btn List-buttonDefault" ng-click="refresh()" ng-show="socketStatus == 'error'">
+                            <button id="refresh_btn" aw-tool-tip="Refresh the page" data-placement="top" class="btn List-buttonDefault" 
+                                    ng-click="refresh()" ng-show="socketStatus == 'error'">
                                 <span>REFRESH</span>
                             </button>
                         </div>

awx/ui/client/src/projects/projects.list.js

@@ -35,7 +35,9 @@ export default ['i18n', function(i18n) {
                 key: true,
                 label: i18n._('Name'),
                 columnClass: "col-lg-4 col-md-4 col-sm-5 col-xs-7 List-staticColumnAdjacent",
-                modalColumnClass: 'col-md-8'
+                modalColumnClass: 'col-md-8',
+                awToolTip: '{{project.description}}',
+                dataPlacement: 'top'
             },
             scm_type: {
                 label: i18n._('Type'),

awx/ui/client/src/shared/form-generator.js

@@ -663,7 +663,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                             let parseTypeName = field.parseTypeName || 'parseType';
                             let getToggleClass = (primary, secondary) => `{
                                 'btn-primary': ${parseTypeName} === '${primary}',
-                                'btn-default' : ${parseTypeName} === '${secondary}'
+                                'Button-primary--hollow' : ${parseTypeName} === '${secondary}'
                             }`;
                             let toggleLeftClass = getToggleClass('yaml', 'json');
                             let toggleRightClass = getToggleClass('json', 'yaml');
@@ -674,7 +674,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                                         <label ng-class="${toggleLeftClass}" class="btn btn-xs">
                                             <input type="radio" value="yaml" ng-model="${parseTypeName}" ng-change="parseTypeChange('${parseTypeName}', '${fld}')" />YAML
                                         </label>
-                                        <label ng-class="${toggleRightClass}" class="btn btn-xs btn-default">
+                                        <label ng-class="${toggleRightClass}" class="btn btn-xs">
                                             <input type="radio" value="json" ng-model="${parseTypeName}" ng-change="parseTypeChange('${parseTypeName}', '${fld}')" />JSON
                                         </label>
                                     </div>

awx/ui/client/src/shared/paginate/paginate.block.less

@@ -23,7 +23,6 @@
      font-size: 12px !important;
      color: @list-pagin-text;
      text-transform: uppercase;
-     height: 22px;
      display: flex;
      justify-content: flex-end;
  }

awx/ui/client/src/shared/smart-search/smart-search.block.less

@@ -1,7 +1,5 @@
 @import "../branding/colors.default.less";
 .SmartSearch {
-    margin-bottom: 10px;
-    min-height: 45px;
     padding-left: 15px;
     padding-right: 15px;
 }
@@ -14,9 +12,7 @@
     display: flex;
     padding: 0;
     font-size: 12px;
-    height: 35px;
     align-items: stretch;
-    margin-bottom: 10px;
     line-height: 20px;
     width: 50%;
 }
@@ -42,6 +38,7 @@
     display: flex;
     background-color: @default-bg;
     position: relative;
+    height: 34px;
 }
 
 .SmartSearch-searchTermContainer.is-open {

awx/ui/client/src/teams/teams.list.js

@@ -22,12 +22,9 @@ export default ['i18n', function(i18n) {
                 key: true,
                 label: i18n._('Name'),
                 columnClass: 'col-lg-3 col-md-4 col-sm-9 col-xs-9',
-                modalColumnClass: 'col-md-8'
+                modalColumnClass: 'col-md-8',
-            },
+                awToolTip: '{{team.description}}',
-            description: {
+                dataPlacement: 'top'
-                label: i18n._('Description'),
-                columnClass: 'col-lg-3 col-md-3 hidden-sm hidden-xs',
-                excludeModal: true
             },
             organization: {
                 label: i18n._('Organization'),

awx/ui/client/src/templates/templates.list.js

@@ -23,17 +23,15 @@ export default ['i18n', function(i18n) {
                 key: true,
                 label: i18n._('Name'),
                 columnClass: 'col-lg-2 col-md-2 col-sm-4 col-xs-9',
-                ngHref: '#/templates/{{template.type}}/{{template.id}}'
+                ngHref: '#/templates/{{template.type}}/{{template.id}}',
+                awToolTip: '{{template.description}}',
+                dataPlacement: 'top'
             },
             type: {
                 label: i18n._('Type'),
                 ngBind: 'template.type_label',
                 columnClass: 'col-lg-2 col-md-2 col-sm-4 hidden-xs'
             },
-            description: {
-                label: i18n._('Description'),
-                columnClass: 'col-lg-2 hidden-md hidden-sm hidden-xs'
-            },
             smart_status: {
               label: i18n._('Activity'),
               columnClass: 'List-tableCell col-lg-2 col-md-2 hidden-sm hidden-xs',