Fix job result detail and standard out panel styles

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

@@ -6,6 +6,7 @@
         border-top-left-radius: 4px;
         border-top-right-radius: 4px;
         border-bottom: none;
+        margin-top: 15px;
 
         & > div {
             user-select: none;
@@ -123,7 +124,7 @@
 
     &-container {
         font-family: monospace;
-        height: calc(~"100vh - 240px");
+        height: 100%;
         overflow-y: scroll;
         font-size: 15px;
         border: 1px solid @at-gray-b7;
@@ -143,6 +144,11 @@
             }
         }
     }
+
+    &--fullscreen {
+        grid-column-start: 1;
+        grid-column-end: 3;
+    }
 }
 
 .at-mixin-event() {
@@ -201,12 +207,12 @@
     flex-wrap: wrap;
 }
 
-
 // Status Bar -----------------------------------------------------------------------------
 .HostStatusBar {
     display: flex;
     flex: 0 0 auto;
     width: 100%;
+    margin-bottom: 15px;
 }
 
 .HostStatusBar-ok,
@@ -282,49 +288,28 @@
 
 }
 
+.HostStatusBar-tooltip.top {
+    margin-top: 4px;
+}
+
 // Job Details ---------------------------------------------------------------------------------
 
 @breakpoint-md: 1200px;
 
-.JobResults {
-    .OnePlusTwo-container(100%, @breakpoint-md);
+.JobResults-container {
+    display: grid;
+    grid-gap: 20px;
+    grid-template-columns: minmax(300px, 1fr) minmax(500px, 2fr);
+    grid-template-rows: minmax(500px, ~"calc(100vh - 140px)");
 
-    &.fullscreen {
-        .JobResults-rightSide {
-            max-width: 100%;
-        }
-    }
-}
-
-.JobResults-leftSide {
-    .OnePlusTwo-left--panel(100%, @breakpoint-md);
-    max-width: 30%;
-    height: ~"calc(100vh - 177px)";
-
-    @media screen and (max-width: @breakpoint-md) {
-        max-width: 100%;
-    }
-}
-
-.JobResults-rightSide {
-    .OnePlusTwo-right--panel(100%, @breakpoint-md);
-    height: ~"calc(100vh - 177px)";
-
-    @media (max-width: @breakpoint-md - 1px) {
-        padding-right: 15px;
+    .at-Panel {
+        overflow-y: scroll;
     }
 }
 
 .JobResults-detailsPanel {
-    overflow-y: scroll;
-}
-
-.JobResults-stdoutActionButton--active {
-    display: none;
-    visibility: hidden;
-    flex:none;
-    width:0px;
-    padding-right: 0px;
+    display: flex;
+    flex-direction: column;
 }
 
 .JobResults-panelHeader {
@@ -352,8 +337,8 @@
     flex-wrap: wrap;
 }
 
-.JobResults-codeMirrorResultRowLabel{
-    font-size: 12px;
+.JobResults-resultRow #cm-variables-container {
+    width: 100%;
 }
 
 .JobResults-resultRowLabel {
@@ -416,109 +401,10 @@
     padding-right: 10px;
 }
 
-.JobResults-badgeRow {
-    display: flex;
-    align-items: center;
-    margin-right: 5px;
-}
-
-.JobResults-badgeTitle{
-    color: @default-interface-txt;
-    font-size: 14px;
-    margin-right: 10px;
-    font-weight: normal;
-    text-transform: uppercase;
-    margin-left: 20px;
-}
-
-@media (max-width: @breakpoint-md) {
-    .JobResults-detailsPanel {
-        overflow-y: auto;
-    }
-
-    .JobResults-rightSide {
-        height: inherit;
-    }
-}
-
-.JobResults-timeBadge {
-    float:right;
-    font-size: 11px;
-    font-weight: normal;
-    padding: 1px 10px;
-    height: 14px;
-    margin: 3px 15px;
-    width: 80px;
-    background-color: @default-bg;
-    border-radius: 5px;
-    color: @default-interface-txt;
-    margin-right: -5px;
-}
-
-.JobResults-panelRight {
-    display: flex;
-    flex-direction: column;
-}
-
-.JobResults-panelRight .SmartSearch-bar {
-    width: 100%;
-}
-
-.JobResults-panelRightTitle{
-    flex-wrap: wrap;
-}
-
-.JobResults-panelRightTitleText{
-    word-wrap: break-word;
-    word-break: break-all;
-    max-width: 100%;
-}
-
-.JobResults-badgeAndActionRow{
-    display:flex;
-    flex: 1 0 auto;
-    justify-content: flex-end;
-    flex-wrap: wrap;
-    max-width: 100%;
-}
-
 .StandardOut-panelHeader {
     flex: initial;
 }
 
-.StandardOut-panelHeader--jobIsRunning {
-    margin-bottom: 20px;
-}
-
-host-status-bar {
-    flex: initial;
-    margin-bottom: 20px;
-}
-
-smart-search {
-    flex: initial;
-}
-
-job-results-standard-out {
-    flex: 1;
-    flex-basis: auto;
-    height: ~"calc(100% - 800px)";
-    display: flex;
-    border: 1px solid @d7grey;
-    border-radius: 5px;
-    margin-top: 20px;
-}
-@media screen and (max-width: @breakpoint-md) {
-  job-results-standard-out {
-      height: auto;
-  }
-}
-
-.JobResults-extraVarsHelp {
-    margin-left: 10px;
-    color: @default-icon;
-}
-
 .JobResults-seeMoreLess {
     color: #337AB7;
     margin: 4px 0px;
@@ -528,3 +414,10 @@ job-results-standard-out {
     border-radius: 5px;
     font-size: 11px;
 }
+
+@media screen and (max-width: @breakpoint-md) {
+    .JobResults-container {
+        display: flex;
+        flex-direction: column;
+    }
+}

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

@@ -40,7 +40,6 @@
 </div>
 
 <!-- LEFT PANE DETAILS GROUP -->
-<div>
 <!-- STATUS DETAIL -->
 <div class="JobResults-resultRow">
     <label class="JobResults-resultRowLabel">{{ vm.status.label }}</label>
@@ -252,11 +251,12 @@
 
 <!-- EXTRA VARIABLES DETAIL -->
 <at-code-mirror
+    class="JobResults-resultRow"
     ng-if="vm.extraVars"
     variables="{{ vm.extraVars.value }}"
     tooltip="{{ vm.extraVars.tooltip }}"
     label="{{ vm.extraVars.label}}"
-        label-class="JobResults-codeMirrorResultRowLabel"
+    label-class="JobResults-resultRowLabel"
     disabled="{{ vm.extraVars.disabled }}">
 </at-code-mirror>
 
@@ -284,4 +284,3 @@
         </div>
     </div>
 </div>
-</div>

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

@@ -1,14 +1,13 @@
-<div class="container-fluid">
 <div ui-view></div>
-    <div class="col-md-4" ng-show="!vm.fullscreen.isFullscreen">
-        <at-panel>
+<div class="JobResults-container">
+    <at-panel ng-show="!vm.fullscreen.isFullscreen">
         <at-job-details resource="vm.resource"></at-job-details>
     </at-panel>
-    </div>
 
-    <div ng-class="vm.fullscreen.isFullscreen ? 'col-md-12' : 'col-md-8'">
-        <at-panel class="at-Stdout">
-            <div class="at-Panel-headingTitle">{{ vm.title }}</div>
+    <at-panel class="at-Stdout" ng-class="{'at-Stdout--fullscreen': vm.fullscreen.isFullscreen}">
+        <div class="at-Panel-headingTitle">
+            {{ vm.title }}
+        </div>
         <at-job-stats
             resource="vm.resource"
             fullscreen="vm.fullscreen">
@@ -61,4 +60,3 @@
         </div>
     </at-panel>
 </div>
-</div>

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

@@ -42,40 +42,47 @@
         ng-show="!vm.running"
         data-placement="top"
         aw-tool-tip="{{ vm.tooltips.ok }}"
-        data-tip-watch="vm.tooltips.ok">
+        data-tip-watch="vm.tooltips.ok"
+        tooltip-outer-class="HostStatusBar-tooltip">
     </div>
     <div class="HostStatusBar-skipped"
         ng-show="!vm.running"
         data-placement="top"
         aw-tool-tip="{{ vm.tooltips.skipped }}"
-        data-tip-watch="vm.tooltips.skipped">
+        data-tip-watch="vm.tooltips.skipped"
+        tooltip-outer-class="HostStatusBar-tooltip">
     </div>
     <div class="HostStatusBar-changed"
         ng-show="!vm.running"
         data-placement="top"
         aw-tool-tip="{{ vm.tooltips.changed }}"
-        data-tip-watch="vm.tooltips.changed">
+        data-tip-watch="vm.tooltips.changed"
+        tooltip-outer-class="HostStatusBar-tooltip">
     </div>
     <div class="HostStatusBar-failures"
         ng-show="!vm.running"
         data-placement="top"
         aw-tool-tip="{{ vm.tooltips.failures }}"
-        data-tip-watch="vm.tooltips.failures">
+        data-tip-watch="vm.tooltips.failures"
+        tooltip-outer-class="HostStatusBar-tooltip">
     </div>
     <div class="HostStatusBar-dark"
         ng-show="!vm.running"
         data-placement="top"
         aw-tool-tip="{{ vm.tooltips.dark }}"
-        data-tip-watch="vm.tooltips.dark">
+        data-tip-watch="vm.tooltips.dark"
+        tooltip-outer-class="HostStatusBar-tooltip">
     </div>
     <div class="HostStatusBar-noData"
         ng-show="vm.running"
         data-placement="top"
-        aw-tool-tip="{{:: vm.tooltips.running }}">
+        aw-tool-tip="{{:: vm.tooltips.running }}"
+        tooltip-outer-class="HostStatusBar-tooltip">
     </div>
     <div class="HostStatusBar-noData"
         ng-show="!vm.running && !vm.statsAreAvailable"
         data-placement="top"
-        aw-tool-tip="{{:: vm.tooltips.unavailable }}">
+        aw-tool-tip="{{:: vm.tooltips.unavailable }}"
+        tooltip-outer-class="HostStatusBar-tooltip">
     </div>
 </div>