From ba628893d19b7da4fe433062a91c9f7a17184e3e Mon Sep 17 00:00:00 2001
From: jaredevantabor <jtabor@ansible.com>
Date: Fri, 3 Mar 2017 18:27:40 -0800
Subject: [PATCH] styling to support long job titles on job results' stdout
 panel

---
 .../src/job-results/job-results.block.less    |  18 +++
 .../src/job-results/job-results.partial.html  | 131 +++++++++---------
 2 files changed, 84 insertions(+), 65 deletions(-)

diff --git a/awx/ui/client/src/job-results/job-results.block.less b/awx/ui/client/src/job-results/job-results.block.less
index 33a449c67f..f9d0718b10 100644
--- a/awx/ui/client/src/job-results/job-results.block.less
+++ b/awx/ui/client/src/job-results/job-results.block.less
@@ -161,6 +161,24 @@
     flex-direction: column;
 }
 
+.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;
 }
diff --git a/awx/ui/client/src/job-results/job-results.partial.html b/awx/ui/client/src/job-results/job-results.partial.html
index e48174311d..c1c9211209 100644
--- a/awx/ui/client/src/job-results/job-results.partial.html
+++ b/awx/ui/client/src/job-results/job-results.partial.html
@@ -431,8 +431,8 @@
             <div class="Panel JobResults-panelRight">
 
                 <!-- RIGHT PANE HEADER -->
-                <div class="StandardOut-panelHeader">
-                    <div class="StandardOut-panelHeaderText">
+                <div class="StandardOut-panelHeader JobResults-panelRightTitle">
+                    <div class="StandardOut-panelHeaderText JobResults-panelRightTitleText">
                         <i class="JobResults-statusResultIcon
                             fa icon-job-{{ job_status }}"
                             ng-show="stdoutFullScreen"
@@ -443,76 +443,77 @@
                         </i>
                         {{ job.name }}
                     </div>
+                    <div class="JobResults-badgeAndActionRow">
+                        <!-- HEADER COUNTS -->
+                        <div class="JobResults-badgeRow">
+                            <!-- PLAYS COUNT -->
+                            <div class="JobResults-badgeTitle">
+                                Plays
+                            </div>
+                            <span class="badge List-titleBadge">
+                                {{ playCount || 0}}
+                            </span>
 
-                    <!-- HEADER COUNTS -->
-                    <div class="JobResults-badgeRow">
-                        <!-- PLAYS COUNT -->
-                        <div class="JobResults-badgeTitle">
-                            Plays
+                            <!-- TASKS COUNT -->
+                            <div class="JobResults-badgeTitle">
+                                Tasks
+                            </div>
+                            <span class="badge List-titleBadge">
+                                {{ taskCount || 0}}
+                            </span>
+
+                            <!-- HOSTS COUNT -->
+                            <div class="JobResults-badgeTitle">
+                                Hosts
+                            </div>
+                            <span class="badge List-titleBadge"
+                                ng-if="jobFinished">
+                                {{ hostCount || 0}}
+                            </span>
+
+                            <span class="badge List-titleBadge"
+                                aw-tool-tip="The host count will update when the job is complete."
+                                data-placement="top"
+                                ng-if="!jobFinished">
+                                <i class="fa fa-ellipsis-h"></i>
+                            </span>
+
+                            <!-- ELAPSED TIME -->
+                            <div class="JobResults-badgeTitle">
+                                Elapsed
+                            </div>
+                            <span class="badge List-titleBadge">
+                                {{ job.elapsed * 1000 | duration: "hh:mm:ss" }}
+                            </span>
                         </div>
-                        <span class="badge List-titleBadge">
-                            {{ playCount || 0}}
-                        </span>
 
-                        <!-- TASKS COUNT -->
-                        <div class="JobResults-badgeTitle">
-                            Tasks
-                        </div>
-                        <span class="badge List-titleBadge">
-                            {{ taskCount || 0}}
-                        </span>
+                        <!-- HEADER ACTIONS -->
+                        <div class="StandardOut-panelHeaderActions">
 
-                        <!-- HOSTS COUNT -->
-                        <div class="JobResults-badgeTitle">
-                            Hosts
-                        </div>
-                        <span class="badge List-titleBadge"
-                            ng-if="jobFinished">
-                            {{ hostCount || 0}}
-                        </span>
-
-                        <span class="badge List-titleBadge"
-                            aw-tool-tip="The host count will update when the job is complete."
-                            data-placement="top"
-                            ng-if="!jobFinished">
-                            <i class="fa fa-ellipsis-h"></i>
-                        </span>
-
-                        <!-- ELAPSED TIME -->
-                        <div class="JobResults-badgeTitle">
-                            Elapsed
-                        </div>
-                        <span class="badge List-titleBadge">
-                            {{ job.elapsed * 1000 | duration: "hh:mm:ss" }}
-                        </span>
-                    </div>
-
-                    <!-- HEADER ACTIONS -->
-                    <div class="StandardOut-panelHeaderActions">
-
-                        <!-- FULL-SCREEN TOGGLE ACTION -->
-                        <button class="StandardOut-actionButton"
-                            aw-tool-tip="{{ toggleStdoutFullscreenTooltip }}"
-                            data-tip-watch="toggleStdoutFullscreenTooltip"
-                            data-placement="top"
-                            ng-class="{'StandardOut-actionButton--active': stdoutFullScreen}"
-                            ng-click="toggleStdoutFullscreen()">
-                            <i class="fa fa-arrows-alt"></i>
-                        </button>
-
-                        <!-- DOWNLOAD ACTION -->
-                        <a ng-show="job.status === 'failed' ||
-                            job.status === 'successful' ||
-                            job.status === 'canceled'"
-                            href="/api/v1/jobs/{{ job.id }}/stdout?format=txt_download">
+                            <!-- FULL-SCREEN TOGGLE ACTION -->
                             <button class="StandardOut-actionButton"
-                                aw-tool-tip="{{ standardOutTooltip }}"
-                                data-tip-watch="standardOutTooltip"
-                                data-placement="top">
-                                <i class="fa fa-download"></i>
+                                aw-tool-tip="{{ toggleStdoutFullscreenTooltip }}"
+                                data-tip-watch="toggleStdoutFullscreenTooltip"
+                                data-placement="top"
+                                ng-class="{'StandardOut-actionButton--active': stdoutFullScreen}"
+                                ng-click="toggleStdoutFullscreen()">
+                                <i class="fa fa-arrows-alt"></i>
                             </button>
-                        </a>
 
+                            <!-- DOWNLOAD ACTION -->
+                            <a ng-show="job.status === 'failed' ||
+                                job.status === 'successful' ||
+                                job.status === 'canceled'"
+                                href="/api/v1/jobs/{{ job.id }}/stdout?format=txt_download">
+                                <button class="StandardOut-actionButton"
+                                    aw-tool-tip="{{ standardOutTooltip }}"
+                                    data-tip-watch="standardOutTooltip"
+                                    data-placement="top">
+                                    <i class="fa fa-download"></i>
+                                </button>
+                            </a>
+
+                        </div>
                     </div>
                 </div>
                 <host-status-bar></host-status-bar>