From 57ce7138915decbc1585c183988874f08cf6b07c Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Tue, 2 May 2017 10:54:45 -0400 Subject: [PATCH 1/4] Stretch standard out panes to page height * Fix #5962 * Give StandardOut-container a fixed height so flex children will stretch to fill 100%. * Edit overflow and height properties to make panel content scrollable and visible --- awx/ui/client/legacy-styles/lists.less | 2 +- awx/ui/client/src/shared/layouts/one-plus-one.less | 1 + awx/ui/client/src/standard-out/standard-out.block.less | 9 +++------ 3 files changed, 5 insertions(+), 7 deletions(-) diff --git a/awx/ui/client/legacy-styles/lists.less b/awx/ui/client/legacy-styles/lists.less index 96b24aeb69..06a8b5b3ef 100644 --- a/awx/ui/client/legacy-styles/lists.less +++ b/awx/ui/client/legacy-styles/lists.less @@ -60,7 +60,7 @@ table, tbody { height: 40px; font-size: 14px; color: @list-item; - border-bottom: 1px solid #d7d7d7; + border-bottom: 1px solid @default-white-button-bord; } .List-tableRow:last-of-type { diff --git a/awx/ui/client/src/shared/layouts/one-plus-one.less b/awx/ui/client/src/shared/layouts/one-plus-one.less index 10be58981d..e7479cdc5b 100644 --- a/awx/ui/client/src/shared/layouts/one-plus-one.less +++ b/awx/ui/client/src/shared/layouts/one-plus-one.less @@ -13,6 +13,7 @@ flex-direction: row; @media screen and(max-width: @breakpoint){ flex-direction: column; + height: 100%; } } diff --git a/awx/ui/client/src/standard-out/standard-out.block.less b/awx/ui/client/src/standard-out/standard-out.block.less index 684677dee8..fe55a2b766 100644 --- a/awx/ui/client/src/standard-out/standard-out.block.less +++ b/awx/ui/client/src/standard-out/standard-out.block.less @@ -8,6 +8,7 @@ standard-out-log { flex: 5; display: flex; + overflow: hidden; } .StandardOut-preContent{ @@ -17,7 +18,7 @@ standard-out-log { } .StandardOut-container { - .OnePlusOne-container(100%, @breakpoint-md); + .OnePlusOne-container(80vh, @breakpoint-md); &.fullscreen { .StandardOut-rightPanel { @@ -47,7 +48,7 @@ standard-out-log { } .StandardOut-consoleOutput { - height: 493px; + height: 94%; } } @@ -57,7 +58,6 @@ standard-out-log { .StandardOut-consoleOutput { margin-top: 25px; - background-color: @default-secondary-bg; border-radius: 5px; min-height: 300px; max-height: 100vh; @@ -65,9 +65,6 @@ standard-out-log { width: 100%; overflow: auto; - #pre-container { - overflow: visible !important; - } } .StandardOut-details { From fae6573ae2801791fa7d347d4a4b81973dd2530a Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Wed, 3 May 2017 11:55:09 -0400 Subject: [PATCH 2/4] Stretch left panel to height of browser --- .../client/src/standard-out/standard-out.block.less | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/awx/ui/client/src/standard-out/standard-out.block.less b/awx/ui/client/src/standard-out/standard-out.block.less index fe55a2b766..eea5d59149 100644 --- a/awx/ui/client/src/standard-out/standard-out.block.less +++ b/awx/ui/client/src/standard-out/standard-out.block.less @@ -8,7 +8,6 @@ standard-out-log { flex: 5; display: flex; - overflow: hidden; } .StandardOut-preContent{ @@ -18,7 +17,7 @@ standard-out-log { } .StandardOut-container { - .OnePlusOne-container(80vh, @breakpoint-md); + .OnePlusOne-container(100%, @breakpoint-md); &.fullscreen { .StandardOut-rightPanel { @@ -28,11 +27,16 @@ standard-out-log { } .StandardOut-leftPanel { - .OnePlusOne-panel--left(100%, @breakpoint-md); + .OnePlusOne-panel--left(auto, @breakpoint-md); max-width: 600px; + display: flex; @media (max-width: @breakpoint-md - 1px) { max-width: 100%; } + + .Panel { + height: auto; + } } .StandardOut-rightPanel { @@ -48,7 +52,7 @@ standard-out-log { } .StandardOut-consoleOutput { - height: 94%; + height: 493px; } } @@ -63,7 +67,6 @@ standard-out-log { max-height: 100vh; height: ~"calc(100vh - 245px)"; width: 100%; - overflow: auto; } From c49f7dddec43364ea038a7be10e02bb3c4e0efd2 Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Wed, 3 May 2017 13:18:20 -0400 Subject: [PATCH 3/4] Fix height responsiveness --- awx/ui/client/legacy-styles/stdout.less | 2 +- awx/ui/client/src/shared/layouts/one-plus-one.less | 2 +- .../client/src/standard-out/standard-out.block.less | 11 +++-------- 3 files changed, 5 insertions(+), 10 deletions(-) diff --git a/awx/ui/client/legacy-styles/stdout.less b/awx/ui/client/legacy-styles/stdout.less index 822c10e759..68ac91490c 100644 --- a/awx/ui/client/legacy-styles/stdout.less +++ b/awx/ui/client/legacy-styles/stdout.less @@ -9,7 +9,7 @@ @import "./client/src/shared/branding/colors.less"; #jobs-stdout { - margin-bottom: 20px; + margin-bottom: 0px; #job-status { label { diff --git a/awx/ui/client/src/shared/layouts/one-plus-one.less b/awx/ui/client/src/shared/layouts/one-plus-one.less index e7479cdc5b..4b36d0e34c 100644 --- a/awx/ui/client/src/shared/layouts/one-plus-one.less +++ b/awx/ui/client/src/shared/layouts/one-plus-one.less @@ -8,7 +8,7 @@ .OnePlusOne-container(@height: 100%; @breakpoint: 900px){ - height: @height; + height: ~"calc(100vh - 150px)"; display: flex; flex-direction: row; @media screen and(max-width: @breakpoint){ diff --git a/awx/ui/client/src/standard-out/standard-out.block.less b/awx/ui/client/src/standard-out/standard-out.block.less index eea5d59149..881c2c2437 100644 --- a/awx/ui/client/src/standard-out/standard-out.block.less +++ b/awx/ui/client/src/standard-out/standard-out.block.less @@ -35,7 +35,8 @@ standard-out-log { } .Panel { - height: auto; + height: ~"calc(100% - 20px)"; + overflow-y: scroll; } } @@ -49,10 +50,7 @@ standard-out-log { .Panel { display: flex; flex-direction: column; - } - - .StandardOut-consoleOutput { - height: 493px; + height: ~"calc(100% - 20px)"; } } @@ -63,9 +61,6 @@ standard-out-log { .StandardOut-consoleOutput { margin-top: 25px; border-radius: 5px; - min-height: 300px; - max-height: 100vh; - height: ~"calc(100vh - 245px)"; width: 100%; overflow: auto; } From 82d37d3fec3d41681fbfc42a2994da2a849c76ce Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Wed, 3 May 2017 13:24:55 -0400 Subject: [PATCH 4/4] Change left panel height to 100% for consistency --- awx/ui/client/src/standard-out/standard-out.block.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/awx/ui/client/src/standard-out/standard-out.block.less b/awx/ui/client/src/standard-out/standard-out.block.less index 881c2c2437..7867e4d94f 100644 --- a/awx/ui/client/src/standard-out/standard-out.block.less +++ b/awx/ui/client/src/standard-out/standard-out.block.less @@ -27,7 +27,7 @@ standard-out-log { } .StandardOut-leftPanel { - .OnePlusOne-panel--left(auto, @breakpoint-md); + .OnePlusOne-panel--left(100%, @breakpoint-md); max-width: 600px; display: flex; @media (max-width: @breakpoint-md - 1px) {