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

fixing workflow results page for long workflow titles

Browse Source
This commit is contained in:
jaredevantabor
2017-03-06 10:06:53 -08:00
committed by Matthew Jones
parent d97ac8cec6
commit d506cbf249
2 changed files with 50 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -102,6 +102,24 @@
padding-right: 10px; padding-right: 10px;
} }
.WorkflowResults-panelRightTitle{
flex-wrap: wrap;
}
.WorkflowResults-panelRightTitleText{
word-wrap: break-word;
word-break: break-all;
max-width: 100%;
}
.WorkflowResults-badgeAndActionRow{
display:flex;
flex: 1 0 auto;
justify-content: flex-end;
flex-wrap: wrap;
max-width: 100%;
}
.WorkflowResults-badgeRow { .WorkflowResults-badgeRow {
display: flex; display: flex;
align-items: center; align-items: center;

63
awx/ui/client/src/workflow-results/workflow-results.partial.html
View File

@@ -213,8 +213,8 @@
<div class="Panel"> <div class="Panel">
<!-- RIGHT PANE HEADER --> <!-- RIGHT PANE HEADER -->
<div class="StandardOut-panelHeader"> <div class="StandardOut-panelHeader WorkflowResults-panelRightTitle">
<div class="StandardOut-panelHeaderText"> <div class="StandardOut-panelHeaderText WorkflowResults-panelRightTitleText">
<i class="WorkflowResults-statusResultIcon <i class="WorkflowResults-statusResultIcon
fa icon-job-{{ workflow.status }}" fa icon-job-{{ workflow.status }}"
ng-show="stdoutFullScreen" ng-show="stdoutFullScreen"
@@ -224,39 +224,40 @@
</i> </i>
{{ workflow.name }} {{ workflow.name }}
</div> </div>
<div class="WorkflowResults-badgeAndActionRow">
<!-- HEADER COUNTS -->
<div class="WorkflowResults-badgeRow">
<!-- PLAYS COUNT -->
<div class="WorkflowResults-badgeTitle">
Total Jobs
</div>
<span class="badge List-titleBadge">
{{ workflow_nodes.length || 0}}
</span>
<!-- HEADER COUNTS --> <!-- ELAPSED TIME -->
<div class="WorkflowResults-badgeRow"> <div class="WorkflowResults-badgeTitle">
<!-- PLAYS COUNT --> Elapsed
<div class="WorkflowResults-badgeTitle"> </div>
Total Jobs <span class="badge List-titleBadge">
{{ workflow.elapsed * 1000 | duration: "hh:mm:ss"}}
</span>
</div> </div>
<span class="badge List-titleBadge">
{{ workflow_nodes.length || 0}}
</span>
<!-- ELAPSED TIME --> <!-- HEADER ACTIONS -->
<div class="WorkflowResults-badgeTitle"> <div class="StandardOut-panelHeaderActions">
Elapsed
<!-- 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>
</div> </div>
<span class="badge List-titleBadge">
{{ workflow.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>
</div> </div>
</div> </div>
<workflow-status-bar></workflow-status-bar> <workflow-status-bar></workflow-status-bar>