From 429df45cdcdd7e072fd77f4434d2facdc7a23cbb Mon Sep 17 00:00:00 2001
From: Chris Houseknecht <chouse@ansible.com>
Date: Thu, 10 Jul 2014 00:04:39 -0400
Subject: [PATCH] Job detail page re-refactor Fixed column alignment on plays
 and tasks.

---
 awx/ui/static/partials/job_detail.html | 30 +++++++++++++-------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/awx/ui/static/partials/job_detail.html b/awx/ui/static/partials/job_detail.html
index c836938bcf..561ba31a40 100644
--- a/awx/ui/static/partials/job_detail.html
+++ b/awx/ui/static/partials/job_detail.html
@@ -106,10 +106,10 @@
                                 <table class="table table-condensed" style="table-layout:fixed;">
                                     <thead>
                                         <tr>
-                                            <th class="col-lg-1 col-md-2 col-sm-2 col-xs-3">Started</th>
-                                            <th class="col-lg-1 col-md-2 col-sm-2 col-xs-3">Elapsed</th>
+                                            <th class="col-lg-2 col-md-2 col-sm-2 col-xs-3">Started</th>
+                                            <th class="col-lg-2 col-md-2 col-sm-2 col-xs-3">Elapsed</th>
                                             <th class="col-lg-1 col-md-2 col-sm-2 col-xs-2 status-column">Status</th>
-                                            <th class="col-lg-9 col-md-6 col-sm-6 col-xs-4">Name</th>
+                                            <th class="col-lg-7 col-md-6 col-sm-6 col-xs-4">Name</th>
                                         </tr>
                                     </thead>
                                 </table>
@@ -119,11 +119,11 @@
                                 <table class="table table-condensed" style="table-layout:fixed;">
                                     <tbody>
                                         <tr class="cursor-pointer" ng-repeat="play in plays" ng-class="play.playActiveClass" ng-click="selectPlay(play.id, $event)">
-                                            <td class="col-lg-1 col-md-2 col-sm-2 col-xs-3">{{ play.created | date: 'HH:mm:ss' }}</td>
-                                            <td class="col-lg-1 col-md-2 col-sm-2 col-xs-3" aw-tool-tip="Completed at {{ play.finished | date:'HH:mm:ss' }}"
+                                            <td class="col-lg-2 col-md-2 col-sm-2 col-xs-3">{{ play.created | date: 'HH:mm:ss' }}</td>
+                                            <td class="col-lg-2 col-md-2 col-sm-2 col-xs-3" aw-tool-tip="Completed at {{ play.finished | date:'HH:mm:ss' }}"
                                                 data-placement="top">{{ play.elapsed }}</td>
                                             <td class="col-lg-1 col-md-2 col-sm-2 col-xs-2 status-column" aw-tool-tip="{{ play.status_tip }}" data-tip-watch="play.status_tip" data-placement="top"><i class="fa icon-job-{{ play.status }}"></i></td>
-                                            <td class="col-lg-9 col-md-6 col-sm-6 col-xs-4">{{ play.name }}</td>
+                                            <td class="col-lg-7 col-md-6 col-sm-6 col-xs-4">{{ play.name }}</td>
                                         </tr>
                                         <tr ng-show="plays.length === 0">
                                             <td colspan="4" class="col-lg-12 loading-info">No matching plays</td>
@@ -166,11 +166,11 @@
                                 <table class="table table-condensed" style="table-layout:fixed;">
                                     <thead>
                                         <tr>
-                                            <th class="col-lg-1 col-md-2 col-sm-2 col-xs-3">Started</th>
-                                            <th class="col-lg-1 col-md-2 col-sm-2 col-xs-3">Elapsed</th>
+                                            <th class="col-lg-2 col-md-2 col-sm-2 col-xs-3">Started</th>
+                                            <th class="col-lg-2 col-md-2 col-sm-2 col-xs-3">Elapsed</th>
                                             <th class="col-lg-1 col-md-2 col-sm-2 col-xs-2 status-column">Status</th>
-                                            <th class="col-lg-4 col-md-3 col-sm-6 col-xs-4">Name</div>
-                                            <th class="col-lg-5 col-md-3 hidden-xs hidden-sm">Host Status</th>
+                                            <th class="col-lg-3 col-md-3 col-sm-6 col-xs-4">Name</div>
+                                            <th class="col-lg-4 col-md-3 hidden-xs hidden-sm">Host Status</th>
                                         </tr>
                                     </thead>
                                 </table>
@@ -180,13 +180,13 @@
                                 <table class="table table-condensed" style="table-layout:fixed;">
                                     <tbody>
                                         <tr class="cursor-pointer" ng-repeat="task in taskList = (tasks) track by $index" ng-class="task.taskActiveClass" ng-click="selectTask(task.id)">
-                                            <td class="col-lg-1 col-md-2 col-sm-2 col-xs-3">{{ task.created | date: 'HH:mm:ss' }}</td>
-                                            <td class="col-lg-1 col-md-2 col-sm-2 col-xs-3" aw-tool-tip="Completed at {{ task.finished | date:'HH:mm:ss' }}"
+                                            <td class="col-lg-2 col-md-2 col-sm-2 col-xs-3">{{ task.created | date: 'HH:mm:ss' }}</td>
+                                            <td class="col-lg-2 col-md-2 col-sm-2 col-xs-3" aw-tool-tip="Completed at {{ task.finished | date:'HH:mm:ss' }}"
                                                     data-placement="top">{{ task.elapsed }}</td>
                                             <td class="col-lg-1 col-md-2 col-sm-2 col-xs-2 status-column" aw-tool-tip="{{ task.status_tip }}"
                                                 data-tip-watch="task.status_tip" data-placement="top"><i class="fa icon-job-{{  task.status }}"></i></td>
-                                            <td class="col-lg-4 col-md-3 col-sm-6 col-xs-4"><span ng-show="hasRoles">{{ task.role }}</span> {{ task.name }}</td>
-                                            <td class="col-lg-5 col-md-3 hidden-sm hidden-xs"><div class="status-bar"><div class="successful-hosts inner-bar" id="{{ task.id }}-successful-bar" aw-tool-tip="Hosts OK" data-placement="top" ng-style="task.successfulStyle">{{ task.successfulCount }}</div><div class="changed-hosts inner-bar" id="{{ task.id }}-changed-bar" aw-tool-tip="Hosts Changed" data-placement="top" ng-style="task.changedStyle">{{ task.changedCount }}</div><div class="skipped-hosts inner-bar" id="{{ task.id }}-skipped-bar" aw-tool-tip="Hosts Skipped" data-placement="top" ng-style="task.skippedStyle">{{ task.skippedCount }}</div><div class="failed-hosts inner-bar" id="{{ task.id }}-failed-bar" aw-tool-tip="Hosts Failed" data-placement="top" ng-style="task.failedStyle">{{ task.failedCount }}</div><div class="unreachable-hosts inner-bar" id="{{ task.id }}-unreachable-hosts-bar" aw-tool-tip="Hosts Unreachable" data-placement="top" ng-style="task.unreachableStyle">{{ task.unreachableCount }}</div><div class="missing-hosts inner-bar" id="{{ task.id }}-misssing-hosts-bar" ng-style="task.missingStyle">{{ task.missingCount }}</div><div class="no-matching-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-no-matching-hosts-bar" aw-tool-tip="No matching hosts were found" data-placement="top" style="width: 100%;" ng-show="task.status === 'no-matching-hosts'">No matching hosts</div></div></td>
+                                            <td class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><span ng-show="hasRoles">{{ task.role }}</span> {{ task.name }}</td>
+                                            <td class="col-lg-4 col-md-3 hidden-sm hidden-xs"><div class="status-bar"><div class="successful-hosts inner-bar" id="{{ task.id }}-successful-bar" aw-tool-tip="Hosts OK" data-placement="top" ng-style="task.successfulStyle">{{ task.successfulCount }}</div><div class="changed-hosts inner-bar" id="{{ task.id }}-changed-bar" aw-tool-tip="Hosts Changed" data-placement="top" ng-style="task.changedStyle">{{ task.changedCount }}</div><div class="skipped-hosts inner-bar" id="{{ task.id }}-skipped-bar" aw-tool-tip="Hosts Skipped" data-placement="top" ng-style="task.skippedStyle">{{ task.skippedCount }}</div><div class="failed-hosts inner-bar" id="{{ task.id }}-failed-bar" aw-tool-tip="Hosts Failed" data-placement="top" ng-style="task.failedStyle">{{ task.failedCount }}</div><div class="unreachable-hosts inner-bar" id="{{ task.id }}-unreachable-hosts-bar" aw-tool-tip="Hosts Unreachable" data-placement="top" ng-style="task.unreachableStyle">{{ task.unreachableCount }}</div><div class="missing-hosts inner-bar" id="{{ task.id }}-misssing-hosts-bar" ng-style="task.missingStyle">{{ task.missingCount }}</div><div class="no-matching-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-no-matching-hosts-bar" aw-tool-tip="No matching hosts were found" data-placement="top" style="width: 100%;" ng-show="task.status === 'no-matching-hosts'">No matching hosts</div></div></td>
                                         </tr>
                                         <tr ng-show="taskList.length === 0">
                                             <td colspan="5" class="col-lg-12 loading-info">No matching tasks</td>
@@ -259,7 +259,7 @@
 
                             <div class="row title-row">
                                 <div class="col-lg-1 col-md-2 col-sm-2 title">Summary</div>
-                                <div class="col-lg-10 col-md-8 col-sm-8" style="text-align:right;">
+                                <div class="col-lg-11 col-md-10 col-sm-10" style="text-align:right;">
                                     <div id="task-search-form" class="search-form form-inline">
                                         <div class="form-group">
                                             <label>Search</label>