From 35bd98eb49807e82c2ac113b66b6cc08c4e11cde Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Thu, 26 Apr 2018 16:36:53 -0400 Subject: [PATCH] Fix job result detail and standard out panel styles --- awx/ui/client/features/output/_index.less | 169 ++----- .../features/output/details.partial.html | 429 +++++++++--------- awx/ui/client/features/output/index.view.html | 114 +++-- .../client/features/output/stats.partial.html | 21 +- 4 files changed, 315 insertions(+), 418 deletions(-) diff --git a/awx/ui/client/features/output/_index.less b/awx/ui/client/features/output/_index.less index 4238573fb3..0bb8a72aba 100644 --- a/awx/ui/client/features/output/_index.less +++ b/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%; - } + .at-Panel { + overflow-y: scroll; } } -.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; - } -} - -.JobResults-detailsPanel{ - overflow-y: scroll; -} - -.JobResults-stdoutActionButton--active { - display: none; - visibility: hidden; - flex:none; - width:0px; - padding-right: 0px; +.JobResults-detailsPanel { + 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; + } +} \ No newline at end of file diff --git a/awx/ui/client/features/output/details.partial.html b/awx/ui/client/features/output/details.partial.html index d873c4fbb5..5eb4f5b146 100644 --- a/awx/ui/client/features/output/details.partial.html +++ b/awx/ui/client/features/output/details.partial.html @@ -40,248 +40,247 @@ -
- -
- -
- - {{ vm.status.value }} -
+ +
+ +
+ + {{ vm.status.value }}
+
- -
- -
- {{ vm.jobExplanation.less }} - ... - - Show More - -
-
- {{ vm.jobExplanation.more }} - - Show Less - -
+ +
+ +
+ {{ vm.jobExplanation.less }} + ... + + Show More +
- - -
- -
- {{ vm.started.value }} -
+
+ {{ vm.jobExplanation.more }} + + Show Less +
+
- -
- -
- {{ vm.finished.value }} -
+ +
+ +
+ {{ vm.started.value }}
+
- -
- -
{{ vm.moduleArgs.value }}
+ +
+ +
+ {{ vm.finished.value }}
+
- -
- -
- {{ vm.resultTraceback.less }} - ... - - Show More - -
-
- {{ vm.resultTraceback.more }} - - Show Less - -
+ +
+ +
{{ vm.moduleArgs.value }}
+
+ + +
+ +
+ {{ vm.resultTraceback.less }} + ... + + Show More +
- - -
- -
- - {{ vm.jobTemplate.value }} - - - - W - -
+
+ {{ vm.resultTraceback.more }} + + Show Less +
+
- -
- -
{{ vm.jobType.value }}
+ +
+ +
+ + {{ vm.jobTemplate.value }} + + + + W +
+
- -
- -
- - {{ vm.launchedBy.value }} - -
-
+ +
+ +
{{ vm.jobType.value }}
+
+ + +
+ +
+ {{ vm.launchedBy.value }} -
+
- - -
- -
- - {{ vm.inventory.value }} - -
+
+ {{ vm.launchedBy.value }}
+
- -
- -
- - - - - {{ vm.project.value }} - -
+ +
+ +
+ + {{ vm.inventory.value }} +
+
- -
- - + +
+ +
+ + + + + {{ vm.project.value }} +
+
- -
- -
{{ vm.playbook.value }}
+ +
+ + +
+ + +
+ +
{{ vm.playbook.value }}
+
+ + +
+ +
+ + {{ vm.credential.value }} +
+
- -
- -
- - {{ vm.credential.value }} - -
+ +
+ +
{{ vm.forks.value }}
+
+ + +
+ +
{{ vm.limit.value }}
+
+ + +
+ +
{{ vm.verbosity.value }}
+
+ + +
+ +
+ {{ vm.instanceGroup.value }} + + {{ vm.instanceGroup.isolated }} +
+
- -
- -
{{ vm.forks.value }}
+ +
+ +
{{ vm.jobTags.value }}
+
+ + +
+ +
{{ vm.skipTags.value }}
+
+ + + + + + +
+
+ + Labels + + + + Labels + +
- - -
- -
{{ vm.limit.value }}
-
- - -
- -
{{ vm.verbosity.value }}
-
- - -
- -
- {{ vm.instanceGroup.value }} - - {{ vm.instanceGroup.isolated }} - -
-
- - -
- -
{{ vm.jobTags.value }}
-
- - -
- -
{{ vm.skipTags.value }}
-
- - - - - - -
-
- - Labels - - - - Labels - - -
-
-
-
{{ label }}
-
+
+
+
{{ label }}
diff --git a/awx/ui/client/features/output/index.view.html b/awx/ui/client/features/output/index.view.html index b3bb6e95bc..f25171f9f2 100644 --- a/awx/ui/client/features/output/index.view.html +++ b/awx/ui/client/features/output/index.view.html @@ -1,64 +1,62 @@ -
-
-
- - - -
+
+
+ + + -
- -
{{ vm.title }}
- - - + +
+ {{ vm.title }} +
+ + + -
-
- -
- -
- -
-
- -
-
- -
-
- -
- -
+
+
+
- 
-                
-                    
-                        
-                            
-                            
-                            
-                        
-                    
-                    
-                
 

-
- -
-
-

-

Back to Top

-
- -
+
+
- -
+
+ +
+
+ +
+
+ +
+ +
+
+ + 
+            
+                
+                    
+                        
+                        
+                        
+                    
+                
+                
+            
 

+
+ +
+
+

+

Back to Top

+
+ +
+
+
diff --git a/awx/ui/client/features/output/stats.partial.html b/awx/ui/client/features/output/stats.partial.html index 70d980ed33..6427735236 100644 --- a/awx/ui/client/features/output/stats.partial.html +++ b/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">
+ data-tip-watch="vm.tooltips.skipped" + tooltip-outer-class="HostStatusBar-tooltip">
+ data-tip-watch="vm.tooltips.changed" + tooltip-outer-class="HostStatusBar-tooltip">
+ data-tip-watch="vm.tooltips.failures" + tooltip-outer-class="HostStatusBar-tooltip">
+ data-tip-watch="vm.tooltips.dark" + tooltip-outer-class="HostStatusBar-tooltip">
+ aw-tool-tip="{{:: vm.tooltips.running }}" + tooltip-outer-class="HostStatusBar-tooltip">
+ aw-tool-tip="{{:: vm.tooltips.unavailable }}" + tooltip-outer-class="HostStatusBar-tooltip">