Merge pull request #2983 from mabashian/upgrade-jquery-mabashian

Upgrades jQuery and Bootstrap

Reviewed-by: https://github.com/softwarefactory-project-zuul[bot]

awx/ui/client/features/credentials/index.view.html

@@ -1,6 +1,6 @@
 <div ui-view="edit"></div>
 <div ui-view="add"></div>
 
-<div class="panel at-Panel">
+<div class="card at-Panel">
     <div ui-view="list"></div>
 </div>

awx/ui/client/features/credentials/legacy.credentials.js

@@ -79,19 +79,19 @@ function LegacyCredentialsService () {
                         key: true,
                         label: N_('User'),
                         linkBase: 'users',
-                        class: 'col-lg-3 col-md-3 col-sm-3 col-xs-4'
+                        columnClass: 'col-lg-3 col-md-3 col-sm-3 col-xs-4'
                     },
                     role: {
                         label: N_('Role'),
                         type: 'role',
                         nosort: true,
-                        class: 'col-lg-4 col-md-4 col-sm-4 col-xs-4'
+                        columnClass: 'col-lg-4 col-md-4 col-sm-4 col-xs-4'
                     },
                     team_roles: {
                         label: N_('Team Roles'),
                         type: 'team_roles',
                         nosort: true,
-                        class: 'col-lg-5 col-md-5 col-sm-5 col-xs-4'
+                        columnClass: 'col-lg-5 col-md-5 col-sm-5 col-xs-4'
                     }
                 }
             }),

awx/ui/client/features/output/_index.less

@@ -174,6 +174,14 @@
         grid-column-start: 1;
         grid-column-end: 3;
     }
+
+    /* The ng-transclude tag that gets injected as a part of at-Panel was throwing off the height
+    of the panel after Bootstrap's move to display: flex.  This seemed like the most concise fix*/
+    ng-transclude {
+        display: flex;
+        flex-flow: column nowrap;
+        height: 100%;
+    }
 }
 
 .at-mixin-event() {

awx/ui/client/features/output/search.partial.html

@@ -10,7 +10,7 @@
             ng-attr-placeholder="{{ vm.running ?
                 vm.strings.get('search.PLACEHOLDER_RUNNING') :
                 vm.strings.get('search.PLACEHOLDER_DEFAULT') }}">
-        <span class="input-group-btn">
+        <span class="input-group-btn input-group-append">
             <button class="btn at-ButtonHollow--default at-Input-button"
                 ng-click="vm.submitSearch()"
                 ng-disabled="vm.disabled || !vm.value || vm.value === ''"

awx/ui/client/features/portalMode/_index.less

@@ -45,7 +45,7 @@
 .PortalMode-filterHolder {
 	position: absolute;
 	right: 1px;
-    margin-right: 25px;
+    margin-right: 10px;
 	display: flex;
 	align-items: center;
  	justify-content: center;

awx/ui/client/features/templates/templatesList.view.html

@@ -21,18 +21,14 @@
                 aria-expanded="false">
                 <span class="sr-only">Toggle Dropdown</span>
             </button>
-            <ul class="dropdown-menu at-List-toolbarActionDropdownMenu">
+            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="button-add">
-                <li>
+              <a class="dropdown-item" ui-sref="templates.addJobTemplate">
-                    <a ui-sref="templates.addJobTemplate">
+                  {{:: vm.strings.get('list.ADD_DD_JT_LABEL') }}
-                        {{:: vm.strings.get('list.ADD_DD_JT_LABEL') }}
+              </a>
-                    </a>
+              <a class="dropdown-item" ui-sref="templates.addWorkflowJobTemplate">
-                </li>
+                  {{:: vm.strings.get('list.ADD_DD_WF_LABEL') }}
-                <li>
+              </a>
-                    <a ui-sref="templates.addWorkflowJobTemplate">
+            </div>
-                        {{:: vm.strings.get('list.ADD_DD_WF_LABEL') }}
-                    </a>
-                </li>
-            </ul>
         </div>
     </div>
     <at-list results="vm.templates" id="templates_list">

awx/ui/client/index.template.ejs

@@ -60,8 +60,8 @@
                 <div class="modal-dialog">
                     <div class="modal-content">
                         <div class="modal-header">
-                            <button type="button" class="close" ng-hide="disableButtons" data-target="#alert-modal" data-dismiss="modal" class="modal" aria-hidden="true"><i class="fa fa-times-circle"></i></button>
                             <h3 id="alertHeader" ng-bind="alertHeader"></h3>
+                            <button type="button" class="close" ng-hide="disableButtons" data-target="#alert-modal" data-dismiss="modal" class="modal" aria-hidden="true"><i class="fa fa-times-circle"></i></button>
                         </div>
                         <div class="modal-body">
                             <div id="alert-modal-msg" class="alert" ng-bind-html="alertBody"></div>

awx/ui/client/legacy/styles/angular-scheduler.less

@@ -174,10 +174,6 @@
     .inline-label {
         margin-left: 10px;
     }
-    .radio-inline input[type="radio"]{
-        margin-top: 2px;
-        margin-left: -15px;
-    }
     #scheduler-buttons {
         margin-top: 20px;
     }

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

@@ -302,10 +302,6 @@ i:active,
   background-color: @default-succ;
 }
 
-.bold-text .checkbox-inline {
-  font-weight: bold;
-}
-
 /* Disable textarea re-sizing as a general rule */
 textarea {
   resize: none;
@@ -370,16 +366,18 @@ textarea.allowresize {
 }
 
 /* TB tooltip overrides */
-  .popover-content {
+  .popover-body {
       width: 100%;
       padding: 0;
+      color: @default-bg;
 
       .table>tbody>tr>td {
           padding-left: 0;
           border-top: 1px solid @b7grey;
       }
   }
-  h3.popover-title, .popover-content, .popover-content blockquote, .popover-content a {
+  h3.popover-header, .popover-body, .popover-body blockquote, .popover-body a {
+      font-family: 'Open Sans', sans-serif;
       font-size: 12px;
   }
   .flyout {
@@ -391,7 +389,7 @@ textarea.allowresize {
   .flyout tbody > tr:last-child > td {
       padding-bottom: 0;
   }
-  .popover-title {
+  .popover-header {
       padding: 0 0 5px 0;
       background-color: @default-interface-txt;
       color: @default-bg;
@@ -480,37 +478,6 @@ hr {
   }
 }
 
-/* help collapse */
-  h4.panel-title {
-    font-size: 14px;
-  }
-
-  .panel-heading:hover {
-    cursor: pointer;
-  }
-
-  .panel-default>.panel-heading .collapse-help-icon {
-    color: @grey;
-  }
-
-  .collapsible-help {
-      margin-top: 20px;
-      margin-bottom: 20px;
-      dl {
-         margin-left: 15px;
-      }
-      dt {
-         margin-top: 15px;
-      }
-  }
-
-/*
-th.actions-column,
-td.actions {
-  white-space: nowrap;
-}
-*/
-
 .tab-content {
   padding-top: 15px;
 }
@@ -586,6 +553,7 @@ dd {
 .ui-widget-content a.help-link:visited {
   color: @default-icon;
   text-decoration: none;
+  padding-left: 5px;
 }
 
 .help-link:hover,
@@ -805,27 +773,6 @@ select.page-size {
     display: inline-block;
 }
 
-/* Display drop-down menus on hover. Remove margin between toggle link
-   and menu, allowing smooth mouse movement between toggle and menu
-
-   http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click
-*/
-
-/*  .dropdown-toggle:hover .dropdown-menu, .dropdown:hover .dropdown-menu {
-     display: block;
-  }
-
-  .dropdown-menu li:hover {
-     visibility: visible;
-  }
-
-  .dropdown-menu {
-     margin-top: 0;
-     z-index: 200;
-  }
-*/
-/* end */
-
 .greeting {
   padding-right: 22px;
 }
@@ -857,26 +804,6 @@ input[type="checkbox"].checkbox-no-label {
   margin-top: 10px;
 }
 
-.radio-group {
-  .radio-inline + .radio-inline {
-    margin-left: 0;
-  }
-}
-
-.checkbox-group {
-  .radio-inline + .radio-inline,
-  .checkbox-inline + .checkbox-inline {
-    margin-left: 0;
-  }
-  .checkbox-inline, .radio-inline {
-    margin-right: 10px;
-  }
-
-  .checkbox-inline.stack-inline {
-      display: block;
-  }
-}
-
 .checkbox-options {
   font-weight: normal;
 }
@@ -1612,6 +1539,7 @@ tr td button i {
 /* overrides to TB modal */
 .modal-content {
     padding: 20px;
+    box-shadow: 0 5px 15px rgba(0,0,0,.5);
 }
 
 .modal-header {
@@ -1627,6 +1555,7 @@ tr td button i {
 
 .modal {
   border: 1px solid @black;
+  overflow-y: auto;
 }
 
 .modal .SmartSearch-bar {
@@ -1976,10 +1905,6 @@ tr td button i {
     margin: 0 15px;
 }
 
-.panel-title {
-    font-weight: bold;
-}
-
 .show_input_button {
     width: 73px;
 }
@@ -2027,7 +1952,7 @@ tr td button i {
   margin: 100px auto;
 }
 
-.modal-backdrop, .modal-backdrop.fade.in {
+.modal-backdrop, .modal-backdrop.fade.show {
     opacity: .25;
 }
 
@@ -2197,10 +2122,6 @@ a:hover {
     background-color: @default-err;
 }
 
-.dropdown-menu>li>a {
-    padding: 3px 10px;
-}
-
 #scheduled-jobs-tab .List-header {
     display: none;
 }
@@ -2329,22 +2250,6 @@ body {
     padding-bottom: 0px;
 }
 
-.Panel {
-    background-color: @panel-bg;
-    border-radius: 5px;
-    padding: 20px;
-    border: 1px solid @panel-border;
-    margin-top: 20px;
-}
-
-.Panel--noBottomPadding {
-    padding-bottom: 0px;
-}
-
-.Panel-hidden {
-    display: none;
-}
-
 .btn {
     text-transform: uppercase;
 }

awx/ui/client/legacy/styles/bootstrap-custom-overrides.less

@@ -0,0 +1,188 @@
+body {
+    font-family: 'Open Sans', sans-serif;
+    font-weight: 400;
+    color: @default-data-txt;
+    background-color: @default-secondary-bg;
+    font-size: 0.88rem;
+}
+
+.dropdown-toggle::after {
+    display:none;
+}
+
+.tooltip.show {
+    opacity: 1;
+}
+
+.tooltip {
+    font-family: 'Open Sans', sans-serif;
+    font-size: 0.75rem;
+    line-height: 1.4;
+}
+
+.bs-tooltip-top .arrow::before,
+.bs-tooltip-auto[x-placement^="top"] .arrow::before {
+    border-top-color: @default-stdout-txt;
+}
+
+.bs-tooltip-bottom .arrow::before,
+.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
+    border-bottom-color: @default-stdout-txt;
+}
+
+.bs-tooltip-left .arrow::before,
+.bs-tooltip-auto[x-placement^="left"] .arrow::before {
+    border-left-color: @default-stdout-txt;
+}
+
+.bs-tooltip-right .arrow::before,
+.bs-tooltip-auto[x-placement^="right"] .arrow::before {
+    border-right-color: @default-stdout-txt;
+}
+
+/* this used to exist but was removed */
+.form-horizontal .form-group {
+    margin-left: -15px;
+    margin-right: -15px;
+}
+
+label {
+    margin-bottom: 0.3125rem;
+}
+
+.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
+    line-height: 1.1;
+}
+
+p {
+    margin-bottom: 0.625rem;
+}
+
+.dropdown-menu, .btn {
+    font-size: 0.88rem;
+}
+
+.btn-xs, .btn-group-xs>.btn {
+    padding: 1px 5px;
+    font-size: 0.75rem;
+    line-height: 1.5;
+    border-radius: 3px;
+}
+
+.btn-sm, .btn-group-sm>.btn {
+    padding: 5px 10px;
+    font-size: 0.75rem;
+    line-height: 1.5;
+    border-radius: 3px;
+}
+
+button, html input[type=button], input[type=reset], input[type=submit] {
+    cursor: pointer;
+}
+
+.dropdown-menu {
+    padding: .2rem 0;
+}
+
+.dropdown-item {
+    padding: 0.19rem 0.625rem;
+}
+
+@media (min-width: 768px) {
+    .modal-dialog {
+        width: 600px;
+    }
+}
+
+.modal-dialog {
+    max-width: none;
+}
+
+.modal-footer>:not(:last-child) {
+    margin-right: 1.25rem;
+}
+
+.btn-group-vertical>.btn, .btn-group>.btn {
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+}
+
+.bs-popover-auto[x-placement^=right] .arrow::after, .bs-popover-right .arrow::after {
+    border-right-color: @default-stdout-txt;
+}
+
+.bs-popover-auto[x-placement^=left] .arrow::after, .bs-popover-left .arrow::after {
+    border-left-color: @default-stdout-txt;
+}
+
+.bs-popover-auto[x-placement^=top] .arrow::after, .bs-popover-top .arrow::after {
+    border-top-color: @default-stdout-txt;
+}
+
+.bs-popover-auto[x-placement^=bottom] .arrow::after, .bs-popover-bottom .arrow::after {
+    border-bottom-color: @default-stdout-txt;
+}
+
+a:not([href]):not([tabindex]) {
+    color: @default-link;
+}
+
+a:not([href]):not([tabindex]):hover {
+    color: @default-link-hov;
+}
+
+.dropdown-menu>li>a {
+    padding: 3px 10px;
+    display: block;
+    clear: both;
+    font-weight: 400;
+    line-height: 1.42857143;
+    white-space: nowrap;
+}
+
+.dropdown-item.active,
+.dropdown-item:active,
+.dropdown-menu>li>a:hover,
+.dropdown-menu>li>a:focus {
+    text-decoration: none;
+    color: @default-data-txt;
+    background-color: @f6grey;
+}
+
+.radio-inline+.radio-inline, .checkbox-inline+.checkbox-inline {
+    margin-left: 10px;
+}
+
+label {
+    font-weight: 700;
+}
+
+.radio-inline, .checkbox-inline {
+    font-weight: 400;
+}
+
+.form-control {
+    height: 30px;
+}
+
+.btn-success{
+	background: @default-succ;
+	border-color: transparent;
+	:hover{
+		background: @default-succ-hov;
+	}
+	:disabled{
+		background: @default-succ-disabled;
+	}
+}
+.btn-default{
+	background: @btn-bg;
+	border-color: @btn-bord;
+	color: @btn-txt;
+	:hover{
+		background: @btn-bg-hov;
+	}
+	:focus{
+		background: @btn-bg-sel;
+	}
+}

awx/ui/client/legacy/styles/bootstrap-datepicker.less

@@ -70,9 +70,6 @@
   border-bottom: 0;
   border-top: 6px solid #fff;
 }
-.datepicker > div {
-  display: none;
-}
 .datepicker.days .datepicker-days,
 .datepicker.months .datepicker-months,
 .datepicker.years .datepicker-years {

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

@@ -216,12 +216,6 @@
     }
 }
 
-.Form-checkbox--stacked {
-    label {
-        display: block;
-    }
-}
-
 .Form-checkbox--subCheckbox {
     font-size: 10px;
     color: @default-stdout-txt;
@@ -424,13 +418,12 @@
     width: 100%;
 }
 
-.Form-passwordButton {
+.Form-browseButton, .Form-passwordButton {
     height: 30px;
     color: @default-interface-txt;
     text-transform: uppercase;
-    line-height: 1;
+    line-height: 1.2;
-    padding-left: 7px;
+    padding: 6px 12px;
-    padding-right: 7px;
     background-color: @default-bg;
     border:1px solid @b7grey;
 }
@@ -582,7 +575,6 @@ input[type='radio']:checked:before {
     color: @default-interface-txt;
     font-weight: normal;
     font-size: small;
-    padding-right:5px;
     width: 100%;
     .noselect;
 }
@@ -789,7 +781,8 @@ input[type='radio']:checked:before {
     background-color: @ebgrey;
 }
 
-.Form-checkboxRow {
+.Form-checkbox {
-    display: flex;
+    label {
-    clear: left;
+        font-weight: 400;
+    }
 }

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

@@ -22,27 +22,20 @@ table, tbody {
 }
 
 .List-tableHeader{
-    height: 30px;
+    height: 34px;
     font-size: 14px;
     font-weight: normal;
     text-transform: uppercase;
     color: @list-header-txt;
-    background-color: @list-header-bg;
     padding-left: 15px;
     padding-right: 15px;
     border-bottom-width:0px!important;
-}
+    align-items: center;
-
+    display: flex;
-.List-tableHeader:first-of-type {
-    border-top-left-radius: 5px;
-}
-
-.List-tableHeader:last-of-type {
-    border-top-right-radius: 5px;
 }
 
 .List-tableHeader--info, .List-tableHeader--actions {
-    text-align: right;
+    justify-content: flex-end;
 }
 
 .List-tableHeader:not([ng-click]) {
@@ -54,7 +47,7 @@ table, tbody {
 }
 
 .List-tableRow {
-    height: 40px;
+    min-height: 44px;
     font-size: 14px;
     color: @list-item;
     border-bottom: 1px solid @default-border;
@@ -69,7 +62,7 @@ table, tbody {
 }
 
 .List-tableRow--selected {
-    border-left: 5px solid @list-row-select-bord;
+    background-color: @list-row-select-bord;
 }
 
 .List-tableRow--disabled {
@@ -117,6 +110,9 @@ table, tbody {
     padding: 7px 15px;
     border-top:0px!important;
     word-wrap: break-word;
+    display: flex;
+    align-items: center;
+    height: 100%;
 }
 
 .List-tableCell.description-column {
@@ -126,7 +122,7 @@ table, tbody {
 
 .List-actionButtonCell {
     padding-top:5px;
-    padding-right: 15px;
+    padding-right: 0px;
     display:flex;
     justify-content: flex-end;
 }
@@ -178,6 +174,7 @@ table, tbody {
     margin: 0;
     background-color: @list-title-badge;
     border-radius: 5px;
+    color: @at-white;
 }
 
 .List-titleBadge--selected {
@@ -398,7 +395,7 @@ table, tbody {
 }
 
 .List-staticColumn--mediumStatus {
-    width: 52px;
+    width: 53px;
     padding-right: 0px!important;
 }
 
@@ -458,10 +455,6 @@ table, tbody {
     font-size: 11px;
 }
 
-.List-dropdownButton {
-    border: none;
-}
-
 .List-dropdownSuccess {
     background-color: @submit-button-bg;
     color: @submit-button-text;
@@ -564,3 +557,59 @@ table, tbody {
         width: 100%;
     }
 }
+
+.List-defaultLayout {
+    display: grid;
+    grid-template-columns: 5px auto;
+}
+
+.List-lookupLayout {
+    display: grid;
+    grid-template-columns: 26px auto;
+}
+
+.List-staticColumnLayout--statusOrCheckbox {
+    display: grid;
+    grid-template-columns: 5px 25px auto;
+}
+
+.List-staticColumnLayout--groups {
+    display: grid;
+    grid-template-columns: 5px 25px 25px auto;
+}
+
+.List-staticColumnLayout--hosts {
+    display: grid;
+    grid-template-columns: 5px 55px 25px auto;
+}
+
+.List-staticColumnLayout--hostsWithCheckbox {
+    display: grid;
+    grid-template-columns: 5px 25px 55px 25px auto;
+}
+
+.List-staticColumnLayout--schedules {
+    display: grid;
+    grid-template-columns: 5px 15px 55px auto;
+}
+
+.List-staticColumnLayout--toggleOnOff {
+    display: grid;
+    grid-template-columns: 5px 55px auto;
+}
+
+.List-table {
+    margin-top: 20px;
+}
+
+.List-tableHeaderRow {
+    background-color: @list-header-bg;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+}
+
+.List-centerEnd {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}

awx/ui/client/lib/components/form/form.partial.html

@@ -1,8 +1,6 @@
 <div>
     <form ng-attr-autocomplete="{{::autocomplete || undefined }}">
-        <div class="row">
+        <ng-transclude class="row"></ng-transclude>
-            <ng-transclude></ng-transclude>
-        </div>
     </form>
 
     <at-modal></at-modal>

awx/ui/client/lib/components/input/_index.less

@@ -317,3 +317,9 @@
         }
     }
 }
+
+.at-InputGroup-container {
+    .row {
+        margin: 0;
+    }
+}

awx/ui/client/lib/components/input/file.partial.html

@@ -3,7 +3,7 @@
         <at-input-label></at-input-label>
         <input class="at-InputFile--hidden" type="file"/>
         <div class="input-group">
-            <span class="input-group-btn">
+            <span class="input-group-btn input-group-prepend">
                 <button class="btn at-ButtonHollow--default at-Input-button"
                         ng-disabled="state._disabled || form.disabled"
                         ng-click="vm.onButtonClick()">

awx/ui/client/lib/components/input/group.directive.js

@@ -118,6 +118,7 @@ function AtInputGroupController ($scope, $compile) {
 
     vm.insert = group => {
         const container = document.createElement('div');
+        container.className = 'row';
         let col = 1;
         const colPerRow = 12 / scope.col;
         let isDivided = true;

awx/ui/client/lib/components/input/secret.partial.html

@@ -3,7 +3,7 @@
         <at-input-label></at-input-label>
 
         <div class="input-group">
-            <span class="input-group-btn at-InputGroup-button">
+            <span class="input-group-btn at-InputGroup-button input-group-prepend">
                 <button class="btn at-ButtonHollow--white"
                         ng-class="{
                             'at-Input-button--fixed-xs': mode === 'input',

awx/ui/client/lib/components/input/textarea-secret.partial.html

@@ -3,7 +3,7 @@
         <at-input-label></at-input-label>
 
         <div ng-class="{ 'input-group': state._edit }">
-            <div ng-if="state._edit" class="input-group-btn at-InputGroup-button">
+            <div ng-if="state._edit" class="input-group-btn at-InputGroup-button input-group-prepend">
                 <button class="btn at-ButtonHollow--white at-Input-button--fixed-md"
                         ng-disabled="!state._enableToggle && (state._disabled || form.disabled)"
                         ng-click="state._isBeingReplaced = !state._isBeingReplaced">

awx/ui/client/lib/components/layout/_index.less

@@ -106,6 +106,7 @@
             display: flex;
             cursor: pointer;
             font-size: 13px;
+            line-height: 1.42857143;
                 i {
                     cursor: pointer;
                     color: @at-color-side-nav-item-icon;

awx/ui/client/lib/components/modal/modal.partial.html

@@ -1,13 +1,13 @@
 <div class="modal at-Modal fade" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
         <div class="modal-content at-Modal-window">
-            <div class="row">
+            <div class="Modal-header">
-                <div class="col-xs-10">
+                <div class="Modal-title">
                     <div class="at-Modal-heading">
                         <h4 class="modal-title at-Modal-title">{{ vm.modal.title }}</h4>
                     </div>
                 </div>
-                <div class="col-xs-2">
+                <div class="Modal-exitHolder">
                     <div class="at-Modal-dismiss">
                         <i class="fa fa-lg fa-times-circle" ng-click="vm.hide()"></i>
                     </div>

awx/ui/client/lib/components/panel/body.partial.html

@@ -1,3 +1,3 @@
-<div class="panel-body at-Panel-body">
+<div class="card-body at-Panel-body">
     <ng-transclude></ng-transclude>
 </div>

awx/ui/client/lib/components/panel/panel.partial.html

@@ -1,3 +1,3 @@
-<div class="panel panel-default at-Panel">
+<div class="card at-Panel">
     <ng-transclude></ng-transclude>
 </div>

awx/ui/client/lib/components/tabs/_index.less

@@ -1,7 +1,3 @@
-.at-TabGroup {
-    margin-top: @at-margin-panel;
-}
-
 .at-Tab {
     margin: 0 @at-margin-item-column 0 0;
     font-size: @at-font-size-body;

awx/ui/client/lib/components/tabs/group.partial.html

@@ -1,3 +1,3 @@
-<div class="at-TabGroup">
+<div>
     <ng-transclude></ng-transclude>
 </div>

awx/ui/client/lib/components/truncate/_index.less

@@ -1,6 +1,7 @@
 .at-Truncate {
     display: flex;
     align-items: center;
+    height: 100%;
 
     .at-Truncate-text {
         font-family: monospace, Courier, "Courier New", "Open Sans", sans-serif;
@@ -28,4 +29,4 @@
         top: 0px;
         width: 2em;
     }
-}
+}

awx/ui/client/lib/theme/index.less

@@ -36,9 +36,7 @@
 @import '../../legacy/styles/text-label';
 @import '../../legacy/styles/bootstrap-datepicker';
 @import '../../legacy/styles/ansible-ui';
-
+@import '../../legacy/styles/bootstrap-custom-overrides';
-// Dependency Style Overrides
-@import '../../src/shared/bootstrap-settings';
 
 // Legacy Utilities
 @import '../../src/shared/utilities/alerts';

awx/ui/client/src/access/add-rbac-user-team/rbac-selected-list.directive.js

@@ -33,6 +33,7 @@ export default ['$compile', 'i18n', 'generateList',
                 list = _.cloneDeep(listMap[scope.resourceType]);
 
                 delete list.actions;
+                delete list.layoutClass;
 
                 list.listTitleBadge = false;
 
@@ -42,20 +43,22 @@ export default ['$compile', 'i18n', 'generateList',
                             name: list.fields.name,
                             scm_type: list.fields.scm_type
                         };
+                        delete list.staticColumns;
                         delete list.fields.name.ngClick;
                         list.fields.name.ngHref = "#/projects/{{project.id}}";
-                        list.fields.name.columnClass = 'col-md-5 col-sm-5 col-xs-10';
+                        list.fields.name.columnClass = 'col-sm-5';
-                        list.fields.scm_type.columnClass = 'col-md-5 col-sm-5 hidden-xs';
+                        list.fields.scm_type.columnClass = 'col-sm-5';
                         break;
                     case 'inventories':
                         list.fields = {
                             name: list.fields.name,
                             organization: list.fields.organization
                         };
+                        delete list.staticColumns;
                         delete list.fields.name.ngClick;
                         list.fields.name.ngHref = '{{inventory.linkToDetails}}';
-                        list.fields.name.columnClass = 'col-md-5 col-sm-5 col-xs-10';
+                        list.fields.name.columnClass = 'col-sm-5';
-                        list.fields.organization.columnClass = 'col-md-5 col-sm-5 hidden-xs';
+                        list.fields.organization.columnClass = 'col-sm-5';
                         break;
                     case 'job_templates':
                         list.name = 'job_templates';
@@ -63,7 +66,7 @@ export default ['$compile', 'i18n', 'generateList',
                         list.fields = {
                             name: list.fields.name
                         };
-                        list.fields.name.columnClass = 'col-md-5 col-sm-5 col-xs-10';
+                        list.fields.name.columnClass = 'col-sm-10';
                         delete list.fields.name.ngClick;
                         list.fields.name.ngHref = "#/templates/job_template/{{job_template.id}}";
                         break;
@@ -73,7 +76,7 @@ export default ['$compile', 'i18n', 'generateList',
                         list.fields = {
                             name: list.fields.name
                         };
-                        list.fields.name.columnClass = 'col-md-5 col-sm-5 col-xs-10';
+                        list.fields.name.columnClass = 'col-sm-10';
                         delete list.fields.name.ngClick;
                         list.fields.name.ngHref = "#/templates/workflow_job_template/{{workflow_template.id}}";
                         break;
@@ -83,7 +86,7 @@ export default ['$compile', 'i18n', 'generateList',
                         };
                         delete list.fields.name.ngClick;
                         list.fields.name.ngHref = "#/credentials/{{credential.id}}";
-                        list.fields.name.columnClass = 'col-md-5 col-sm-5 col-xs-10';
+                        list.fields.name.columnClass = 'col-sm-10';
                         break;
                     case 'organizations':
                         list.fields = {
@@ -91,11 +94,12 @@ export default ['$compile', 'i18n', 'generateList',
                         };
                         delete list.fields.name.ngClick;
                         list.fields.name.ngHref = "#/organizations/{{organization.id}}";
-                        list.fields.name.columnClass = 'col-md-5 col-sm-5 col-xs-10';
+                        list.fields.name.columnClass = 'col-sm-10';
                         break;
                 }
 
                 list.fieldActions = {
+                    columnClass: 'col-sm-2',
                     remove: {
                         ngClick: `removeSelection(${list.iterator}, resourceType)`,
                         iconClass: 'fa fa-times-circle',

awx/ui/client/src/access/rbac-multiselect/permissionsUsers.list.js

@@ -25,11 +25,11 @@
         fields: {
             first_name: {
                 label: i18n._('First Name'),
-                columnClass: 'col-md-3 col-sm-3 hidden-xs'
+                columnClass: 'd-none d-sm-flex col-md-3 col-sm-3'
             },
             last_name: {
                 label: i18n._('Last Name'),
-                columnClass: 'col-md-3 col-sm-3 hidden-xs'
+                columnClass: 'd-none d-sm-flex col-md-3 col-sm-3'
             },
             username: {
                 key: true,

awx/ui/client/src/access/rbac-multiselect/rbac-multiselect-list.directive.js

@@ -37,6 +37,7 @@ export default ['addPermissionsTeamsList', 'addPermissionsUsersList', 'TemplateL
             list.multiSelect = true;
             list.multiSelectExtended = true;
             list.listTitleBadge = false;
+            list.layoutClass = 'List-staticColumnLayout--statusOrCheckbox';
             delete list.actions;
             delete list.fieldActions;
 
@@ -47,10 +48,11 @@ export default ['addPermissionsTeamsList', 'addPermissionsUsersList', 'TemplateL
                         name: list.fields.name,
                         scm_type: list.fields.scm_type
                     };
+                    delete list.staticColumns;
                     delete list.fields.name.ngClick;
                     list.fields.name.ngHref = "#/projects/{{project.id}}";
-                    list.fields.name.columnClass = 'col-md-6 col-sm-6 col-xs-11';
+                    list.fields.name.columnClass = 'col-sm-6';
-                    list.fields.scm_type.columnClass = 'col-md-5 col-sm-5 hidden-xs';
+                    list.fields.scm_type.columnClass = 'col-sm-6';
                     break;
 
                 case 'Inventories':
@@ -58,10 +60,11 @@ export default ['addPermissionsTeamsList', 'addPermissionsUsersList', 'TemplateL
                         name: list.fields.name,
                         organization: list.fields.organization
                     };
+                    delete list.staticColumns;
                     delete list.fields.name.ngClick;
                     list.fields.name.ngHref = '{{inventory.linkToDetails}}';
-                    list.fields.name.columnClass = 'col-md-6 col-sm-6 col-xs-11';
+                    list.fields.name.columnClass = 'col-sm-6';
-                    list.fields.organization.columnClass = 'col-md-5 col-sm-5 hidden-xs';
+                    list.fields.organization.columnClass = 'col-sm-6';
                     delete list.disableRow;
                     break;
 
@@ -74,7 +77,7 @@ export default ['addPermissionsTeamsList', 'addPermissionsUsersList', 'TemplateL
                     };
                     delete list.fields.name.ngClick;
                     list.fields.name.ngHref = "#/templates/job_template/{{job_template.id}}";
-                    list.fields.name.columnClass = 'col-md-6 col-sm-6 col-xs-11';
+                    list.fields.name.columnClass = 'col-sm-12';
                     break;
 
                 case 'WorkflowTemplates':
@@ -86,7 +89,7 @@ export default ['addPermissionsTeamsList', 'addPermissionsUsersList', 'TemplateL
                     };
                     delete list.fields.name.ngClick;
                     list.fields.name.ngHref = "#/templates/workflow_job_template/{{workflow_template.id}}";
-                    list.fields.name.columnClass = 'col-md-6 col-sm-6 col-xs-11';
+                    list.fields.name.columnClass = 'col-sm-12';
                     break;
                 case 'Users':
                     list.querySet = { order_by: 'username', page_size: '5' };
@@ -97,9 +100,9 @@ export default ['addPermissionsTeamsList', 'addPermissionsUsersList', 'TemplateL
                     };
                     delete list.fields.username.ngClick;
                     list.fields.username.ngHref = "#/users/{{user.id}}";
-                    list.fields.username.columnClass = 'col-md-5 col-sm-5 col-xs-11';
+                    list.fields.username.columnClass = 'col-sm-4 col-xs-11';
-                    list.fields.first_name.columnClass = 'col-md-3 col-sm-3 hidden-xs';
+                    list.fields.first_name.columnClass = 'd-none d-sm-flex col-sm-4';
-                    list.fields.last_name.columnClass = 'col-md-3 col-sm-3 hidden-xs';
+                    list.fields.last_name.columnClass = 'd-none d-sm-flex col-sm-4';
                     break;
                 case 'Teams':
                     list.fields = {
@@ -108,8 +111,8 @@ export default ['addPermissionsTeamsList', 'addPermissionsUsersList', 'TemplateL
                     };
                     delete list.fields.name.ngClick;
                     list.fields.name.ngHref = "#/teams/{{team.id}}";
-                    list.fields.name.columnClass = 'col-md-6 col-sm-6 col-xs-11';
+                    list.fields.name.columnClass = 'col-sm-6';
-                    list.fields.organization.columnClass = 'col-md-5 col-sm-5 hidden-xs';
+                    list.fields.organization.columnClass = 'col-sm-6';
                     break;
                 case 'Organizations':
                     list.fields = {
@@ -117,7 +120,7 @@ export default ['addPermissionsTeamsList', 'addPermissionsUsersList', 'TemplateL
                     };
                     delete list.fields.name.ngClick;
                     list.fields.name.ngHref = "#/organizations/{{organization.id}}";
-                    list.fields.name.columnClass = 'col-md-6 col-sm-6 col-xs-11';
+                    list.fields.name.columnClass = 'col-sm-12';
                     break;
                 case 'Credentials':
                     list.fields = {
@@ -125,15 +128,15 @@ export default ['addPermissionsTeamsList', 'addPermissionsUsersList', 'TemplateL
                     };
                     delete list.fields.name.ngClick;
                     list.fields.name.ngHref = "#/credentials/{{credential.id}}";
-                    list.fields.name.columnClass = 'col-md-6 col-sm-6 col-xs-11';
+                    list.fields.name.columnClass = 'col-sm-12';
                     break;
                 default:
                     list.fields = {
                         name: list.fields.name,
                         description: list.fields.description
                     };
-                    list.fields.name.columnClass = 'col-md-6 col-sm-6 col-xs-11';
+                    list.fields.name.columnClass = 'col-sm-6';
-                    list.fields.description.columnClass = 'col-md-5 col-sm-5 hidden-xs';
+                    list.fields.description.columnClass = 'col-sm-6';
             }
 
             list_html = generateList.build({

awx/ui/client/src/access/rbac-role-column/roleList.block.less

@@ -4,7 +4,6 @@
     display: flex;
     flex-wrap: wrap;
     align-items: flex-start;
-    padding-left: 15px;
 }
 
 .RoleList-tagContainer {

awx/ui/client/src/activity-stream/factories/build-anchor.factory.js

@@ -95,10 +95,10 @@ export default function BuildAnchor($log, $filter) {
              const name = $filter('sanitize')(obj.name || obj.username);
 
              if (url) {
-                return ` <a href=\"${url}\"> ${name} </a> `;
+                return ` <a href=\"${url}\">&nbsp;${name}&nbsp;</a> `;
              }
 
-             return ` <span> ${name} </span> `;
+             return ` <span>&nbsp;${name}&nbsp;</span> `;
          }
          catch(err){
              $log.debug(err);

awx/ui/client/src/configuration/forms/settings-form.partial.html

@@ -5,7 +5,7 @@
 </div>
 
 <div class="tab-pane" id="configuration-panel">
-    <div ng-cloak id="htmlTemplate" class="Panel">
+    <div ng-cloak id="htmlTemplate" class="card at-Panel">
         <div class="Form-header">
             <div class="Form-title Form-title--uppercase" translate>{{ vm.getCurrentFormTitle() }}</div>
         </div>

awx/ui/client/src/configuration/settings.block.less

@@ -79,6 +79,7 @@ label#filePickerButton {
     cursor: pointer;
     background-color: #fff;
     color: @default-interface-txt;
+    margin-bottom: 0;
 }
 input#filePickerText {
     cursor: default;
@@ -131,7 +132,7 @@ input#filePickerText {
     display: inline-block;
 
     // Filepicker and toggle disabling
-    .Form-filePicker--pickerButton, .Form-filePicker--textBox,
+    .Form-browseButton, .Form-filePicker--textBox,
     .ScheduleToggle {
         pointer-events: none;
         cursor: not-allowed;

awx/ui/client/src/credential-types/credential-types.list.js

@@ -22,8 +22,8 @@ export default ['i18n', function(i18n){
             name: {
                 key: true,
                 label: i18n._('Name'),
-                columnClass: 'col-md-3 col-sm-9 col-xs-9',
+                columnClass: 'col-md-4 col-sm-9 col-xs-9',
-                modalColumnClass: 'col-md-11',
+                modalColumnClass: 'col-sm-12',
                 awToolTip: '{{credential_type.description | sanitize}}',
                 dataPlacement: 'top'
             },
@@ -31,7 +31,7 @@ export default ['i18n', function(i18n){
                 label: i18n._('Kind'),
                 ngBind: 'credential_type.kind_label',
                 excludeModal: true,
-                columnClass: 'col-md-2 hidden-sm hidden-xs'
+                columnClass: 'd-none d-md-flex col-md-4'
             },
         },
 
@@ -48,7 +48,7 @@ export default ['i18n', function(i18n){
 
         fieldActions: {
 
-            columnClass: 'col-md-2 col-sm-3 col-xs-3',
+            columnClass: 'col-md-4 col-sm-3 col-xs-3',
 
             edit: {
                 ngClick: "editCredentialType(credential_type.id)",

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

@@ -456,19 +456,19 @@ export default ['i18n', function(i18n) {
                             key: true,
                             label: i18n._('User'),
                             linkBase: 'users',
-                            class: 'col-lg-3 col-md-3 col-sm-3 col-xs-4'
+                            columnClass: 'col-sm-3 col-xs-4'
                         },
                         role: {
                             label: i18n._('Role'),
                             type: 'role',
                             nosort: true,
-                            class: 'col-lg-4 col-md-4 col-sm-4 col-xs-4'
+                            columnClass: 'col-sm-4 col-xs-4'
                         },
                         team_roles: {
                             label: i18n._('Team Roles'),
                             type: 'team_roles',
                             nosort: true,
-                            class: 'col-lg-5 col-md-5 col-sm-5 col-xs-4'
+                            columnClass: 'col-sm-5 col-xs-4'
                         }
                     }
                 }

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

@@ -24,7 +24,7 @@ export default ['i18n', function(i18n) {
             name: {
                 key: true,
                 label: i18n._('Name'),
-                columnClass: 'col-md-3 col-sm-9 col-xs-9',
+                columnClass: 'col-md-4 col-sm-9 col-xs-9',
                 modalColumnClass: 'col-md-12',
                 awToolTip: '{{credential.description | sanitize}}',
                 dataPlacement: 'top'
@@ -34,14 +34,14 @@ export default ['i18n', function(i18n) {
                 ngBind: 'credential.kind',
                 excludeModal: true,
                 nosort: true,
-                columnClass: 'col-md-2 hidden-sm hidden-xs'
+                columnClass: 'd-none d-md-flex col-md-2'
             },
             owners: {
                 label: i18n._('Owners'),
                 type: 'owners',
                 nosort: true,
                 excludeModal: true,
-                columnClass: 'col-md-2 hidden-sm hidden-xs'
+                columnClass: 'd-none d-md-flex col-md-2 List-tableCell'
             }
         },
 
@@ -58,7 +58,7 @@ export default ['i18n', function(i18n) {
 
         fieldActions: {
 
-            columnClass: 'col-md-2 col-sm-3 col-xs-3',
+            columnClass: 'col-md-4 col-sm-3 col-xs-3',
 
             edit: {
                 ngClick: "editCredential(credential.id)",

awx/ui/client/src/credentials/factories/kind-change.factory.js

@@ -2,8 +2,7 @@ export default
     function KindChange(Empty, i18n) {
         return function(params) {
             var scope = params.scope,
-            reset = params.reset,
+            reset = params.reset;
-            collapse, id;
 
             $('.popover').each(function() {
                 // remove lingering popover <div>. Seems to be a bug in TB3 RC1
@@ -164,19 +163,6 @@ export default
                 scope.authorize = false;
                 scope.authorize_password = null;
             }
-
-            // Collapse or open help widget based on whether scm value is selected
-            collapse = $('#credential_kind').parent().find('.panel-collapse').first();
-            id = collapse.attr('id');
-            if (!Empty(scope.kind) && scope.kind.value !== '') {
-                if ($('#' + id + '-icon').hasClass('icon-minus')) {
-                    scope.accordionToggle('#' + id);
-                }
-            } else {
-                if ($('#' + id + '-icon').hasClass('icon-plus')) {
-                    scope.accordionToggle('#' + id);
-                }
-            }
         };
     }
 

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

@@ -60,9 +60,11 @@
 .DashboardCounts-label {
     flex: 1;
     margin-bottom: 0px;
+    margin-top: 0.625rem;
     color: @db-count-label;
     text-transform: uppercase;
     transition: color 0.2s;
+    font-size: 0.75rem;
 }
 
 @media only screen and (max-width: 710px) {

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

@@ -122,6 +122,10 @@
     border-color: @d7grey;
     min-width: 115px;
 
+    a:not([href]):not([tabindex]) {
+        color: @default-interface-txt;
+    }
+
     a > span {
         float: none;
     }
@@ -145,7 +149,6 @@
 
 .DashboardGraphs-statusFilters{
     padding-top: 5px;
-
 }
 
 .DashboardGraphs-statusFilter{

awx/ui/client/src/home/dashboard/lists/dashboard-list.block.less

@@ -52,11 +52,7 @@
 }
 
 .DashboardList-tableHeader--time {
-    width: 190px;
+    justify-content: flex-end;
-    padding-left:20px;
-    padding-right: 15px;
-    border-top-right-radius: 5px;
-    text-align: right;
 }
 
 .DashboardList-tableHeader--actions {
@@ -67,7 +63,7 @@
 }
 
 .DashboardList-status{
-    padding-right: 5px;
+    padding-right: 9px;
 }
 
 .DashboardList-status--success{
@@ -90,26 +86,10 @@
     content: "\f06a";
 }
 
-.DashboardList-nameCell {
-    padding-left: 15px;
-    width: 100%;
-    word-wrap: break-word;
-}
-
-.DashboardList-nameContainer {
-    color: @default-link;
-}
-
-.DashboardList-activityCell {
-    padding-right: 20px;
-    padding-left: 20px;
-}
-
 .DashboardList-timeCell {
     white-space: nowrap;
-    padding-right: 15px;
+    display: flex;
-    padding-left: 20px;
+    justify-content: flex-end;
-    text-align: right;
 }
 
 .DashboardList-nameContainer:hover {
@@ -117,28 +97,6 @@
     cursor: pointer;
 }
 
-.DashboardList-actionButtonCell {
-    padding-top:10px;
-    padding-right: 15px;
-    display:flex;
-    justify-content: flex-end;
-}
-
-.DashboardList-tableRow--evenRow > .DashboardList-actionButtonCell > .DashboardList-actionButton {
-    background-color: @list-actn-alt-bg;
-    border: 1px solid @list-actn-alt-bord;
-}
-
-.DashboardList-actionButton--launch {
-    margin-right: 10px;
-}
-
-.DashboardList-actionButton--edit:hover {
-    background-color: @default-link;
-    color: @default-bg;
-    border: 1px solid @default-link;
-}
-
 .DashboardList-noJobs {
     color: @list-empty-txt;
     margin-top: 20px;

awx/ui/client/src/home/dashboard/lists/job-templates/job-templates-list.partial.html

@@ -8,37 +8,40 @@
         </a>
     </div>
     <div class="DashboardList-container">
-        <table class="List-table">
+        <div class="List-table">
-           <tr class="List-tableHeaderRow">
+           <div class="List-tableHeaderRow">
-                <th class="List-tableHeader DashboardList-tableHeader--name">
+               <div class="d-flex">
-                        <translate>Name</translate>
+                   <div class="List-tableHeader col-sm-4">
-                </th>
+                       <translate>Name</translate>
-                <th class="List-tableHeader DashboardList-tableHeader--activity">
+                   </div>
-                  <translate>Activity</translate>
+                   <div class="List-tableHeader col-sm-5">
-                </th>
+                       <translate>Activity</translate>
-                <th class="List-tableHeader DashboardList-tableHeader--actions">
+                   </div>
-                  <translate>Actions</translate>
+                   <div class="List-tableHeader List-tableHeader--actions col-sm-3">
-                </th>
+                       <translate>Actions</translate>
-           </tr>
+                   </div>
-           <tr class="List-tableRow"
+               </div>
-                ng-repeat = "template in templates">
+           </div>
-              <td class="DashboardList-nameCell">
+           <div class="List-tableRow" ng-repeat="template in templates">
-                  <a ng-href="#/templates/{{template.type}}/{{template.id}}" class="DashboardList-nameContainer">
+               <div class="d-flex">
-                      {{ template.name }}
+                  <div class="List-tableCell col-sm-4">
-                  </a>
+                      <a ng-href="#/templates/{{template.type}}/{{template.id}}" class="DashboardList-nameContainer">
-              </td>
+                          {{ template.name }}
-              <td class="DashboardList-activityCell">
+                      </a>
-                  <aw-smart-status jobs="template.recent_jobs" template-type="template.type"></aw-smart-status>
-              </td>
-              <td class="List-actionsContainer">
-                  <div class="List-actionButtonCell">
-                      <at-launch-template template="template"
-                          ng-show="template.can_start">
-                      </at-launch-template>
                   </div>
-               </td>
+                  <div class="List-tableCell col-sm-5">
-           </tr>
+                      <aw-smart-status jobs="template.recent_jobs" template-type="template.type"></aw-smart-status>
-        </table>
+                  </div>
+                  <div class="col-sm-3 List-actionsContainer">
+                      <div class="List-actionButtonCell List-tableCell">
+                          <at-launch-template template="template"
+                              ng-show="template.can_start">
+                          </at-launch-template>
+                      </div>
+                   </div>
+               </div>
+           </div>
+       </div>
     </div>
 </div>
 <div class="DashboardList" ng-show="noJobTemplates">

awx/ui/client/src/home/dashboard/lists/jobs/jobs-list.partial.html

@@ -8,29 +8,36 @@
         </a>
     </div>
     <div class="DashboardList-container">
-        <table class="List-table">
+        <div class="List-table">
-           <tr>
+            <div class="List-tableHeaderRow">
-              <th class="List-tableHeader DashboardList-tableHeader--name" translate>Name</th>
+                <div class="d-flex">
-              <th class="List-tableHeader DashboardList-tableHeader--time" translate>Time</th>
+                    <div class="List-tableHeader col-6">
-           </tr>
+                        <translate>Name</translate>
-           <tr class="List-tableRow"
+                    </div>
-                ng-repeat = "job in jobs">
+                    <div class="List-tableHeader col-6 DashboardList-tableHeader--time">
-                <td class="DashboardList-nameCell">
+                        <translate>Time</translate>
-                    <a href="{{ job.detailsUrl }}" ng-if="isSuccessful(job.status)" aw-tool-tip="{{strings.get('list.STATUS_TOOLTIP', job.status)}}" aw-tip-placement="right" data-tip-watch="strings.get('list.STATUS_TOOLTIP', job.status)">
+                    </div>
-                        <i class="fa DashboardList-status DashboardList-status--success icon-job-successful"></i>
+                </div>
-                    </a>
+            </div>
-                    <a href="{{ job.detailsUrl }}" ng-if="!isSuccessful(job.status)" aw-tool-tip="{{strings.get('list.STATUS_TOOLTIP', job.status)}}" aw-tip-placement="right" data-tip-watch="strings.get('list.STATUS_TOOLTIP', job.status)">
+           <div class="List-tableRow" ng-repeat="job in jobs">
-                        <i class="fa DashboardList-status DashboardList-status--failed icon-job-failed"></i>
+               <div class="d-flex">
-                    </a>
+                    <div class="List-tableCell col-6">
-                    <a href="{{ job.detailsUrl }}" class="DashboardList-nameContainer">
+                        <a href="{{ job.detailsUrl }}" ng-if="isSuccessful(job.status)" aw-tool-tip="{{strings.get('list.STATUS_TOOLTIP', job.status)}}" aw-tip-placement="right" data-tip-watch="strings.get('list.STATUS_TOOLTIP', job.status)">
-                        {{ job.name }}
+                            <i class="fa DashboardList-status DashboardList-status--success icon-job-successful"></i>
-                    </a>
+                        </a>
-              </td>
+                        <a href="{{ job.detailsUrl }}" ng-if="!isSuccessful(job.status)" aw-tool-tip="{{strings.get('list.STATUS_TOOLTIP', job.status)}}" aw-tip-placement="right" data-tip-watch="strings.get('list.STATUS_TOOLTIP', job.status)">
-              <td class="DashboardList-timeCell">
+                            <i class="fa DashboardList-status DashboardList-status--failed icon-job-failed"></i>
-                  {{job.time}}
+                        </a>
-              </td>
+                        <a href="{{ job.detailsUrl }}" class="DashboardList-nameContainer">
-           </tr>
+                            {{ job.name }}
-        </table>
+                        </a>
+                  </div>
+                  <div class="List-tableCell col-6 DashboardList-timeCell">
+                      {{job.time}}
+                  </div>
+              </div>
+          </div>
+       </div>
     </div>
 </div>
 

awx/ui/client/src/instance-groups/instances/instance-modal.partial.html

@@ -1,6 +1,6 @@
 <div id="instance-modal" class="modal-dialog">
     <div class="modal-content">
-        <div class="row at-Panel-headingRow">
+        <div class="at-Panel-headingRow">
             <div class="col-xs-10">
                 <h3 class="at-Panel-headingTitle">{{ vm.panelTitle }} | {{ vm.instanceGroupName}}</h3>
             </div>

awx/ui/client/src/inventories-hosts/hosts/host.list.js

@@ -22,45 +22,53 @@ export default ['i18n', function(i18n) {
         basePath: 'hosts',
         title: false,
         actionHolderClass: 'List-actionHolder',
+        layoutClass: 'List-staticColumnLayout--hostsWithCheckbox',
+        staticColumns: [
+            {
+                field: 'toggleHost',
+                content: {
+                    ngDisabled: 'host.has_inventory_sources',
+                    label: '',
+                    columnClass: 'List-staticColumn--toggle',
+                    type: "toggle",
+                    ngClick: "toggleHost($event, host)",
+                    awToolTip: "<p>" +
+                        i18n._("Indicates if a host is available and should be included in running jobs.") +
+                        "</p><p>" +
+                        i18n._("For hosts that are part of an external" +
+                               " inventory, this flag cannot be changed. It will be" +
+                               " set by the inventory sync process.") +
+                        "</p>",
+                    dataPlacement: "right",
+                    nosort: true,
+                }
+            }, {
+                field: 'active_failures',
+                content: {
+                    label: '',
+                    iconOnly: true,
+                    nosort: true,
+                    // do not remove this ng-click directive
+                    // the list generator case to handle fields without ng-click
+                    // cannot handle the aw-* directives
+                    ngClick: 'noop()',
+                    awPopOver: "{{ host.job_status_html }}",
+                    dataTitle: "{{ host.job_status_title }}",
+                    awToolTip: "{{ host.badgeToolTip }}",
+                    dataPlacement: 'top',
+                    icon: "{{ 'fa icon-job-' + host.active_failures }}",
+                    id: 'active-failures-action',
+                    columnClass: 'status-column List-staticColumn--smallStatus'
+                }
+            }
+        ],
 
         fields: {
-            toggleHost: {
-                ngDisabled: 'host.has_inventory_sources',
-                label: '',
-                columnClass: 'List-staticColumn--toggle',
-                type: "toggle",
-                ngClick: "toggleHost($event, host)",
-                awToolTip: "<p>" +
-                    i18n._("Indicates if a host is available and should be included in running jobs.") +
-                    "</p><p>" +
-                    i18n._("For hosts that are part of an external" +
-                           " inventory, this flag cannot be changed. It will be" +
-                           " set by the inventory sync process.") +
-                    "</p>",
-                dataPlacement: "right",
-                nosort: true,
-            },
-            active_failures: {
-                label: '',
-                iconOnly: true,
-                nosort: true,
-                // do not remove this ng-click directive
-                // the list generator case to handle fields without ng-click
-                // cannot handle the aw-* directives
-                ngClick: 'noop()',
-                awPopOver: "{{ host.job_status_html }}",
-                dataTitle: "{{ host.job_status_title }}",
-                awToolTip: "{{ host.badgeToolTip }}",
-                dataPlacement: 'top',
-                icon: "{{ 'fa icon-job-' + host.active_failures }}",
-                id: 'active-failures-action',
-                columnClass: 'status-column List-staticColumn--smallStatus'
-            },
             name: {
                 key: true,
                 label: i18n._('Name'),
                 ngClick: "editHost(host.id)",
-                columnClass: 'col-lg-6 col-md-8 col-sm-8 col-xs-7',
+                columnClass: 'col-sm-4',
                 dataHostId: "{{ host.id }}",
                 dataType: "host",
                 class: 'InventoryManage-breakWord'
@@ -69,14 +77,14 @@ export default ['i18n', function(i18n) {
                 label: i18n._('Inventory'),
                 sourceModel: 'inventory',
                 sourceField: 'name',
-                columnClass: 'col-lg-5 col-md-4 col-sm-4 hidden-xs elllipsis',
+                columnClass: 'd-none d-sm-flex col-sm-4 elllipsis',
                 ngClick: "editInventory(host)"
             }
         },
 
         fieldActions: {
 
-            columnClass: 'col-lg-6 col-md-4 col-sm-4 col-xs-5 text-right',
+            columnClass: 'col-sm-4 col-xs-5 text-right',
             edit: {
                 ngClick: "editHost(host.id)",
                 icon: 'icon-edit',

awx/ui/client/src/inventories-hosts/hosts/hosts.partial.html

@@ -1,7 +1,7 @@
 <div class="tab-pane" id="hosts-panel">
     <aw-limit-panels max-panels="2" panel-container="hosts-panel"></aw-limit-panels>
     <div ui-view="form"></div>
-    <div class="Panel">
+    <div class="card at-Panel">
         <div class="row Form-tabRow">
             <div class="col-lg-12">
                 <div class="Form-tabHolder">
@@ -29,7 +29,7 @@
                     default-params="host_default_params"
                     query-set="host_queryset"
                     search-tags="searchTags">
-                </smart-search>  
+                </smart-search>
             </div>
 
             <div class="row" ng-show="hosts.length === 0 && !(searchTags | isEmpty)">
@@ -37,56 +37,59 @@
             </div>
             <div class="List-noItems" ng-show="hosts.length === 0 && (searchTags | isEmpty)" translate>NO HOSTS HAVE BEEN CREATED</div>
             <div class="list-table-container" ng-show="hosts.length > 0">
-                <table id="hosts_table" class="List-table table-no-border" is-extended="false">
+                <div id="hosts_table" class="List-table table-no-border">
-                    <thead>
+                    <div class="List-staticColumnLayout--hosts List-tableHeaderRow">
-                        <tr class="List-tableHeaderRow">
+                        <div></div>
-                            <th base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="toggleHost" column-iterator="host" column-no-sort="true" column-label="" column-custom-class="List-staticColumn--toggle" query-set="host_queryset"></th>
+                        <div></div>
-                            <th base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="active_failures" column-iterator="host" column-no-sort="true" column-label="" column-custom-class="status-column List-staticColumn--smallStatus" query-set="host_queryset"></th>
+                        <div></div>
-                            <th base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="name" column-iterator="host" column-no-sort="undefined" column-label="Name" column-custom-class="col-lg-6 col-md-8 col-sm-8 col-xs-7" query-set="host_queryset"></th>
+                        <div class="d-flex h-100">
-                            <th base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="inventory" column-iterator="host" column-no-sort="undefined" column-label="Inventory" column-custom-class="col-lg-5 col-md-4 col-sm-4 hidden-xs elllipsis" query-set="host_queryset"></th>
+                            <div class="List-tableHeader" base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="name" column-iterator="host" column-no-sort="undefined" column-label="Name" column-custom-class="col-lg-4" query-set="host_queryset"></div>
-                            <th class="List-tableHeader List-tableHeader--actions actions-column col-lg-6 col-md-4 col-sm-4 col-xs-5 text-right" translate>Actions</th>
+                            <div class="List-tableHeader" base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="inventory" column-iterator="host" column-no-sort="undefined" column-label="Inventory" column-custom-class="d-none d-sm-flex col-sm-4 ellipsis" query-set="host_queryset"></div>
-                        </tr>
+                            <div class="List-tableHeader List-tableHeader--actions actions-column col-lg-4 text-right" translate>Actions</div>
-                    </thead>
+                        </div>
-                    <tbody>
+                    </div>
-                        <tr ng-class="{'List-tableRow--selected': $stateParams['host_id'] == host.id}" id="{{ host.id }}" class="List-tableRow host_class" ng-repeat="host in hosts track by host.id">
+                    <div class="List-staticColumnLayout--hosts List-tableRow" ng-repeat="host in hosts track by host.id">
-                            <td class="List-tableCell toggleHost-column List-staticColumn--toggle">
+                            <div></div>
+                            <div class="List-tableCell toggleHost-column List-staticColumn--toggle">
                                 <div class="ScheduleToggle" ng-class="{'is-on': host.enabled, 'ScheduleToggle--disabled': host.has_inventory_sources}" aw-tool-tip="{{strings.get('hostList.DISABLED_TOGGLE_TOOLTIP')}}" data-placement="right" data-tip-watch="undefined">
                                     <button ng-disabled="host.has_inventory_sources" ng-show="host.enabled" class="ScheduleToggle-switch is-on" ng-click="toggleHost($event, host)" translate>ON</button>
                                     <button ng-disabled="host.has_inventory_sources" ng-show="!host.enabled" class="ScheduleToggle-switch" ng-click="toggleHost($event, host)" translate>OFF</button>
                                 </div>
-                            </td>
+                            </div>
-                            <td class="List-tableCell active_failures-column status-column List-staticColumn--smallStatus">
+                            <div class="List-tableCell active_failures-column status-column List-staticColumn--smallStatus">
                                 <div class="host-name">
                                     <a href="" ng-click="noop()" aw-tool-tip="{{ host.badgeToolTip }}" aw-pop-over="{{ host.job_status_html }}" data-placement="top" over-title="{{ host.job_status_title }}">
                                         <i class="fa {{ 'fa icon-job-' + host.active_failures }}"></i>
                                     </a>
                                 </div>
-                            </td>
+                            </div>
-                            <td class="List-tableCell name-column InventoryManage-breakWord col-lg-6 col-md-8 col-sm-8 col-xs-7">
+                            <div class="d-flex h-100">
-                                <div class="host-name">
+                                <div class="List-tableCell name-column InventoryManage-breakWord col-lg-4">
-                                    <a ui-sref="hosts.edit({host_id:host.id})">{{host.name }}</a>
+                                    <div class="host-name">
+                                        <a ui-sref="hosts.edit({host_id:host.id})">{{host.name }}</a>
+                                    </div>
                                 </div>
-                            </td>
+                                <div class="List-tableCell inventory_name-column col-lg-4 elllipsis">
-                            <td class="List-tableCell inventory_name-column col-lg-5 col-md-4 col-sm-4 hidden-xs elllipsis">
+                                    <div class="host-name">
-                                <div class="host-name">
+                                        <a href="#/inventories/inventory/{{host.inventory}}">{{host.inventory_name}}</a>
-                                    <a href="#/inventories/inventory/{{host.inventory}}">{{host.inventory_name}}</a>
+                                    </div>
                                 </div>
-                            </td>
+                                <div class="List-actionsContainer col-lg-4">
-                            <td class="List-actionsContainer">
+                                    <div class="List-actionButtonCell List-tableCell">
-                                <div class="List-actionButtonCell List-tableCell">
+                                        <button id="insights-action" class="List-actionButton " ng-class="{'List-actionButton--selected' : $stateParams['host_id'] == host.id && $state.is('hosts.edit.insights')}" data-placement="top" ng-click="goToInsights(host.id)" aw-tool-tip="{{strings.get('inventory.VIEW_INSIGHTS')}}" data-tip-watch="strings.get('inventory.VIEW_INSIGHTS')" ng-show="host.insights_system_id && host.summary_fields.inventory.hasOwnProperty('insights_credential_id')">
-                                    <button id="insights-action" class="List-actionButton " ng-class="{'List-actionButton--selected' : $stateParams['host_id'] == host.id && $state.is('hosts.edit.insights')}" data-placement="top" ng-click="goToInsights(host.id)" aw-tool-tip="{{strings.get('inventory.VIEW_INSIGHTS')}}" data-tip-watch="strings.get('inventory.VIEW_INSIGHTS')" ng-show="host.insights_system_id && host.summary_fields.inventory.hasOwnProperty('insights_credential_id')">
+                                            <i class="fa fa-info"></i>
-                                        <i class="fa fa-info"></i>
+                                        </button>
-                                    </button>
+                                        <button id="edit-action" class="List-actionButton " ng-class="{'List-editButton--selected' : $stateParams['host_id'] == host.id && $state.is('hosts.edit') }" data-placement="top" ng-click="editHost(host.id)" aw-tool-tip="{{strings.get('inventory.EDIT_HOST')}}"   data-tip-watch="strings.get('inventory.VIEW_HOST')" ng-show="host.summary_fields.user_capabilities.edit">
-                                    <button id="edit-action" class="List-actionButton " ng-class="{'List-editButton--selected' : $stateParams['host_id'] == host.id && $state.is('hosts.edit') }" data-placement="top" ng-click="editHost(host.id)" aw-tool-tip="{{strings.get('inventory.EDIT_HOST')}}"   data-tip-watch="strings.get('inventory.VIEW_HOST')" ng-show="host.summary_fields.user_capabilities.edit">
+                                            <i class="fa fa-pencil"></i>
-                                        <i class="fa fa-pencil"></i>
+                                        </button>
-                                    </button>
+                                        <button id="view-action" class="List-actionButton " data-placement="top" ng-click="editHost(host.id)" aw-tool-tip="{{strings.get('inventory.VIEW_HOST')}}" data-tip-watch="strings.get('inventory.VIEW_HOST')" ng-show="!host.summary_fields.user_capabilities.edit"><i class="fa fa-search-plus"></i>
-                                    <button id="view-action" class="List-actionButton " data-placement="top" ng-click="editHost(host.id)" aw-tool-tip="{{strings.get('inventory.VIEW_HOST')}}" data-tip-watch="strings.get('inventory.VIEW_HOST')" ng-show="!host.summary_fields.user_capabilities.edit"><i class="fa fa-search-plus"></i>
+                                        </button>
-                                    </button>
+                                    </div>
                                 </div>
-                            </td>
+                            </div>
-                        </tr>
+                        </div>
-                    </tbody>
+                    </div>
-                </table>
+                </div>
             </div><!-- table container -->
             <paginate
                 base-path="hosts"

awx/ui/client/src/inventories-hosts/hosts/related/groups/hosts-related-groups.list.js

@@ -15,18 +15,24 @@ export default ['i18n', function(i18n) {
         hover: true,
         trackBy: 'group.id',
         basePath:  'api/v2/hosts/{{$stateParams.host_id}}/groups/',
+        layoutClass: 'List-staticColumnLayout--groups',
+        staticColumns: [
+            {
+                field: 'failed_hosts',
+                content: {
+                    label: '',
+                    nosort: true,
+                    mode: 'all',
+                    iconOnly: true,
+                    awToolTip: "{{ group.hosts_status_tip }}",
+                    dataPlacement: "top",
+                    icon: "{{ 'fa icon-job-' + group.hosts_status_class }}",
+                    columnClass: 'status-column'
+                }
+            }
+        ],
 
         fields: {
-            failed_hosts: {
-                label: '',
-                nosort: true,
-                mode: 'all',
-                iconOnly: true,
-                awToolTip: "{{ group.hosts_status_tip }}",
-                dataPlacement: "top",
-                icon: "{{ 'fa icon-job-' + group.hosts_status_class }}",
-                columnClass: 'status-column List-staticColumn--smallStatus'
-            },
             name: {
                 label: i18n._('Groups'),
                 key: true,

awx/ui/client/src/inventories-hosts/inventories/inventories.block.less

@@ -1,5 +1,5 @@
 .Inventories-hostStatus {
-    margin-left: 5px;
+    margin-left: 10px;
 }
 #inventories-panel {
     .completed_jobsList.List-well {
@@ -9,4 +9,4 @@
             margin: 0;
         }
     }
-}
+}

awx/ui/client/src/inventories-hosts/inventories/inventories.partial.html

@@ -7,7 +7,7 @@
     <div ui-view="groupForm"></div>
     <div ui-view="sourcesForm"></div>
     <div ui-view="form"></div>
-    <div ng-cloak id="htmlTemplate" class="Panel">
+    <div ng-cloak id="htmlTemplate" class="card at-Panel">
         <div class="row Form-tabRow">
             <div class="col-lg-12">
                 <div class="Form-tabHolder">

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

@@ -20,33 +20,37 @@ export default ['i18n', function(i18n) {
         title: false,
         disableRow: "{{ inventory.pending_deletion }}",
         disableRowValue: 'inventory.pending_deletion',
+        layoutClass: 'List-staticColumnLayout--toggleOnOff',
+        staticColumns: [
+            {
+                field: 'status',
+                content: {
+                    label: '',
+                    nosort: true,
+                    ngClick: "null",
+                    iconOnly: true,
+                    excludeModal: true,
+                    template: `<source-summary-popover inventory="inventory" ng-hide="inventory.pending_deletion" ng-if="inventory.kind === ''"></source-summary-popover><host-summary-popover inventory="inventory" ng-hide="inventory.pending_deletion" ng-class="{'HostSummaryPopover-noSourceSummary': inventory.kind !== ''}"></host-summary-popover>`,
+                    icons: [{
+                        icon: "{{ 'icon-cloud-' + inventory.syncStatus }}",
+                        awToolTip: "{{ inventory.syncTip }}",
+                        awTipPlacement: "right",
+                        ngClick: "showSourceSummary($event, inventory.id)",
+                        ngClass: "inventory.launch_class"
+                    },{
+                        icon: "{{ 'icon-job-' + inventory.hostsStatus }}",
+                        awToolTip: false,
+                        ngClick: "showHostSummary($event, inventory.id)"
+                    }]
+                }
+            }
+        ],
 
         fields: {
-            status: {
-                label: '',
-                columnClass: 'List-staticColumn--mediumStatus',
-                nosort: true,
-                ngClick: "null",
-                iconOnly: true,
-                excludeModal: true,
-                template: `<source-summary-popover inventory="inventory" ng-hide="inventory.pending_deletion" ng-if="inventory.kind === ''"></source-summary-popover><host-summary-popover inventory="inventory" ng-hide="inventory.pending_deletion" ng-class="{'HostSummaryPopover-noSourceSummary': inventory.kind !== ''}"></host-summary-popover>`,
-                icons: [{
-                    icon: "{{ 'icon-cloud-' + inventory.syncStatus }}",
-                    awToolTip: "{{ inventory.syncTip }}",
-                    awTipPlacement: "right",
-                    ngClick: "showSourceSummary($event, inventory.id)",
-                    ngClass: "inventory.launch_class"
-                },{
-                    icon: "{{ 'icon-job-' + inventory.hostsStatus }}",
-                    awToolTip: false,
-                    ngClick: "showHostSummary($event, inventory.id)",
-                    ngClass: "inventory.host_status_class"
-                }]
-            },
             name: {
                 key: true,
                 label: i18n._('Name'),
-                columnClass: 'col-md-4 col-sm-3 col-xs-6 List-staticColumnAdjacent',
+                columnClass: 'col-md-4 col-sm-4 col-xs-8',
                 modalColumnClass: 'col-md-12',
                 awToolTip: "{{ inventory.description | sanitize }}",
                 awTipPlacement: "top",
@@ -55,7 +59,7 @@ export default ['i18n', function(i18n) {
             kind: {
                 label: i18n._('Type'),
                 ngBind: 'inventory.kind_label',
-                columnClass: 'col-md-2 col-sm-2 hidden-xs'
+                columnClass: 'd-none d-sm-flex col-sm-2'
             },
             organization: {
                 label: i18n._('Organization'),
@@ -64,7 +68,7 @@ export default ['i18n', function(i18n) {
                 sourceModel: 'organization',
                 sourceField: 'name',
                 excludeModal: true,
-                columnClass: 'col-md-3 col-sm-2 hidden-xs'
+                columnClass: 'd-none d-sm-flex col-md-3 col-sm-2'
             }
         },
 
@@ -93,7 +97,7 @@ export default ['i18n', function(i18n) {
         },
 
         fieldActions: {
-            columnClass: 'col-md-2 col-sm-3 col-xs-4',
+            columnClass: 'col-md-3 col-sm-4 col-xs-4',
             edit: {
                 label: i18n._('Edit'),
                 ngClick: 'editInventory(inventory)',

awx/ui/client/src/inventories-hosts/inventories/list/host-summary-popover/host-summary-popover.block.less

@@ -1,3 +1,3 @@
 .HostSummaryPopover-noSourceSummary {
-    margin-left: 19px;
+    margin-left: 15px;
 }

awx/ui/client/src/inventories-hosts/inventories/list/host-summary-popover/host-summary-popover.partial.html

@@ -1,3 +1,3 @@
-<a href="" ng-click="showHostSummary($event, inventory.id)"  ng-class="inventory.host_status_class" >
+<a href="" ng-click="showHostSummary($event, inventory.id)"  class="Inventories-hostStatus">
     <i class="fa {{ 'icon-job-' + inventory.hostsStatus }}"></i>
-</a> 
+</a>

awx/ui/client/src/inventories-hosts/inventories/list/inventory-list.controller.js

@@ -38,7 +38,6 @@ function InventoriesList($scope,
 
     function processInventoryRow(inventory) {
         inventory.launch_class = "";
-        inventory.host_status_class = "Inventories-hostStatus";
 
         if (inventory.has_inventory_sources) {
             inventory.copyTip = i18n._('Inventories with sources cannot be copied');

awx/ui/client/src/inventories-hosts/inventories/related/groups/groups.list.js

@@ -16,18 +16,24 @@
         multiSelect: true,
         trackBy: 'group.id',
         basePath:  'api/v2/inventories/{{$stateParams.inventory_id}}/groups/',
+        layoutClass: 'List-staticColumnLayout--groups',
+        staticColumns: [
+            {
+                field: 'failed_hosts',
+                content: {
+                    label: '',
+                    nosort: true,
+                    mode: 'all',
+                    iconOnly: true,
+                    awToolTip: "{{ group.hosts_status_tip }}",
+                    dataPlacement: "top",
+                    icon: "{{ 'fa icon-job-' + group.hosts_status_class }}",
+                    columnClass: 'status-column'
+                }
+            }
+        ],
 
         fields: {
-            failed_hosts: {
-                label: '',
-                nosort: true,
-                mode: 'all',
-                iconOnly: true,
-                awToolTip: "{{ group.hosts_status_tip }}",
-                dataPlacement: "top",
-                icon: "{{ 'fa icon-job-' + group.hosts_status_class }}",
-                columnClass: 'status-column List-staticColumn--smallStatus'
-            },
             name: {
                 label: i18n._('Groups'),
                 key: true,

awx/ui/client/src/inventories-hosts/inventories/related/groups/related/nested-groups/group-nested-groups.list.js

@@ -16,18 +16,24 @@
         multiSelect: true,
         trackBy: 'nested_group.id',
         basePath:  'api/v2/groups/{{$stateParams.group_id}}/children/',
+        layoutClass: 'List-staticColumnLayout--groups',
+        staticColumns: [
+            {
+                field: 'failed_hosts',
+                content: {
+                    label: '',
+                    nosort: true,
+                    mode: 'all',
+                    iconOnly: true,
+                    awToolTip: "{{ nested_group.hosts_status_tip }}",
+                    dataPlacement: "top",
+                    icon: "{{ 'fa icon-job-' + nested_group.hosts_status_class }}",
+                    columnClass: 'status-column'
+                }
+            }
+        ],
 
         fields: {
-            failed_hosts: {
-                label: '',
-                nosort: true,
-                mode: 'all',
-                iconOnly: true,
-                awToolTip: "{{ nested_group.hosts_status_tip }}",
-                dataPlacement: "top",
-                icon: "{{ 'fa icon-job-' + nested_group.hosts_status_class }}",
-                columnClass: 'status-column List-staticColumn--smallStatus'
-            },
             name: {
                 label: i18n._('Groups'),
                 key: true,

awx/ui/client/src/inventories-hosts/inventories/related/groups/related/nested-hosts/group-nested-hosts.list.js

@@ -18,40 +18,49 @@ export default ['i18n', function(i18n) {
         multiSelect: true,
         trackBy: 'nested_host.id',
         basePath:  'api/v2/groups/{{$stateParams.group_id}}/all_hosts/',
+        layoutClass: 'List-staticColumnLayout--hostsWithCheckbox',
+        staticColumns: [
+            {
+                field: 'toggleHost',
+                content: {
+                    ngDisabled: '!nested_host.summary_fields.user_capabilities.edit || nested_host.has_inventory_sources',
+                    label: '',
+                    columnClass: 'List-staticColumn--toggle',
+                    type: "toggle",
+                    ngClick: "toggleHost($event, nested_host)",
+                    awToolTip: "<p>" +
+                        i18n._("Indicates if a host is available and should be included in running jobs.") +
+                        "</p><p>" +
+                        i18n._("For hosts that are part of an external" +
+                               " inventory, this flag cannot be changed. It will be" +
+                               " set by the inventory sync process.") +
+                        "</p>",
+                    dataPlacement: "right",
+                    nosort: true,
+                }
+            },
+            {
+                field: 'active_failures',
+                content: {
+                    label: '',
+                    iconOnly: true,
+                    nosort: true,
+                    // do not remove this ng-click directive
+                    // the list generator case to handle fields without ng-click
+                    // cannot handle the aw-* directives
+                    ngClick: 'noop()',
+                    awPopOver: "{{ nested_host.job_status_html }}",
+                    dataTitle: "{{ nested_host.job_status_title }}",
+                    awToolTip: "{{ nested_host.badgeToolTip }}",
+                    dataPlacement: 'top',
+                    icon: "{{ 'fa icon-job-' + nested_host.active_failures }}",
+                    id: 'active-failures-action',
+                    columnClass: 'status-column List-staticColumn--smallStatus'
+                }
+            }
+        ],
 
         fields: {
-            toggleHost: {
-                ngDisabled: '!nested_host.summary_fields.user_capabilities.edit || nested_host.has_inventory_sources',
-                label: '',
-                columnClass: 'List-staticColumn--toggle',
-                type: "toggle",
-                ngClick: "toggleHost($event, nested_host)",
-                awToolTip: "<p>" +
-                    i18n._("Indicates if a host is available and should be included in running jobs.") +
-                    "</p><p>" +
-                    i18n._("For hosts that are part of an external" +
-                           " inventory, this flag cannot be changed. It will be" +
-                           " set by the inventory sync process.") +
-                    "</p>",
-                dataPlacement: "right",
-                nosort: true,
-            },
-            active_failures: {
-                label: '',
-                iconOnly: true,
-                nosort: true,
-                // do not remove this ng-click directive
-                // the list generator case to handle fields without ng-click
-                // cannot handle the aw-* directives
-                ngClick: 'noop()',
-                awPopOver: "{{ nested_host.job_status_html }}",
-                dataTitle: "{{ nested_host.job_status_title }}",
-                awToolTip: "{{ nested_host.badgeToolTip }}",
-                dataPlacement: 'top',
-                icon: "{{ 'fa icon-job-' + nested_host.active_failures }}",
-                id: 'active-failures-action',
-                columnClass: 'status-column List-staticColumn--smallStatus'
-            },
             name: {
                 key: true,
                 label: i18n._('Hosts'),

awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-groups-labels/relatedGroupsLabelsList.block.less

@@ -1,3 +1,5 @@
 .RelatedGroupsLabelsCell{
     width:100%;
+    display: flex;
+    align-items: center;
 }

awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.form.js

@@ -37,6 +37,7 @@ function(i18n) {
                                " set by the inventory sync process.") +
                         "</p>",
                     dataTitle: i18n._('Host Enabled'),
+                    dataPlacement: "right",
                     ngDisabled: '!host.summary_fields.user_capabilities.edit || host.has_inventory_sources || isSmartInvHost'
                 }
             },

awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.list.js

@@ -17,46 +17,54 @@ export default ['i18n', function(i18n) {
         multiSelect: true,
         trackBy: 'host.id',
         basePath:  'api/v2/inventories/{{$stateParams.inventory_id}}/hosts/',
+        layoutClass: 'List-staticColumnLayout--hostsWithCheckbox',
+        staticColumns: [
+            {
+                field: 'toggleHost',
+                content: {
+                    ngDisabled: '!host.summary_fields.user_capabilities.edit || host.has_inventory_sources',
+                    label: '',
+                    type: "toggle",
+                    ngClick: "toggleHost($event, host)",
+                    awToolTip: "<p>" +
+                        i18n._("Indicates if a host is available and should be included in running jobs.") +
+                        "</p><p>" +
+                        i18n._("For hosts that are part of an external" +
+                               " inventory, this flag cannot be changed. It will be" +
+                               " set by the inventory sync process.") +
+                        "</p>",
+                    dataPlacement: "right",
+                    nosort: true,
+                }
+            },
+            {
+                field: 'active_failures',
+                content: {
+                    label: '',
+                    iconOnly: true,
+                    nosort: true,
+                    // do not remove this ng-click directive
+                    // the list generator case to handle fields without ng-click
+                    // cannot handle the aw-* directives
+                    ngClick: 'noop()',
+                    awPopOver: "{{ host.job_status_html }}",
+                    dataTitle: "{{ host.job_status_title }}",
+                    awToolTip: "{{ host.badgeToolTip }}",
+                    dataPlacement: 'top',
+                    icon: "{{ 'fa icon-job-' + host.active_failures }}",
+                    id: 'active-failures-action',
+                    columnClass: 'status-column'
+                }
+            }
+        ],
 
         fields: {
-            toggleHost: {
-                ngDisabled: '!host.summary_fields.user_capabilities.edit || host.has_inventory_sources',
-                label: '',
-                columnClass: 'List-staticColumn--toggle',
-                type: "toggle",
-                ngClick: "toggleHost($event, host)",
-                awToolTip: "<p>" +
-                    i18n._("Indicates if a host is available and should be included in running jobs.") +
-                    "</p><p>" +
-                    i18n._("For hosts that are part of an external" +
-                           " inventory, this flag cannot be changed. It will be" +
-                           " set by the inventory sync process.") +
-                    "</p>",
-                dataPlacement: "right",
-                nosort: true,
-            },
-            active_failures: {
-                label: '',
-                iconOnly: true,
-                nosort: true,
-                // do not remove this ng-click directive
-                // the list generator case to handle fields without ng-click
-                // cannot handle the aw-* directives
-                ngClick: 'noop()',
-                awPopOver: "{{ host.job_status_html }}",
-                dataTitle: "{{ host.job_status_title }}",
-                awToolTip: "{{ host.badgeToolTip }}",
-                dataPlacement: 'top',
-                icon: "{{ 'fa icon-job-' + host.active_failures }}",
-                id: 'active-failures-action',
-                columnClass: 'status-column List-staticColumn--smallStatus'
-            },
             name: {
                 key: true,
                 label: i18n._('Hosts'),
                 uiSref: ".edit({inventory_id: host.inventory_id,host_id: host.id})",
                 ngClass: "{ 'host-disabled-label': !host.enabled }",
-                columnClass: 'col-lg-6 col-md-8 col-sm-8 col-xs-7',
+                columnClass: 'col-lg-3 col-md-4 col-sm-8 col-xs-7',
                 dataHostId: "{{ host.id }}",
                 dataType: "host",
                 class: 'InventoryManage-breakWord'
@@ -66,13 +74,13 @@ export default ['i18n', function(i18n) {
                 type: 'related_groups',
                 nosort: true,
                 showDelete: true,
-                columnClass: 'RelatedGroupsLabelsCell List-tableCell col-lg-2 col-md-3 hidden-sm hidden-xs'
+                columnClass: 'd-none d-md-flex List-tableCell col-lg-5 col-md-4'
             }
         },
 
         fieldActions: {
 
-            columnClass: 'col-lg-6 col-md-4 col-sm-4 col-xs-5 text-right',
+            columnClass: 'col-sm-4 col-xs-5 text-right',
             edit: {
                 ngClick: "editHost(host)",
                 icon: 'icon-edit',

awx/ui/client/src/inventories-hosts/inventories/related/hosts/related/nested-groups/host-nested-groups.list.js

@@ -16,18 +16,24 @@
         multiSelect: true,
         trackBy: 'nested_group.id',
         basePath: 'api/v2/hosts/{{$stateParams.host_id}}/all_groups/',
+        layoutClass: 'List-staticColumnLayout--groups',
+        staticColumns: [
+            {
+                field: 'failed_hosts',
+                content: {
+                    label: '',
+                    nosort: true,
+                    mode: 'all',
+                    iconOnly: true,
+                    awToolTip: "{{ nested_group.hosts_status_tip }}",
+                    dataPlacement: "top",
+                    icon: "{{ 'fa icon-job-' + nested_group.hosts_status_class }}",
+                    columnClass: 'status-column'
+                }
+            }
+        ],
 
         fields: {
-            failed_hosts: {
-                label: '',
-                nosort: true,
-                mode: 'all',
-                iconOnly: true,
-                awToolTip: "{{ nested_group.hosts_status_tip }}",
-                dataPlacement: "top",
-                icon: "{{ 'fa icon-job-' + nested_group.hosts_status_class }}",
-                columnClass: 'status-column List-staticColumn--smallStatus'
-            },
             name: {
                 label: i18n._('Groups'),
                 key: true,

awx/ui/client/src/inventories-hosts/inventories/related/sources/sources.form.js

@@ -345,7 +345,6 @@ return {
             label: i18n._('Update Options'),
             type: 'checkbox_group',
             ngShow: "source && (source.value !== '' && source.value !== null)",
-            class: 'Form-checkbox--stacked',
             subForm: 'sourceSubForm',
             fields: [{
                 name: 'overwrite',
@@ -357,7 +356,6 @@ return {
                 dataTitle: i18n._('Overwrite'),
                 dataContainer: 'body',
                 dataPlacement: 'right',
-                labelClass: 'checkbox-options',
                 ngDisabled: "(!(inventory_source_obj.summary_fields.user_capabilities.edit || canAdd))"
             }, {
                 name: 'overwrite_vars',
@@ -369,7 +367,6 @@ return {
                 dataTitle: i18n._('Overwrite Variables'),
                 dataContainer: 'body',
                 dataPlacement: 'right',
-                labelClass: 'checkbox-options',
                 ngDisabled: "(!(inventory_source_obj.summary_fields.user_capabilities.edit || canAdd) || source.value === 'scm')"
             }, {
                 name: 'update_on_launch',
@@ -381,7 +378,6 @@ return {
                 dataTitle: i18n._('Update on Launch'),
                 dataContainer: 'body',
                 dataPlacement: 'right',
-                labelClass: 'checkbox-options',
                 ngDisabled: '!(inventory_source_obj.summary_fields.user_capabilities.edit || canAdd)'
             }, {
                 name: 'update_on_project_update',
@@ -394,7 +390,6 @@ return {
                 dataTitle: i18n._('Update on Project Update'),
                 dataContainer: 'body',
                 dataPlacement: 'right',
-                labelClass: 'checkbox-options',
                 ngDisabled: '!(inventory_source_obj.summary_fields.user_capabilities.edit || canAdd)'
             }]
         },

awx/ui/client/src/inventories-hosts/inventories/related/sources/sources.list.js

@@ -15,21 +15,26 @@
         hover: true,
         trackBy: 'inventory_source.id',
         basePath:  'api/v2/inventories/{{$stateParams.inventory_id}}/inventory_sources/',
+        layoutClass: 'List-staticColumnLayout--statusOrCheckbox',
+        staticColumns: [
+            {
+                field: 'sync_status',
+                content: {
+                    label: '',
+                    nosort: true,
+                    mode: 'all',
+                    iconOnly: true,
+                    ngClick: 'viewUpdateStatus(inventory_source.id)',
+                    awToolTip: "{{ inventory_source.status_tooltip }}",
+                    dataTipWatch: "inventory_source.status_tooltip",
+                    icon: "{{ 'fa icon-cloud-' + inventory_source.status_class }}",
+                    ngClass: "inventory_source.status_class",
+                    dataPlacement: "top",
+                }
+            }
+        ],
 
         fields: {
-            sync_status: {
-                label: '',
-                nosort: true,
-                mode: 'all',
-                iconOnly: true,
-                ngClick: 'viewUpdateStatus(inventory_source.id)',
-                awToolTip: "{{ inventory_source.status_tooltip }}",
-                dataTipWatch: "inventory_source.status_tooltip",
-                icon: "{{ 'fa icon-cloud-' + inventory_source.status_class }}",
-                ngClass: "inventory_source.status_class",
-                dataPlacement: "top",
-                columnClass: 'status-column List-staticColumn--smallStatus'
-            },
             name: {
                 label: i18n._('Sources'),
                 key: true,

awx/ui/client/src/inventories-hosts/inventories/smart-inventory/smart-inventory-host-filter/host-filter-modal/host-filter-modal.directive.js

@@ -45,15 +45,18 @@ export default ['templateUrl', function(templateUrl) {
                         $scope.hosts = $scope.host_dataset.results;
 
                         let hostList = _.cloneDeep(HostsList);
+                        delete hostList.staticColumns;
                         delete hostList.fields.toggleHost;
                         delete hostList.fields.active_failures;
                         delete hostList.fields.name.ngClick;
-                        hostList.fields.name.class += " HostFilterModal-tableRow";
+                        hostList.fields.name.columnClass = 'col-sm-6';
                         hostList.fields.name.noLink = true;
                         hostList.well = false;
                         delete hostList.fields.inventory.ngClick;
+                        hostList.fields.inventory.columnClass = 'col-sm-6';
                         hostList.fields.inventory.ngBind = 'host.summary_fields.inventory.name';
                         hostList.emptyListText = 'You must have access to at least one host in order to create a smart inventory host filter';
+                        hostList.layoutClass = 'List-defaultLayout';
                         let html = GenerateList.build({
                             list: hostList,
                             input_type: 'host-filter-modal-body',

awx/ui/client/src/inventories-hosts/inventories/smart-inventory/smart-inventory-host-filter/host-filter-modal/host-filter-modal.partial.html

@@ -13,7 +13,7 @@
             </div>
             <div class="modal-body" id="host-filter-modal-body"></div>
             <div class="modal-footer">
-                <button type="button" ng-click="cancelForm()" class="Lookup-cancel btn btn-default" translate>CANCEL</button>
+                <button type="button" ng-click="cancelForm()" class="btn btn-default" translate>CANCEL</button>
                 <button type="button" ng-click="saveForm()" ng-disabled="!searchTags || searchTags.length === 0" class="Lookup-save btn btn-primary" translate>SAVE</button>
             </div>
         </div>

awx/ui/client/src/inventories-hosts/inventories/smart-inventory/smart-inventory-host-filter/smart-inventory-host-filter.partial.html

@@ -1,5 +1,5 @@
 <div class="input-group Form-mixedInputGroup">
-    <span class="input-group-btn Form-variableHeightButtonGroup">
+    <span class="input-group-btn Form-variableHeightButtonGroup input-group-prepend">
         <button type="button" class="Form-lookupButton Form-lookupButton--variableHeight btn btn-default" ng-click="openHostFilterModal()" ng-disabled="!hasEditPermissions || !organization">
             <i class="fa fa-search"></i>
         </button>

awx/ui/client/src/inventories-hosts/inventories/smart-inventory/smart-inventory.form.js

@@ -124,19 +124,19 @@ export default ['i18n', function(i18n) {
                             key: true,
                             label: i18n._('User'),
                             linkBase: 'users',
-                            class: 'col-lg-3 col-md-3 col-sm-3 col-xs-4'
+                            columnClass: 'col-sm-3 col-xs-4'
                         },
                         role: {
                             label: i18n._('Role'),
                             type: 'role',
                             nosort: true,
-                            class: 'col-lg-4 col-md-4 col-sm-4 col-xs-4',
+                            columnClass: 'col-sm-4 col-xs-4'
                         },
                         team_roles: {
                             label: i18n._('Team Roles'),
                             type: 'team_roles',
                             nosort: true,
-                            class: 'col-lg-5 col-md-5 col-sm-5 col-xs-4',
+                            columnClass: 'col-sm-5 col-xs-4'
                         }
                     },
                     ngClick: "$state.go('inventories.editSmartInventory.permissions');"

awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js

@@ -126,19 +126,19 @@ function(i18n) {
                         key: true,
                         label: i18n._('User'),
                         linkBase: 'users',
-                        class: 'col-lg-3 col-md-3 col-sm-3 col-xs-4'
+                        columnClass: 'col-sm-3 col-xs-4'
                     },
                     role: {
                         label: i18n._('Role'),
                         type: 'role',
                         nosort: true,
-                        class: 'col-lg-4 col-md-4 col-sm-4 col-xs-4',
+                        columnClass: 'col-sm-4 col-xs-4'
                     },
                     team_roles: {
                         label: i18n._('Team Roles'),
                         type: 'team_roles',
                         nosort: true,
-                        class: 'col-lg-5 col-md-5 col-sm-5 col-xs-4',
+                        columnClass: 'col-sm-5 col-xs-4'
                     }
                 }
             },

awx/ui/client/src/inventories-hosts/shared/associate-groups/associate-groups.partial.html

@@ -13,7 +13,7 @@
             </div>
             <div class="modal-body AssociateGroups-modalBody" id="associate-groups-list"></div>
             <div class="modal-footer">
-                <button ng-click="closeModal()" class="Lookup-cancel btn btn-default" translate>CANCEL</button>
+                <button ng-click="closeModal()" class="btn btn-default" translate>CANCEL</button>
                 <button ng-click="linkGroups()" class="Lookup-save btn btn-primary" ng-disabled="!selectedItems || selectedItems.length === 0" translate>SAVE</button>
             </div>
         </div>

awx/ui/client/src/inventories-hosts/shared/associate-hosts/associate-hosts.partial.html

@@ -13,7 +13,7 @@
             </div>
             <div class="modal-body AssociateHosts-modalBody" id="associate-hosts-list"></div>
             <div class="modal-footer">
-                <button ng-click="closeModal()" class="Lookup-cancel btn btn-default" translate>CANCEL</button>
+                <button ng-click="closeModal()" class="btn btn-default" translate>CANCEL</button>
                 <button ng-click="linkhosts()" class="Lookup-save btn btn-primary" ng-disabled="!selectedItems || selectedItems.length === 0" translate>SAVE</button>
             </div>
         </div>

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

@@ -18,7 +18,7 @@ export default ['i18n', function(i18n){
             name: {
                 key: true,
                 label: i18n._('Name'),
-                columnClass: 'col-md-3 col-sm-9 col-xs-9',
+                columnClass: 'col-md-4 col-sm-9 col-xs-9',
                 modalColumnClass: 'col-md-8',
                 awToolTip: '{{inventory_script.description | sanitize}}',
                 dataPlacement: 'top'
@@ -29,7 +29,7 @@ export default ['i18n', function(i18n){
                 sourceModel: 'organization',
                 sourceField: 'name',
                 excludeModal: true,
-                columnClass: 'col-md-3 hidden-sm hidden-xs'
+                columnClass: 'd-none d-md-flex col-md-4'
             }
         },
 
@@ -46,7 +46,7 @@ export default ['i18n', function(i18n){
 
         fieldActions: {
 
-            columnClass: 'col-md-2 col-sm-3 col-xs-3',
+            columnClass: 'col-md-4 col-sm-3 col-xs-3',
 
             edit: {
                 ngClick: "editCustomInv(inventory_script.id)",

awx/ui/client/src/job-submission/job-submission.partial.html

@@ -104,7 +104,7 @@
                                     <span class="Form-inputLabel" translate> Password</span>
                                 </label>
                                 <div class="input-group">
-                                    <span class="input-group-btn">
+                                    <span class="input-group-btn input-group-prepend">
                                         <button type="button" class="btn btn-default show_input_button JobSubmission-passwordButton" id="job-submission-ssh-password_show_input_button" aw-tool-tip="Toggle the display of plaintext." aw-tip-placement="top" ng-click="togglePassword('#job-submission-ssh-password')" data-container="job-launch-modal" data-original-title="" title="" translate>Show</button>
                                     </span>
                                     <input id="job-submission-ssh-password" type="password" ng-model="passwords.ssh_password" name="ssh_password" class="password-field form-control input-sm Form-textInput" required>
@@ -118,7 +118,7 @@
                                     <span class="Form-inputLabel" translate> Private Key Passphrase</span>
                                 </label>
                                 <div class="input-group">
-                                    <span class="input-group-btn">
+                                    <span class="input-group-btn input-group-prepend">
                                         <button type="button" class="btn btn-default show_input_button JobSubmission-passwordButton" id="job-submission-ssh-key-unlock_show_input_button" aw-tool-tip="Toggle the display of plaintext." aw-tip-placement="top" ng-click="togglePassword('#job-submission-ssh-key-unlock')" data-container="job-launch-modal" data-original-title="" title="" translate>Show</button>
                                     </span>
                                     <input id="job-submission-ssh-key-unlock" type="password" ng-model="passwords.ssh_key_unlock" name="ssh_key_unlock" class="password-field form-control input-sm Form-textInput" required>
@@ -132,7 +132,7 @@
                                     <span class="Form-inputLabel" translate> Privilege Escalation Password</span>
                                 </label>
                                 <div class="input-group">
-                                    <span class="input-group-btn">
+                                    <span class="input-group-btn input-group-prepend">
                                         <button type="button" class="btn btn-default show_input_button JobSubmission-passwordButton" id="job-submission-become-password_show_input_button" aw-tool-tip="Toggle the display of plaintext." aw-tip-placement="top" ng-click="togglePassword('#job-submission-become-password')" data-container="job-launch-modal" data-original-title="" title="" translate>Show</button>
                                     </span>
                                     <input id="job-submission-become-password" type="password" ng-model="passwords.become_password" name="become_password" class="password-field form-control input-sm Form-textInput" required>
@@ -146,7 +146,7 @@
                                     <span class="Form-inputLabel" translate> Vault Password</span>
                                 </label>
                                 <div class="input-group">
-                                    <span class="input-group-btn">
+                                    <span class="input-group-btn input-group-prepend">
                                         <button type="button" class="btn btn-default show_input_button JobSubmission-passwordButton" id="job-submission-vault-password_show_input_button" aw-tool-tip="Toggle the display of plaintext." aw-tip-placement="top" ng-click="togglePassword('#job-submission-vault-password')" data-container="job-launch-modal" data-original-title="" title="" translate>Show</button>
                                     </span>
                                     <input id="job-submission-vault-password" type="password" ng-model="passwords.vault_password" name="vault_password" class="password-field form-control input-sm Form-textInput" required>
@@ -295,7 +295,7 @@
                         </div>
                         <div ng-if="question.type === 'password'">
                             <div class="input-group">
-                                <span class="input-group-btn">
+                                <span class="input-group-btn input-group-prepend">
                                     <button type="button" class="btn btn-default show_input_button JobSubmission-passwordButton" id="survey_question_{{$index}}_show_input_button" aw-tool-tip="Toggle the display of plaintext." aw-tip-placement="top" ng-click="togglePassword('#survey_question_' + $index)" data-original-title="" data-container="job-launch-modal" title="" translate>Show</button>
                                 </span>
                                 <input id="survey_question_{{$index}}" ng-if="!question.default" type="password" ng-model="question.model" name="survey_question_{{$index}}" ng-required="question.required" ng-minlength="question.minlength" ng-maxlength="question.maxlength" class="form-control Form-textInput" autocomplete="false">

awx/ui/client/src/license/license.partial.html

@@ -1,7 +1,7 @@
 <div class="License-container"
 	ng-class="{'License-container--missing': licenseMissing}">
 	<div class="License-details" ng-hide="licenseMissing">
-		<div class="Panel">
+		<div class="card at-Panel">
 			<div class="List-titleText" translate>Details</div>
 			<div class="License-fields">
 				<div class="License-field">
@@ -72,7 +72,7 @@
 		</div>
 	</div>
 	<div class="License-management" ng-class="{'License-management--missingLicense' : licenseMissing}">
-		<div class="Panel">
+		<div class="card at-Panel">
 			<div class="List-titleText">{{title}}</div>
 			<div class="License-body">
 				<div class="License-helperText" ng-if="licenseMissing" translate>Welcome to Ansible Tower! Please complete the steps below to acquire a license.</div>

awx/ui/client/src/login/loginModal/loginModal.block.less

@@ -148,6 +148,7 @@
     transition: background-color 0.2s;
     background-color: @submit-button-bg;
     color: @submit-button-text;
+    font-size: 0.875rem;
 }
 
 .LoginModal-signInButton:hover,

awx/ui/client/src/management-jobs/card/card.partial.html

@@ -1,7 +1,7 @@
-<div class="tab-pane" id="management-jobs-panel">
+<div id="management-jobs-panel">
 	<aw-limit-panels max-panels="2" panel-container="management-jobs-panel"></aw-limit-panels>
 	<div ui-view></div>
-	<div class="tab-pane Panel" id="management_jobs">
+	<div class="card at-Panel" id="management_jobs">
 		<div class="List-title">
 			<div class="List-titleText" translate>
 				MANAGEMENT JOBS

awx/ui/client/src/management-jobs/notifications/notifications.partial.html

@@ -1,4 +1,4 @@
 <div class="tab-pane" id="notifications">
     <div ui-view></div>
-    <div ng-cloak id="htmlTemplate" class="Panel"></div>
+    <div ng-cloak id="htmlTemplate" class="card at-Panel"></div>
 </div>

awx/ui/client/src/management-jobs/scheduler/schedulerForm.partial.html

@@ -1,4 +1,4 @@
-<div id="htmlTemplate" class=" SchedulerFormPanel Panel" ng-hide="hideForm">
+<div id="htmlTemplate" class="card at-Panel" ng-hide="hideForm">
     <div class="Form-header">
         <div class="Form-title" ng-show="!isEdit">{{ schedulerName || "ADD SCHEDULE"}}</div>
         <div class="Form-title" ng-show="isEdit">{{ schedulerName || "EDIT SCHEDULE"}}</div>
@@ -40,11 +40,10 @@
                     <span class="red-text">*</span>
                     <span translate>Start Date</span>
                 </label>
-                <div class="input-group Form-inputGroup SchedulerForm-inputGroup--date">
+                <scheduler-date-picker date="schedulerStartDt"
-                    <scheduler-date-picker date="schedulerStartDt"
+                    class="input-group Form-inputGroup SchedulerForm-inputGroup--date"
-                        disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd)">
+                    disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd)">
-                    </scheduler-date-picker>
+                </scheduler-date-picker>
-                </div>
                 <div class="error"
                     ng-show="scheduler_form_schedulerStartDt_error"
                     ng-bind="scheduler_form_schedulerStartDt_error">
@@ -508,11 +507,10 @@
                         <span class="red-text">*</span>
                         End Date
                     </label>
-                    <div class="input-group Form-inputGroup SchedulerForm-inputGroup--date">
+                    <scheduler-date-picker date="$parent.schedulerEndDt"
-                        <scheduler-date-picker date="$parent.schedulerEndDt"
+                        class="input-group Form-inputGroup SchedulerForm-inputGroup--date"
-                            disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd)">
+                        disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd)">
-                        </scheduler-date-picker>
+                    </scheduler-date-picker>
-                    </div>
                     <div class="error"
                         ng-show="$parent.scheduler_endDt_error">
                         Please provide a valid date.
@@ -553,8 +551,7 @@
                         class="SchedulerFormDetail-dateFormatsLabel">
                         Date format
                     </label>
-                    <label class="radio-inline
+                    <label class="radio-inline SchedulerFormDetail-radioLabel">
-                        SchedulerFormDetail-radioLabel">
                         <input type="radio"
                             class="SchedulerFormDetail-radioButton"
                             ng-model="dateChoice"
@@ -562,8 +559,7 @@
                             value="local" >
                         Local time
                     </label>
-                    <label class="radio-inline
+                    <label class="radio-inline SchedulerFormDetail-radioLabel">
-                        SchedulerFormDetail-radioLabel">
                         <input type="radio"
                             class="SchedulerFormDetail-radioButton"
                             ng-model="dateChoice"

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

@@ -15,22 +15,27 @@ export default ['i18n', function(i18n){
         iterator: 'notification_template',
         index: false,
         hover: false,
+        layoutClass: 'List-staticColumnLayout--statusOrCheckbox',
+        staticColumns: [
+            {
+                field: 'status',
+                content: {
+                    label: '',
+                    iconOnly: true,
+                    nosort: true,
+                    icon: 'icon-job-{{ notification_template.status }}',
+                    awPopOver: '{{ notification_template.template_status_html }}',
+                    dataTitle: i18n._("Recent Notifications"),
+                    dataPlacement: 'right'
+                }
+            }
+        ],
 
         fields: {
-            status: {
-                label: '',
-                iconOnly: true,
-                nosort: true,
-                icon: 'icon-job-{{ notification_template.status }}',
-                awPopOver: '{{ notification_template.template_status_html }}',
-                dataTitle: i18n._("Recent Notifications"),
-                dataPlacement: 'right',
-                columnClass: 'col-lg-1 col-md-1 col-sm-2 col-xs-2 List-staticColumn--smallStatus'
-            },
             name: {
                 key: true,
                 label: i18n._('Name'),
-                columnClass: 'col-md-3 col-sm-9 col-xs-9',
+                columnClass: 'col-md-4 col-sm-9 col-xs-9',
                 linkTo: '/#/notification_templates/{{notification_template.id}}',
                 awToolTip: '{{notification_template.description | sanitize}}',
                 dataPlacement: 'top'
@@ -41,7 +46,7 @@ export default ['i18n', function(i18n){
                     searchType: 'select',
                     searchOptions: [],
                     excludeModal: true,
-                    columnClass: 'col-md-4 hidden-sm hidden-xs'
+                    columnClass: 'd-none d-md-flex col-md-4'
             }
         },
 
@@ -58,7 +63,7 @@ export default ['i18n', function(i18n){
 
         fieldActions: {
 
-            columnClass: 'col-md-2 col-sm-3 col-xs-3',
+            columnClass: 'col-md-4 col-sm-3 col-xs-3',
 
             edit: {
                 ngClick: "editNotification(notification_template.id)",

awx/ui/client/src/notifications/notifications.block.less

@@ -26,10 +26,6 @@
     display:block!important;
 }
 
-#notification_templates_table .name-column {
-    padding-left: 10px;
-}
-
 .notificationsList {
     margin-top: 0;
 }
@@ -46,11 +42,8 @@
     }
 
     .close {
-        position: absolute;
-        right: 10px;
-        top: 5px;
         color: white;
         opacity: 1;
         text-shadow: none;
     }
-}
+}

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

@@ -25,7 +25,7 @@ export default ['i18n', 'templateUrl', function(i18n, templateUrl){
             name: {
                 key: true,
                 label: i18n._('Name'),
-                columnClass: 'col-md-3 col-sm-9 col-xs-9',
+                columnClass: 'col-md-4 col-sm-9 col-xs-9',
                 linkTo: '/#/notification_templates/{{notification.id}}'
             },
             notification_type: {
@@ -33,7 +33,7 @@ export default ['i18n', 'templateUrl', function(i18n, templateUrl){
                 searchType: 'select',
                 searchOptions: [],
                 excludeModal: true,
-                columnClass: 'col-md-4 hidden-sm hidden-xs'
+                columnClass: 'd-none d-sm-flex col-md-4 col-sm-3'
             },
             notification_templates_success: {
                 label: i18n._('Success'),
@@ -44,11 +44,12 @@ export default ['i18n', 'templateUrl', function(i18n, templateUrl){
                 awToolTip: "{{ schedule.play_tip }}",
                 dataTipWatch: "schedule.play_tip",
                 dataPlacement: "right",
-                nosort: true
+                nosort: true,
+                columnClass: 'd-none d-md-flex justify-content-start col-md-2'
             },
             notification_templates_error: {
                 label: i18n._('Failure'),
-                columnClass: 'NotifierList-lastColumn',
+                columnClass: 'd-none d-md-flex justify-content-start col-md-2 NotifierList-lastColumn',
                 flag: 'notification_templates_error',
                 type: "toggle",
                 ngClick: "toggleNotification($event, notification.id, \"notification_templates_error\")",

awx/ui/client/src/organizations/linkout/addUsers/addUsers.controller.js

@@ -42,6 +42,10 @@ function($scope, $rootScope, ProcessErrors, GetBasePath, generateList,
             list.name = 'add_users';
             list.multiSelect = true;
             list.fields.username.ngClick = 'linkoutUser(add_user.id)';
+            list.fields.username.columnClass = 'col-sm-4';
+            list.fields.first_name.columnClass = 'col-sm-4';
+            list.fields.last_name.columnClass = 'col-sm-4';
+            list.layoutClass = 'List-staticColumnLayout--statusOrCheckbox';
             delete list.actions;
             delete list.fieldActions;
 

awx/ui/client/src/organizations/linkout/addUsers/addUsers.partial.html

@@ -1,5 +1,4 @@
-<div id="add-users-modal" class="AddUsers modal fade">
+<div id="add-users-modal" class="AddUsers modal">
-    <div class="AddUsers-backDrop is-loggedOut"></div>
     <div class="AddUsers-dialog">
         <div class="AddUsers-content is-loggedOut">
             <div class="AddUsers-header">

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

@@ -1,6 +1,6 @@
 <div ui-view="form"></div>
 <div class="tab-pane" id="organizations">
-    <div ng-cloak id="htmlTemplate" class="Panel">
+    <div ng-cloak id="htmlTemplate" class="card at-Panel">
         <div class="List-header">
             <div class="List-title">
                 <div class="List-titleText" translate>

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

@@ -103,13 +103,13 @@ export default ['NotificationsList', 'i18n',
                             key: true,
                             label: i18n._('User'),
                             linkBase: 'users',
-                            class: 'col-lg-3 col-md-3 col-sm-3 col-xs-4'
+                            columnClass: 'col-sm-6'
                         },
                         role: {
                             label: i18n._('Role'),
                             type: 'role',
                             nosort: true,
-                            class: 'col-lg-4 col-md-4 col-sm-4 col-xs-4'
+                            columnClass: 'col-sm-6'
                         }
                     }
                 },
@@ -142,19 +142,19 @@ export default ['NotificationsList', 'i18n',
                             key: true,
                             label: i18n._('User'),
                             linkBase: 'users',
-                            class: 'col-lg-3 col-md-3 col-sm-3 col-xs-4'
+                            columnClass: 'col-lg-3 col-md-3 col-sm-3 col-xs-4'
                         },
                         role: {
                             label: i18n._('Role'),
                             type: 'role',
                             nosort: true,
-                            class: 'col-lg-4 col-md-4 col-sm-4 col-xs-4',
+                            columnClass: 'col-lg-4 col-md-4 col-sm-4 col-xs-4',
                         },
                         team_roles: {
                             label: i18n._('Team Roles'),
                             type: 'team_roles',
                             nosort: true,
-                            class: 'col-lg-5 col-md-5 col-sm-5 col-xs-4',
+                            columnClass: 'col-lg-5 col-md-5 col-sm-5 col-xs-4',
                         }
                     }
                 },

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

@@ -21,7 +21,7 @@ export default [function() {
             name: {
                 key: true,
                 label: 'Name',
-                columnClass: 'col-lg-4 col-md-6 col-sm-8 col-xs-8',
+                columnClass: 'col-sm-12',
                 awToolTip: '{{organization.description | sanitize}}',
                 dataPlacement: 'top'
             },

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

@@ -264,19 +264,19 @@ export default ['i18n', 'NotificationsList', 'TemplateList',
                         key: true,
                         label: i18n._('User'),
                         linkBase: 'users',
-                        class: 'col-lg-3 col-md-3 col-sm-3 col-xs-4'
+                        columnClass: 'col-sm-3 col-xs-4'
                     },
                     role: {
                         label: i18n._('Role'),
                         type: 'role',
                         nosort: true,
-                        class: 'col-lg-4 col-md-4 col-sm-4 col-xs-4',
+                        columnClass: 'col-sm-4 col-xs-4',
                     },
                     team_roles: {
                         label: i18n._('Team Roles'),
                         type: 'team_roles',
                         nosort: true,
-                        class: 'col-lg-5 col-md-5 col-sm-5 col-xs-4',
+                        columnClass: 'col-sm-5 col-xs-4',
                     }
                 }
             },

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

@@ -5,124 +5,130 @@
  *************************************************/
 
 export default ['i18n', function(i18n) {
-  return {
+    return {
 
-      name: 'projects',
+        name: 'projects',
-      iterator: 'project',
+        iterator: 'project',
-      basePath: 'projects',
+        basePath: 'projects',
-      selectTitle: i18n._('Add Project'),
+        selectTitle: i18n._('Add Project'),
-      editTitle: i18n._('PROJECTS'),
+        editTitle: i18n._('PROJECTS'),
-      listTitle: i18n._('PROJECTS'),
+        listTitle: i18n._('PROJECTS'),
-      selectInstructions: '<p>Select existing projects by clicking each project or checking the related checkbox. When finished, click the blue ' +
+        selectInstructions: '<p>Select existing projects by clicking each project or checking the related checkbox. When finished, click the blue ' +
-          '<em>Select</em> button, located bottom right.</p><p>Create a new project by clicking the <i class=\"fa fa-plus\"></i> button.</p>',
+            '<em>Select</em> button, located bottom right.</p><p>Create a new project by clicking the <i class=\"fa fa-plus\"></i> button.</p>',
-      index: false,
+        index: false,
-      hover: true,
+        hover: true,
-      emptyListText: i18n._('No Projects Have Been Created'),
+        emptyListText: i18n._('No Projects Have Been Created'),
+        layoutClass: 'List-staticColumnLayout--statusOrCheckbox',
+        staticColumns: [
+            {
+                field: 'status',
+                content: {
+                    label: '',
+                    iconOnly: true,
+                    ngClick: 'showSCMStatus(project.id)',
+                    awToolTip: '{{ project.statusTip }}',
+                    dataTipWatch: 'project.statusTip',
+                    dataPlacement: 'right',
+                    icon: "icon-job-{{ project.statusIcon }}",
+                    columnClass: "List-staticColumn--smallStatus",
+                    nosort: true,
+                    excludeModal: true
+                }
+            }
+        ],
 
-      fields: {
+        fields: {
-          status: {
+            name: {
-              label: '',
+                key: true,
-              iconOnly: true,
+                label: i18n._('Name'),
-              ngClick: 'showSCMStatus(project.id)',
+                columnClass: "col-md-3 col-sm-6 List-staticColumnAdjacent",
-              awToolTip: '{{ project.statusTip }}',
+                modalColumnClass: 'col-md-8',
-              dataTipWatch: 'project.statusTip',
+                awToolTip: '{{project.description | sanitize}}',
-              dataPlacement: 'right',
+                dataPlacement: 'top'
-              icon: "icon-job-{{ project.statusIcon }}",
+            },
-              columnClass: "List-staticColumn--smallStatus",
+            scm_type: {
-              nosort: true,
+                label: i18n._('Type'),
-              excludeModal: true
+                ngBind: 'project.type_label',
-          },
+                excludeModal: true,
-          name: {
+                columnClass: 'col-md-2 col-sm-2'
-              key: true,
+            },
-              label: i18n._('Name'),
+            scm_revision: {
-              columnClass: "col-lg-4 col-md-4 col-sm-4 col-xs-7 List-staticColumnAdjacent",
+                label: i18n._('Revision'),
-              modalColumnClass: 'col-md-8',
+                excludeModal: true,
-              awToolTip: '{{project.description | sanitize}}',
+                columnClass: 'd-none d-md-flex col-md-2',
-              dataPlacement: 'top'
+                type: 'revision'
-          },
+            },
-          scm_type: {
+            last_updated: {
-              label: i18n._('Type'),
+                label: i18n._('Last Updated'),
-              ngBind: 'project.type_label',
+                filter: "longDate",
-              excludeModal: true,
+                columnClass: "d-none d-md-flex col-md-2",
-              columnClass: 'col-lg-2 col-md-2 col-sm-2 hidden-xs'
+                excludeModal: true
-          },
+            }
-          scm_revision: {
+        },
-              label: i18n._('Revision'),
-              excludeModal: true,
-              columnClass: 'List-tableCell col-lg-2 col-md-2 hidden-sm hidden-xs',
-              type: 'revision'
-          },
-          last_updated: {
-              label: i18n._('Last Updated'),
-              filter: "longDate",
-              columnClass: "col-lg-3 hidden-md hidden-sm hidden-xs",
-              excludeModal: true
-          }
-      },
 
-      actions: {
+        actions: {
-          refresh: {
+            refresh: {
-              mode: 'all',
+                mode: 'all',
-              awToolTip: i18n._("Refresh the page"),
+                awToolTip: i18n._("Refresh the page"),
-              ngClick: "refresh()",
+                ngClick: "refresh()",
-              ngShow: "socketStatus === 'error'",
+                ngShow: "socketStatus === 'error'",
-              actionClass: 'btn List-buttonDefault',
+                actionClass: 'btn List-buttonDefault',
-              buttonContent: i18n._('REFRESH')
+                buttonContent: i18n._('REFRESH')
-          },
+            },
-          add: {
+            add: {
-              mode: 'all', // One of: edit, select, all
+                mode: 'all', // One of: edit, select, all
-              ngClick: 'addProject()',
+                ngClick: 'addProject()',
-              awToolTip: i18n._('Create a new project'),
+                awToolTip: i18n._('Create a new project'),
-              actionClass: 'at-Button--add',
+                actionClass: 'at-Button--add',
-              actionId: 'button-add',
+                actionId: 'button-add',
-              ngShow: "canAdd"
+                ngShow: "canAdd"
-          }
+            }
-      },
+        },
 
-      fieldActions: {
+        fieldActions: {
 
-          columnClass: 'col-lg-4 col-md-3 col-sm-4 col-xs-5',
+            columnClass: 'col-md-3 col-sm-4',
-          edit: {
+            edit: {
-              ngClick: "editProject(project.id)",
+                ngClick: "editProject(project.id)",
-              awToolTip: i18n._('Edit the project'),
+                awToolTip: i18n._('Edit the project'),
-              dataPlacement: 'top',
+                dataPlacement: 'top',
-              ngShow: "project.summary_fields.user_capabilities.edit"
+                ngShow: "project.summary_fields.user_capabilities.edit"
-          },
+            },
-          scm_update: {
+            scm_update: {
-              ngClick: 'SCMUpdate(project.id, $event)',
+                ngClick: 'SCMUpdate(project.id, $event)',
-              awToolTip: "{{ project.scm_update_tooltip }}",
+                awToolTip: "{{ project.scm_update_tooltip }}",
-              dataTipWatch: "project.scm_update_tooltip",
+                dataTipWatch: "project.scm_update_tooltip",
-              ngClass: "project.scm_type_class",
+                ngClass: "project.scm_type_class",
-              dataPlacement: 'top',
+                dataPlacement: 'top',
-              ngShow: "project.summary_fields.user_capabilities.start"
+                ngShow: "project.summary_fields.user_capabilities.start"
-          },
+            },
-          copy: {
+            copy: {
-              label: i18n._('Copy'),
+                label: i18n._('Copy'),
-              ngClick: 'copyProject(project)',
+                ngClick: 'copyProject(project)',
-              "class": 'btn-danger btn-xs',
+                "class": 'btn-danger btn-xs',
-              awToolTip: i18n._('Copy project'),
+                awToolTip: i18n._('Copy project'),
-              dataPlacement: 'top',
+                dataPlacement: 'top',
-              ngShow: 'project.summary_fields.user_capabilities.copy'
+                ngShow: 'project.summary_fields.user_capabilities.copy'
-          },
+            },
-          view: {
+            view: {
-              ngClick: "editProject(project.id)",
+                ngClick: "editProject(project.id)",
-              awToolTip: i18n._('View the project'),
+                awToolTip: i18n._('View the project'),
-              dataPlacement: 'top',
+                dataPlacement: 'top',
-              ngShow: "!project.summary_fields.user_capabilities.edit",
+                ngShow: "!project.summary_fields.user_capabilities.edit",
-              icon: 'fa-eye',
+                icon: 'fa-eye',
-          },
+            },
-          "delete": {
+            "delete": {
-              ngClick: "deleteProject(project.id, project.name)",
+                ngClick: "deleteProject(project.id, project.name)",
-              awToolTip: i18n._('Delete the project'),
+                awToolTip: i18n._('Delete the project'),
-              ngShow: "(project.status !== 'updating' && project.status !== 'running' && project.status !== 'pending' && project.status !== 'waiting')  && project.summary_fields.user_capabilities.delete",
+                ngShow: "(project.status !== 'updating' && project.status !== 'running' && project.status !== 'pending' && project.status !== 'waiting')  && project.summary_fields.user_capabilities.delete",
-              dataPlacement: 'top'
+                dataPlacement: 'top'
-          },
+            },
-          cancel: {
+            cancel: {
-              ngClick: "cancelUpdate(project)",
+                ngClick: "cancelUpdate(project)",
-              awToolTip: i18n._('Cancel the SCM update'),
+                awToolTip: i18n._('Cancel the SCM update'),
-              ngShow: "(project.status == 'updating' || project.status == 'running' || project.status == 'pending' || project.status == 'waiting') && project.summary_fields.user_capabilities.start",
+                ngShow: "(project.status == 'updating' || project.status == 'running' || project.status == 'pending' || project.status == 'waiting') && project.summary_fields.user_capabilities.start",
-              dataPlacement: 'top',
+                dataPlacement: 'top',
-              ngDisabled: "project.pending_cancellation || project.status == 'canceled'"
+                ngDisabled: "project.pending_cancellation || project.status == 'canceled'"
-          }
+            }
-      }
+        }
-  };}];
+    };}];

awx/ui/client/src/scheduler/scheduleToggle.block.less

@@ -13,7 +13,6 @@
     border-radius: 5px;
     border: 1px solid @default-link;
     background-color: @default-link;
-    margin-top: 2px;
     cursor: pointer;
     display: flex;
     justify-content: flex-end;
@@ -75,3 +74,11 @@
 .ScheduleToggle-switch.is-on:hover {
     background-color: @default-link-hov;
 }
+
+.ScheduleToggle-listTableCell {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    justify-content: flex-end;
+    padding-right: 0px;
+}

awx/ui/client/src/scheduler/scheduled-jobs.list.js

@@ -14,22 +14,27 @@ export default ['i18n', function(i18n) {
         listTitle: i18n._('SCHEDULED JOBS'),
         hover: true,
         emptyListText: i18n._('No schedules exist'),
+        layoutClass: 'List-staticColumnLayout--toggleOnOff',
+        staticColumns: [
+            {
+                field: 'enabled',
+                content: {
+                    label: '',
+                    type: 'toggle',
+                    ngClick: "toggleSchedule($event, schedule.id)",
+                    nosort: true,
+                    awToolTip: "{{ schedule.play_tip }}",
+                    ngDisabled: "!schedule.summary_fields.user_capabilities.edit",
+                    dataTipWatch: "schedule.play_tip",
+                    dataPlacement: 'top'
+                }
+            }
+        ],
 
         fields: {
-            enabled: {
-                label: '',
-                columnClass: 'List-staticColumn--toggle',
-                type: 'toggle',
-                ngClick: "toggleSchedule($event, schedule.id)",
-                nosort: true,
-                awToolTip: "{{ schedule.play_tip }}",
-                ngDisabled: "!schedule.summary_fields.user_capabilities.edit",
-                dataTipWatch: "schedule.play_tip",
-                dataPlacement: 'top'
-            },
             name: {
                 label: i18n._('Name'),
-                columnClass: 'col-lg-4 col-md-5 col-sm-5 col-xs-7 List-staticColumnAdjacent',
+                columnClass: 'col-xl-4 col-lg-5 col-md-5 col-sm-7 List-staticColumnAdjacent',
                 sourceModel: 'unified_job_template',
                 sourceField: 'name',
                 // ngBind: 'schedule.summary_fields.unified_job_template.name',
@@ -41,7 +46,7 @@ export default ['i18n', function(i18n) {
             type: {
                 label: i18n._('Type'),
                 noLink: true,
-                columnClass: "col-lg-2 col-md-2 hidden-sm hidden-xs",
+                columnClass: "d-none d-md-flex col-md-2",
                 sourceModel: 'unified_job_template',
                 sourceField: 'unified_job_type',
                 ngBind: 'schedule.type_label',
@@ -50,7 +55,7 @@ export default ['i18n', function(i18n) {
             next_run: {
                 label: i18n._('Next Run'),
                 noLink: true,
-                columnClass: "col-lg-3 col-md-2 col-sm-3 hidden-xs",
+                columnClass: "d-none d-md-flex col-xl-3 col-lg-2 col-md-3",
                 filter: "longDate",
                 key: true
             }
@@ -60,7 +65,7 @@ export default ['i18n', function(i18n) {
 
         fieldActions: {
 
-            columnClass: 'col-lg-3 col-md-3 col-sm-3 col-xs-5',
+            columnClass: 'col-xl-3 col-lg-3 col-md-4 col-sm-5',
             "edit": {
                 mode: "all",
                 ngClick: "editSchedule(schedule)",

awx/ui/client/src/scheduler/scheduler.partial.html

@@ -1,4 +1,4 @@
 <div ui-view></div>
-<div class="Panel">
+<div class="card at-Panel">
     <div id="schedule-list-target"></div>
 </div>

awx/ui/client/src/scheduler/schedulerForm.partial.html

@@ -1,4 +1,4 @@
-<div id="htmlTemplate" class=" SchedulerFormPanel Panel" ng-hide="hideForm">
+<div id="htmlTemplate" class="card at-Panel" ng-hide="hideForm">
     <div class="Form-header">
         <div class="Form-title" ng-show="!isEdit">{{ schedulerName || strings.get('state.CREATE_SCHEDULE') }}</div>
         <div class="Form-title" ng-show="isEdit">{{ schedulerName || strings.get('state.EDIT_SCHEDULE') }}</div>
@@ -40,11 +40,10 @@
                     <span class="red-text">*</span>
                     {{ strings.get('form.START_DATE') }}
                 </label>
-                <div class="input-group Form-inputGroup SchedulerForm-inputGroup--date">
+                <scheduler-date-picker date="schedulerStartDt"
-                    <scheduler-date-picker date="schedulerStartDt"
+                    class="input-group Form-inputGroup SchedulerForm-inputGroup--date"
-                        disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword">
+                    disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword">
-                    </scheduler-date-picker>
+                </scheduler-date-picker>
-                </div>
                 <div class="error"
                     ng-show="scheduler_form_schedulerStartDt_error"
                     ng-bind="scheduler_form_schedulerStartDt_error">
@@ -490,11 +489,10 @@
                         <span class="red-text">*</span>
                         {{ strings.get('form.END_DATE') }}
                     </label>
-                    <div class="input-group Form-inputGroup SchedulerForm-inputGroup--date">
+                    <scheduler-date-picker date="$parent.schedulerEndDt"
-                        <scheduler-date-picker date="$parent.schedulerEndDt"
+                        class="input-group Form-inputGroup SchedulerForm-inputGroup--date"
-                          disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword">
+                        disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword">
-                        </scheduler-date-picker>
+                    </scheduler-date-picker>
-                    </div>
                     <div class="error"
                         ng-show="$parent.scheduler_endDt_error">
                         {{ strings.get('form.PROVIDE_VALID_DATE') }}
@@ -600,8 +598,7 @@
                         class="SchedulerFormDetail-dateFormatsLabel">
                         {{ strings.get('form.DATE_FORMAT') }}
                     </label>
-                    <label class="radio-inline
+                    <label class="SchedulerFormDetail-radioLabel">
-                        SchedulerFormDetail-radioLabel">
                         <input type="radio"
                             class="SchedulerFormDetail-radioButton"
                             ng-model="dateChoice"
@@ -609,8 +606,7 @@
                             value="local" >
                         {{ strings.get('form.LOCAL_TIME_ZONE') }}
                     </label>
-                    <label class="radio-inline
+                    <label class="SchedulerFormDetail-radioLabel">
-                        SchedulerFormDetail-radioLabel">
                         <input type="radio"
                             class="SchedulerFormDetail-radioButton"
                             ng-model="dateChoice"

awx/ui/client/src/scheduler/schedulerFormDetail.block.less

@@ -52,12 +52,17 @@
 
 .SchedulerFormDetail-dateFormatsLabel {
     font-weight: normal;
-    margin-right: 5px;
 }
 
 .SchedulerFormDetail-radioLabel {
     margin-top: -3px !important;
     color: @default-data-txt !important;
+    font-weight: normal;
+    margin-left: 5px;
+}
+
+.SchedulerFormDetail-dateFormats label:last-of-type {
+    margin-left: 10px;
 }
 
 .SchedulerFormDetail-radioButton {

awx/ui/client/src/scheduler/schedules.list.js

@@ -14,48 +14,55 @@ export default ['i18n', function(i18n) {
         listTitle: '{{parentObject | sanitize}} || SCHEDULES',
         index: false,
         hover: true,
+        layoutClass: 'List-staticColumnLayout--schedules',
+        staticColumns: [
+            {
+                field: 'invalid',
+                content: {
+                    label: '',
+                    type: 'invalid',
+                    nosort: true,
+                    awToolTip: i18n._("Resources are missing from this template."),
+                    dataPlacement: 'right',
+                    ngShow: '!isValid(schedule)'
+                }
+            },
+            {
+                field: 'toggleSchedule',
+                content: {
+                    ngDisabled: "!schedule.summary_fields.user_capabilities.edit || credentialRequiresPassword",
+                    label: '',
+                    type: "toggle",
+                    ngClick: "toggleSchedule($event, schedule.id)",
+                    awToolTip: "{{ schedule.play_tip }}",
+                    dataTipWatch: "schedule.play_tip",
+                    dataPlacement: "right",
+                    nosort: true,
+                }
+            }
+        ],
 
         fields: {
-            invalid: {
-                columnClass: "List-staticColumn--invalidBar",
-                label: '',
-                type: 'invalid',
-                nosort: true,
-                awToolTip: i18n._("Resources are missing from this template."),
-                dataPlacement: 'right',
-                ngShow: '!isValid(schedule)'
-            },
-            toggleSchedule: {
-                ngDisabled: "!schedule.summary_fields.user_capabilities.edit || credentialRequiresPassword",
-                label: '',
-                columnClass: 'List-staticColumn--toggle',
-                type: "toggle",
-                ngClick: "toggleSchedule($event, schedule.id)",
-                awToolTip: "{{ schedule.play_tip }}",
-                dataTipWatch: "schedule.play_tip",
-                dataPlacement: "right",
-                nosort: true,
-            },
             name: {
                 key: true,
                 label: i18n._('Name'),
                 uiSref: "{{schedule.linkToDetails}}",
-                columnClass: "col-md-3 col-sm-3 col-xs-6"
+                columnClass: "col-sm-3 col-xs-6"
             },
             dtstart: {
                 label: i18n._('First Run'),
                 filter: "longDate",
-                columnClass: "List-staticColumn--schedulerTime hidden-sm hidden-xs"
+                columnClass: "d-none d-sm-flex col-sm-2"
             },
             next_run: {
                 label: i18n._('Next Run'),
                 filter: "longDate",
-                columnClass: "List-staticColumn--schedulerTime hidden-xs"
+                columnClass: "d-none d-sm-flex col-sm-2"
             },
             dtend: {
                 label: i18n._('Final Run'),
                 filter: "longDate",
-                columnClass: "List-staticColumn--schedulerTime hidden-xs"
+                columnClass: "d-none d-sm-flex col-sm-2"
             },
         },
 
@@ -81,6 +88,7 @@ export default ['i18n', function(i18n) {
         },
 
         fieldActions: {
+            columnClass: 'col-sm-3 col-xs-6',
             edit: {
                 label: i18n._('Edit'),
                 ngClick: "editSchedule(schedule)",

awx/ui/client/src/shared/bootstrap-settings.less

@@ -1,21 +0,0 @@
-.btn-success{
-	background: @default-succ;
-	border-color: transparent;
-	:hover{
-		background: @default-succ-hov;
-	}
-	:disabled{
-		background: @default-succ-disabled;
-	}
-}
-.btn-default{
-	background: @btn-bg;
-	border-color: @btn-bord;
-	color: @btn-txt;
-	:hover{
-		background: @btn-bg-hov;
-	}
-	:focus{
-		background: @btn-bg-sel;
-	}
-}

awx/ui/client/src/shared/column-sort/column-sort.partial.html

@@ -1,4 +1,4 @@
-<th id="{{columnIterator}}-{{columnField}}-header" class="List-tableHeader list-header {{columnCustomClass}}" ng-click="columnNoSort !== 'true' && toggleColumnOrderBy()" ng-class="{'list-header-noSort' : columnNoSort === 'true'}" >
+<div id="{{columnIterator}}-{{columnField}}-header" class="List-tableHeader list-header {{columnCustomClass}}" ng-click="columnNoSort !== 'true' && toggleColumnOrderBy()" ng-class="{'list-header-noSort' : columnNoSort === 'true'}" >
     {{columnLabel | translate}}
     <i ng-if="columnNoSort !== 'true'" class="fa columnSortIcon" ng-class="orderByIcon()">
-</th>
+</div>

awx/ui/client/src/shared/directives.js

@@ -100,10 +100,12 @@ function(SettingsUtils, i18n, $rootScope) {
         },
         template: `
                 <div class="input-group">
-                      <label class="input-group-addon Form-filePicker--pickerButton" id="filePickerButton" for="filePicker" ng-click="update($event)">${browseText}</label>
+                    <span class="input-group-btn input-group-prepend">
-                      <input type="text" class="form-control Form-filePicker--textBox" id="filePickerText" placeholder="${placeholderText}" readonly>
+                        <label class="btn Form-browseButton" id="filePickerButton" for="filePicker" ng-click="update($event)">${browseText}</label>
-                      <input type="file" name="file" class="Form-filePicker" id="filePicker"  onchange="angular.element(this).scope().fileChange(this.files)"/>
+                    </span>
-                    </div>
+                    <input type="text" class="form-control Form-filePicker--textBox" id="filePickerText" placeholder="${placeholderText}" readonly>
+                    <input type="file" name="file" class="Form-filePicker" id="filePicker"  onchange="angular.element(this).scope().fileChange(this.files)"/>
+                </div>
 
                 <div ng-if="imagePresent" class="Form-filePicker--selectedFile">
                 ${uploadedText}
@@ -795,7 +797,7 @@ function(SettingsUtils, i18n, $rootScope) {
             let tooltipInnerClass = (attrs.tooltipInnerClass || attrs.tooltipinnerclass) ? (attrs.tooltipInnerClass || attrs.tooltipinnerclass) : '';
             let tooltipOuterClass = attrs.tooltipOuterClass ? attrs.tooltipOuterClass : '';
 
-            template = '<div class="tooltip Tooltip ' + tooltipOuterClass + '" role="tooltip"><div class="tooltip-arrow Tooltip-arrow"></div><div class="tooltip-inner Tooltip-inner ' + tooltipInnerClass + '"></div></div>';
+            template = '<div class="tooltip Tooltip ' + tooltipOuterClass + '" role="tooltip"><div class="tooltip-arrow Tooltip-arrow arrow"></div><div class="tooltip-inner Tooltip-inner ' + tooltipInnerClass + '"></div></div>';
 
             // This block helps clean up tooltips that may get orphaned by a click event
             $(element).on('mouseenter', function(event) {
@@ -836,7 +838,8 @@ function(SettingsUtils, i18n, $rootScope) {
                 title: attrs.awToolTip,
                 container: container,
                 trigger: 'hover',
-                template: template
+                template: template,
+                boundary: 'window'
             });
 
             if (attrs.tipWatch) {
@@ -844,7 +847,7 @@ function(SettingsUtils, i18n, $rootScope) {
                 scope.$watch(attrs.tipWatch, function(newVal) {
                     // Where did fixTitle come from?:
                     //   http://stackoverflow.com/questions/9501921/change-twitter-bootstrap-tooltip-content-on-click
-                    $(element).tooltip('hide').attr('data-original-title', newVal).tooltip('fixTitle');
+                    $(element).tooltip('hide').attr('data-original-title', newVal).tooltip('_fixTitle');
                 });
             }
         }
@@ -866,11 +869,11 @@ function(SettingsUtils, i18n, $rootScope) {
             title = (attrs.overTitle) ? attrs.overTitle : (attrs.popoverTitle) ? attrs.popoverTitle : 'Help',
             container = (attrs.container !== undefined) ? attrs.container : false,
             trigger = (attrs.trigger !== undefined) ? attrs.trigger : 'manual',
-            template = '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
+            template = '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>',
             id_to_close = "";
 
         if (element[0].id) {
-            template = '<div id="' + element[0].id + '_popover_container" class="popover" role="tooltip"><div class="arrow"></div><h3 id="' + element[0].id + '_popover_title" class="popover-title" translate></h3><div id="' + element[0].id + '_popover_content" class="popover-content" translate></div></div>';
+            template = '<div id="' + element[0].id + '_popover_container" class="popover" role="tooltip"><div class="arrow"></div><h3 id="' + element[0].id + '_popover_title" class="popover-header" translate></h3><div id="' + element[0].id + '_popover_content" class="popover-body" translate></div></div>';
         }
 
         scope.triggerPopover = function(e) {

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

@@ -141,10 +141,10 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
 
 .factory('GenerateForm', ['$rootScope', '$compile', 'generateList',
     'Attr', 'Icon', 'Column',
-    'NavigationLink', 'HelpCollapse', 'Empty', 'SelectIcon',
+    'NavigationLink', 'Empty', 'SelectIcon',
     'ActionButton', 'MessageBar', '$log', 'i18n',
     function ($rootScope, $compile, GenerateList,
-        Attr, Icon, Column, NavigationLink, HelpCollapse,
+        Attr, Icon, Column, NavigationLink,
         Empty, SelectIcon, ActionButton, MessageBar, $log, i18n) {
         return {
 
@@ -163,7 +163,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
             },
             // Not a very good way to do this
             // Form sub-states expect to target ui-views related@stateName & modal@stateName
-            // Also wraps mess of generated HTML in a .Panel
+            // Also wraps mess of generated HTML in a .card and at-Panel
             wrapPanel(html, ignorePanel){
                 if(ignorePanel) {
                     return `
@@ -176,7 +176,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                 else {
                     return `
                     ${MessageBar(this.form)}
-                    <div class="Panel">
+                    <div class="card at-Panel">
                     ${html}
                     <div ui-view="related"></div>
                     <div ui-view="modal"></div>
@@ -508,22 +508,6 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
 
             navigationLink: NavigationLink,
 
-
-            buildHelpCollapse: function (collapse_array) {
-                var html = '',
-                    params = {}, i;
-                for (i = 0; i < collapse_array.length; i++) {
-                    params.hdr = collapse_array[i].hdr;
-                    params.content = collapse_array[i].content;
-                    params.idx = this.accordion_count++;
-                    params.show = (collapse_array[i].show) ? collapse_array[i].show : null;
-                    params.ngHide = (collapse_array[i].ngHide) ? collapse_array[i].ngHide : null;
-                    params.bind = (collapse_array[i].ngBind) ? collapse_array[i].ngBind : null;
-                    html += HelpCollapse(params);
-                }
-                return html;
-            },
-
             buildHeaderField: function(key, field, options, form){
                 var html = '';
                 // extend these blocks to include elements similarly buildField()
@@ -594,43 +578,30 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                     return html;
                 }
 
-                function buildCheckbox(form, field, fld, idx, includeLabel) {
+                function buildCheckbox(form, field, fld, idx) {
-                    var html = '',
+                    var html = '';
-                        label = (includeLabel !== undefined && includeLabel === false) ? false : true;
-
-                    if (label) {
-                        html += "<span class=\"Form-checkboxRow\">";
-                        html += "<label class=\"";
-                        html += (field.inline === undefined || field.inline === true) ? "checkbox-inline" : "";
-                        html += (field.labelClass) ? " " + field.labelClass : "";
-                        html += "\"";
-                        html += (field.ngShow) ? " ng-show=\"" +field.ngShow + "\" " : "";
-                        html += ">";
-                    }
 
+                    html += "<div class=\"form-check\" ";
+                    html += (field.ngShow) ? " ng-show=\"" +field.ngShow + "\" " : "";
+                    html += ">";
+                    html += "<label class=\"form-check-label\">";
                     html += "<input type=\"checkbox\" ";
                     html += Attr(field, 'type');
                     html += "ng-model=\"" + fld + '" ';
                     html += "name=\"" + fld + '" ';
                     html += (field.ngChange) ? Attr(field, 'ngChange') : "";
-                    html += "id=\"" + form.name + "_" + fld + "_chbox\" ";
+                    html += "id=\"" + form.name + "_" + fld + "_chbox";
                     html += (idx !== undefined) ? "_" + idx : "";
-                    html += "class=\"";
+                    html += "\" class=\"form-check-input\"";
-                    html += "\"";
                     html += (field.trueValue !== undefined) ? Attr(field, 'trueValue') : "";
                     html += (field.falseValue !== undefined) ? Attr(field, 'falseValue') : "";
                     html += (field.checked) ? "checked " : "";
                     html += (field.readonly) ? "disabled " : "";
                     html += (field.ngChange) ? "ng-change=\"" +field.ngChange + "\" " : "";
                     html += (field.ngDisabled) ? "ng-disabled=\"" + field.ngDisabled + "\" " : "";
-                    html += " > ";
+                    html += `><span class="Form-inputLabel">${field.label}</span></label>`;
-
+                    html += (field.awPopOver) ? Attr(field, 'awPopOver', fld) : "";
-                    if (label) {
+                    html += `</div>`;
-                        html += field.label + " ";
-                        html += (field.awPopOver) ? Attr(field, 'awPopOver', fld) : "";
-                        html += "</label>\n";
-                        html += "</span>";
-                    }
 
                     return html;
                 }
@@ -843,7 +814,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         }
 
                         if (field.genHash) {
-                            html += "<span class=\"input-group-btn\"><button type=\"button\" class=\"btn Form-lookupButton\" ng-click=\"genHash('" + fld + "')\" " +
+                            html += "<span class=\"input-group-btn input-group-prepend\"><button type=\"button\" class=\"btn Form-lookupButton\" ng-click=\"genHash('" + fld + "')\" " +
                                 "aw-tool-tip=\"Generate " + field.label + "\" data-placement=\"top\" id=\"" + this.form.name + "_" + fld + "_gen_btn\">" +
                                 "<i class=\"fa fa-magic\"></i></button></span>\n</div>\n";
                         }
@@ -872,9 +843,6 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
 
                         html += "<div class=\"error api-error\" id=\"" + this.form.name + "-" + fld + "-api-error\" ng-bind=\"" + fld + "_api_error\"></div>\n";
 
-                        // Add help panel(s)
-                        html += (field.helpCollapse) ? this.buildHelpCollapse(field.helpCollapse) : '';
-
                         html += "</div>\n";
                     }
 
@@ -890,7 +858,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                             html += (horizontal) ? " " + getFieldWidth() : "";
                             html += "'>\n";
                             // TODO: make it so that the button won't show up if the mode is edit, hasShowInputButton !== true, and there are no contents in the field.
-                            html += "<span class='input-group-btn'>\n";
+                            html += "<span class='input-group-btn input-group-prepend'>\n";
                             html += "<button aw-password-toggle type='button' class='btn btn-default show_input_button Form-passwordButton' ";
                             html += buildId(field, fld + "_show_input_button", this.form);
                             html += `aw-tool-tip='${tooltip}'} aw-tip-placement='top'`;
@@ -966,9 +934,6 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         }
 
                         html += "<div class='error api-error' id='" + this.form.name + "-" + fld + "-api-error' ng-bind='" + fld + "_api_error'>\n</div>\n";
-
-                        // Add help panel(s)
-                        html += (field.helpCollapse) ? this.buildHelpCollapse(field.helpCollapse) : '';
                     }
 
                     //textarea fields
@@ -1104,10 +1069,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                             html += `<div class="error" id="${field.onError.id}" ng-show="${field.onError.ngShow}">${field.onError.text}</div>`;
                         }
                         html += "<div class=\"error api-error\" id=\"" + this.form.name + "-" + fld + "-api-error\" ng-bind=\"" + fld + "_api_error\"></div>\n";
-                        
 
-                        // Add help panel(s)
-                        html += (field.helpCollapse) ? this.buildHelpCollapse(field.helpCollapse) : '';
 
                         html += "</div>\n";
                     }
@@ -1228,17 +1190,8 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         }
 
                         html += "<div class=\"checkbox\">\n";
-                        html += "<label>";
                         html += buildCheckbox(this.form, field, fld, undefined, false);
                         html += (field.icon) ? Icon(field.icon) : "";
-                        if (field.labelBind) {
-                            html += "\t\t<span class=\"Form-inputLabel\" ng-bind=\"" + field.labelBind + "\" translate>\n\t\t</span>";
-                        } else {
-                            html += "<span class=\"Form-inputLabel\" translate>" + field.label + "</span>";
-                        }
-
-                        html += (field.awPopOver) ? this.attr(field, 'awPopOver', fld) : "";
-                        html += "</label>\n";
                         html += "<div class=\"error api-error\" id=\"" + this.form.name + "-" + fld + "-api-error\" ng-bind=\"" +
                             fld + "_api_error\"></div>\n";
                         html += "</div><!-- checkbox -->\n";
@@ -1246,8 +1199,6 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         if (horizontal) {
                             html += "</div>\n";
                         }
-
-                        html += (field.helpCollapse) ? this.buildHelpCollapse(field.helpCollapse) : '';
                     }
 
                     //radio group
@@ -1261,7 +1212,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         html += ">\n";
 
                         for (i = 0; i < field.options.length; i++) {
-                            html += "<label class=\"radio-inline ";
+                            html += "<label class=\"";
                             html += (field.options[i].labelClass) ? ` ${field.options[i].labelClass} "` : "\"";
                             html += (field.options[i].ngShow) ? this.attr(field.options[i], 'ngShow') : "";
                             html += ">";
@@ -1292,9 +1243,6 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         html += "<div class=\"error api-error\" id=\"" + this.form.name + "-" + fld + "-api-error\" ng-bind=\"" +
                             fld + "_api_error\"></div>\n";
 
-                        // Add help panel(s)
-                        html += (field.helpCollapse) ? this.buildHelpCollapse(field.helpCollapse) : '';
-
                         html += "</div>\n";
                     }
 
@@ -1354,7 +1302,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         html += ">\n";
 
                         html += `<div class="input-group Form-mixedInputGroup">`;
-                        html += "<span class=\"input-group-btn\">\n";
+                        html += "<span class=\"input-group-btn input-group-prepend\">\n";
                         html += `<button type="button" class="Form-lookupButton btn" ng-click="${field.ngClick || defaultLookupNgClick}"
                         ${field.readonly || field.showonly}
                         ${this.attr(field, "ngDisabled")}
@@ -1917,13 +1865,11 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                 html += `
                 <div class="list-wrapper"
                     ng-show="${collection.iterator}s.length > 0 && !is_superuser">
-                    <table id="${itm}_table" class="${collection.iterator} List-table">
+                    <div id="${itm}_table" class="${collection.iterator} List-table">
-                        <thead>
+                        <div class="d-flex List-tableHeaderRow">
-                        <tr class="List-tableHeaderRow">
                 `;
-                html += (collection.index === undefined || collection.index !== false) ? "<th class=\"col-xs-1\">#</th>\n" : "";
                 for (fld in collection.fields) {
-                    html += `<th class="List-tableHeader list-header ${collection.fields[fld].columnClass}"
+                    html += `<div class="List-tableHeader list-header ${collection.fields[fld].columnClass}"
                         id="${collection.iterator}-${fld}-header"
                         base-path="${collection.basePath}"
                         collection="${collection.name}"
@@ -1934,22 +1880,20 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         column-no-sort="${collection.fields[fld].nosort}"
                         column-label="${collection.fields[fld].label}">
                         ${collection.fields[fld].label}
-                        </th>`;
+                        </div>`;
                 }
                 if (collection.fieldActions) {
-                    html += "<th class=\"List-tableHeader List-tableHeader--actions\">Actions</th>\n";
+                    html += `<div class="List-tableHeader List-tableHeader--actions ${collection.fieldActions.columnClass}">Actions</div>`;
                 }
-                html += "</tr>\n";
+                html += "</div>";
-                html += "</thead>";
-                html += "<tbody>\n";
 
-                html += "<tr class=\"List-tableRow\" ng-repeat=\"" + collection.iterator + " in " + itm + "\" ";
+                html += "<div class=\"d-flex List-tableRow\" ng-repeat=\"" + collection.iterator + " in " + itm + "\" ";
                 html += "id=\"{{ " + collection.iterator + ".id }}\">\n";
                 if (collection.index === undefined || collection.index !== false) {
-                    html += "<td class=\"List-tableCell";
+                    html += "<div class=\"List-tableCell";
                     html += (collection.fields[fld].class) ? collection.fields[fld].class : "";
                     html += "\">{{ $index + ((" + collection.iterator + "_page - 1) * " +
-                        collection.iterator + "_page_size) + 1 }}.</td>\n";
+                        collection.iterator + "_page_size) + 1 }}.</div>\n";
                 }
                 cnt = 1;
                 base = (collection.base) ? collection.base : itm;
@@ -1968,7 +1912,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
 
                 // Row level actions
                 if (collection.fieldActions) {
-                    html += "<td class=\"List-actionsContainer\"><div class=\"List-tableCell List-actionButtonCell actions\">";
+                    html += `<div class="List-actionsContainer ${collection.fieldActions.columnClass}"><div class="List-tableCell List-actionButtonCell actions">`;
                     for (act in collection.fieldActions) {
                         if (act !== 'columnClass') {
                             fAction = collection.fieldActions[act];
@@ -1996,18 +1940,17 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                             html += "</button>";
                         }
                     }
-                    html += "</div></td>";
+                    html += "</div></div>";
-                    html += "</tr>\n";
+                    html += "</div>\n";
                 }
 
                 // Message for loading
-                html += "<tr ng-show=\"" + collection.iterator + "Loading == true\">\n";
+                html += "<div ng-show=\"" + collection.iterator + "Loading == true\">\n";
-                html += "<td colspan=\"" + cnt + "\"><div class=\"loading-info\">" + i18n._("Loading...") + "</div></td>\n";
+                html += "<div colspan=\"" + cnt + "\"><div class=\"loading-info\">" + i18n._("Loading...") + "</div></div>\n";
-                html += "</tr>\n";
+                html += "</div>\n";
 
                 // End List
-                html += "</tbody>\n";
+                html += "</div>\n";
-                html += "</table>\n";
                 //html += "</div>\n"; // close well
                 html += "</div>\n"; // close list-wrapper div
 
@@ -2029,10 +1972,12 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
             let ngShow = options.ngShow ? `ng-show="${options.ngShow}"` : '';
 
             return `
-                <label class="checkbox-inline Form-checkbox Form-checkbox--subCheckbox" ${ngShow}>
+                <div class="form-check Form-checkbox Form-checkbox--subCheckbox">
-                    <input type="checkbox" id="${options.id}" ${ngModel} ${ngChange} ${ngDisabled} />
+                    <label class="form-check-label" ${ngShow}>
-                    ${options.text}
+                        <input class="form-check-input" type="checkbox" id="${options.id}" ${ngModel} ${ngChange} ${ngDisabled} />
-                </label> `;
+                        ${options.text}
+                    </label>
+                </div>`;
         }
 
     }

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

@@ -471,65 +471,55 @@ angular.module('GeneratorHelpers', [systemStatus.name])
                 fld = params.fld,
                 options = params.options,
                 base = params.base,
-                field = list.fields[fld],
+                field = params.field ? params.field : list.fields[fld],
-                html = '',
+                html = '';
-                classList;
+
+            field.columnClass = field.columnClass ? "List-tableCell " + field.columnClass : "List-tableCell";
+            const classList = Attr(field, 'columnClass');
 
             if (field.type !== undefined && field.type === 'DropDown') {
                 html = DropDown(params);
             } else if (field.type === 'role') {
-                classList = (field.columnClass) ?
-                    Attr(field, 'columnClass') : "";
                 html += `
-<td ${classList}>
+<div ${classList}>
     <role-list delete-target=\"${list.iterator}\" class=\"RoleList\">
     </role-list>
-</td>
+</div>
                 `;
             } else if (field.type === 'team_roles') {
-                classList = (field.columnClass) ?
-                    Attr(field, 'columnClass') : "";
                 html += `
-<td ${classList}>
+<div ${classList}>
     <role-list delete-target=\"${list.iterator}\" class=\"RoleList\" team-role-list="true">
     </role-list>
-</td>
+</div>
                 `;
             } else if (field.type === 'labels') {
                 let showDelete = field.showDelete === undefined ? true : field.showDelete;
-                classList = (field.columnClass) ?
-                    Attr(field, 'columnClass') : "";
                     html += `
-<td ${classList}>
+<div ${classList}>
     <labels-list class=\"LabelList\" show-delete="${showDelete}">
     </labels-list>
-</td>
+</div>
                     `;
             } else if (field.type === 'related_groups') {
                 let showDelete = field.showDelete === undefined ? true : field.showDelete;
-                classList = (field.columnClass) ?
-                    Attr(field, 'columnClass') : "";
                     html += `
-<td ${classList}>
+<div ${classList}>
     <related-groups-labels-list class=\"LabelList\" show-delete="${showDelete}">
     </related-groups-labels-list>
-</td>
+</div>
                     `;
             } else if (field.type === 'owners') {
-                classList = (field.columnClass) ?
-                    Attr(field, 'columnClass') : "";
                 html += `
-<td ${classList}>
+<div ${classList}>
     <owner-list></owner-list>
-</td>
+</div>
                 `;
             } else if (field.type === 'revision') {
-                classList = (field.columnClass) ?
-                Attr(field, 'columnClass') : "";
                 html += `
-                <td ${classList}>
+                <div ${classList}>
                     <at-truncate ng-if="project.scm_revision" string="{{project.scm_revision}}" maxLength="7"></at-truncate>
-                </td>`;
+                </div>`;
             } else if (field.type === 'badgeCount') {
                 html = BadgeCount(params);
             } else if (field.type === 'badgeOnly') {
@@ -537,7 +527,7 @@ angular.module('GeneratorHelpers', [systemStatus.name])
             } else if (field.type === 'template') {
                 html = Template(field);
             } else if (field.type === 'toggle') {
-                html += "<td class=\"List-tableCell " + fld + "-column";
+                html += "<div class=\"ScheduleToggle-listTableCell " + fld + "-column";
                 html += (field['class']) ? " " + field['class'] : "";
                 html += field.columnClass ? " " + field.columnClass : "";
                 html += "\"><div class='ScheduleToggle' ng-class='{\"is-on\": " + list.iterator + ".";
@@ -551,14 +541,14 @@ angular.module('GeneratorHelpers', [systemStatus.name])
                 html += (field.ngDisabled) ? `ng-disabled="${field.ngDisabled}" ` : "";
                 html += "ng-show='!" + list.iterator + "." ;
                 html += (field.flag) ? field.flag : "enabled";
-                html += "' class='ScheduleToggle-switch' ng-click='" + field.ngClick + "'>" + i18n._("OFF") + "</button></div></td>";
+                html += "' class='ScheduleToggle-switch' ng-click='" + field.ngClick + "'>" + i18n._("OFF") + "</button></div></div>";
             } else if (field.type === 'invalid') {
-                html += `<td class='List-tableRow--invalid'><div class='List-tableRow--invalidBar' ng-show="${field.ngShow}"`;
+                html += `<div class='List-tableRow--invalid'><div class='List-tableRow--invalidBar' ng-show="${field.ngShow}"`;
                 html += `aw-tool-tip="${field.awToolTip}" data-placement=${field.dataPlacement}>`;
                 html += "<i class='fa fa-exclamation'></i>";
-                html += "</div></td>";
+                html += "</div></div>";
             } else {
-                html += "<td class=\"List-tableCell " + fld + "-column";
+                html += "<div class=\"List-tableCell " + fld + "-column";
                 html += (field['class']) ? " " + field['class'] : "";
                 if (options.mode === 'lookup' && field.modalColumnClass) {
                     html += " " + field.modalColumnClass;
@@ -704,49 +694,13 @@ angular.module('GeneratorHelpers', [systemStatus.name])
                                 </span>`;
                     }
                 }
-
+                html += "</div>";
             }
-            return html += "</td>\n";
+            return html;
         };
     }
 ])
 
-.factory('HelpCollapse', function () {
-    return function (params) {
-
-        var hdr = params.hdr,
-            content = params.content,
-            show = params.show,
-            ngHide = params.ngHide,
-            idx = params.idx,
-            bind = params.bind,
-            html = '';
-
-        html += "<div class=\"panel-group collapsible-help\" ";
-        html += (show) ? "ng-show=\"" + show + "\" " : "";
-        html += (ngHide) ? "ng-hide=\"" + ngHide  + "\" " : "";
-        html += ">\n";
-        html += "<div class=\"panel panel-default\">\n";
-        html += "<div class=\"panel-heading\" ng-click=\"accordionToggle('#accordion" + idx + "')\">\n";
-        html += "<h4 class=\"panel-title\">\n";
-        //html += "<i class=\"fa fa-question-circle help-collapse\"></i> " + hdr;
-        html += hdr;
-        html += "<i class=\"fa fa-minus pull-right collapse-help-icon\" id=\"accordion" + idx + "-icon\"></i>";
-        html += "</h4>\n";
-        html += "</div>\n";
-        html += "<div id=\"accordion" + idx + "\" class=\"panel-collapse collapse in\">\n";
-        html += "<div class=\"panel-body\" ";
-        html += (bind) ? "ng-bind-html=\"" + bind + "\" " : "";
-        html += ">\n";
-        html += (!bind) ? content : "";
-        html += "</div>\n";
-        html += "</div>\n";
-        html += "</div>\n";
-        html += "</div>\n";
-        return html;
-    };
-})
-
 .factory('ActionButton', function () {
     return function (options) {
 

awx/ui/client/src/shared/instance-groups-multiselect/instance-groups-modal/instance-groups-modal.directive.js

@@ -58,7 +58,8 @@ export default ['templateUrl', '$window', function(templateUrl, $window) {
                             let html = `${GenerateList.build({
                                 list: instanceGroupList,
                                 input_type: 'instance-groups-modal-body',
-                                hideViewPerPage: true
+                                hideViewPerPage: true,
+                                mode: 'lookup'
                             })}`;
 
                             $scope.list = instanceGroupList;

awx/ui/client/src/shared/instance-groups-multiselect/instance-groups-modal/instance-groups-modal.partial.html

@@ -14,7 +14,7 @@
                 <div id="instance-groups-modal-body"> {{ instance_group }} </div>
             </div>
             <div class="modal-footer">
-                <button type="button" ng-click="cancelForm()" class="Lookup-cancel btn btn-default" translate>CANCEL</button>
+                <button type="button" ng-click="cancelForm()" class="btn btn-default" translate>CANCEL</button>
                 <button type="button" ng-click="saveForm()" ng-disabled="!instance_groups || instance_groups.length === 0" class="Lookup-save btn btn-primary" translate>SAVE</button>
             </div>
         </div>