External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-28 06:15:04 -02:30
Code Issues Packages Projects Releases Wiki Activity

styling to support long job titles on job results' stdout panel

Browse Source
This commit is contained in:
jaredevantabor
2017-03-03 18:27:40 -08:00
committed by Matthew Jones
parent 4005cf927e
commit ba628893d1
2 changed files with 84 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
awx/ui/client/src/job-results/job-results.block.less
View File

@@ -161,6 +161,24 @@
flex-direction: column; 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 { .StandardOut-panelHeader {
flex: initial; flex: initial;
} }

131
awx/ui/client/src/job-results/job-results.partial.html
View File

@@ -431,8 +431,8 @@
<div class="Panel JobResults-panelRight"> <div class="Panel JobResults-panelRight">
<!-- RIGHT PANE HEADER --> <!-- RIGHT PANE HEADER -->
<div class="StandardOut-panelHeader"> <div class="StandardOut-panelHeader JobResults-panelRightTitle">
<div class="StandardOut-panelHeaderText"> <div class="StandardOut-panelHeaderText JobResults-panelRightTitleText">
<i class="JobResults-statusResultIcon <i class="JobResults-statusResultIcon
fa icon-job-{{ job_status }}" fa icon-job-{{ job_status }}"
ng-show="stdoutFullScreen" ng-show="stdoutFullScreen"
@@ -443,76 +443,77 @@
</i> </i>
{{ job.name }} {{ job.name }}
</div> </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 --> <!-- TASKS COUNT -->
<div class="JobResults-badgeRow"> <div class="JobResults-badgeTitle">
<!-- PLAYS COUNT --> Tasks
<div class="JobResults-badgeTitle"> </div>
Plays <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> </div>
<span class="badge List-titleBadge">
{{ playCount || 0}}
</span>
<!-- TASKS COUNT --> <!-- HEADER ACTIONS -->
<div class="JobResults-badgeTitle"> <div class="StandardOut-panelHeaderActions">
Tasks
</div>
<span class="badge List-titleBadge">
{{ taskCount || 0}}
</span>
<!-- HOSTS COUNT --> <!-- FULL-SCREEN TOGGLE ACTION -->
<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">
<button class="StandardOut-actionButton" <button class="StandardOut-actionButton"
aw-tool-tip="{{ standardOutTooltip }}" aw-tool-tip="{{ toggleStdoutFullscreenTooltip }}"
data-tip-watch="standardOutTooltip" data-tip-watch="toggleStdoutFullscreenTooltip"
data-placement="top"> data-placement="top"
<i class="fa fa-download"></i> ng-class="{'StandardOut-actionButton--active': stdoutFullScreen}"
ng-click="toggleStdoutFullscreen()">
<i class="fa fa-arrows-alt"></i>
</button> </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>
</div> </div>
<host-status-bar></host-status-bar> <host-status-bar></host-status-bar>