From 5ee176e4512221424d9bfaff6bf2f82c6b2c6ceb Mon Sep 17 00:00:00 2001
From: Chris Houseknecht <chouse@ansible.com>
Date: Wed, 25 Jun 2014 11:16:39 -0400
Subject: [PATCH] 2.0 style changes More work on status area of job detail
 page. It now collapses perfectly as viewport size shrinks.

---
 awx/ui/static/js/controllers/JobDetail.js |  1 -
 awx/ui/static/less/job-details.less       | 56 +++++++++++++----
 awx/ui/static/partials/job_detail.html    | 76 +++++++++++------------
 3 files changed, 81 insertions(+), 52 deletions(-)

diff --git a/awx/ui/static/js/controllers/JobDetail.js b/awx/ui/static/js/controllers/JobDetail.js
index aeb72f01cd..6263de97df 100644
--- a/awx/ui/static/js/controllers/JobDetail.js
+++ b/awx/ui/static/js/controllers/JobDetail.js
@@ -530,7 +530,6 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
         $('#tasks-table-detail').mCustomScrollbar("update");
         $('#hosts-table-detail').height(150);
         $('#hosts-table-detail').mCustomScrollbar("update");
-        //height = $('#wrap').height() - $('.site-footer').outerHeight() - $('.main-container').height();
         height = $(window).height() - $('#main-menu-container .navbar').outerHeight();
         if (height > 15) {
             // there's a bunch of white space at the bottom, let's use it
diff --git a/awx/ui/static/less/job-details.less b/awx/ui/static/less/job-details.less
index 22ce6f72b2..6a1a8eb572 100644
--- a/awx/ui/static/less/job-details.less
+++ b/awx/ui/static/less/job-details.less
@@ -136,26 +136,33 @@
 
     #job-status-form {
         label {
-            font-weight: normal;
+            font-weight: bold;
         }
         .control-label {
             padding-top: 0;
+            padding-right: 0;
+            text-align: left;
         }
         .form-group {
             margin-bottom: 15px;
         }
-        #finished-time,
-        #elapsed-time {
-            padding-left: 15px;
-        }
         hr {
             margin-top: 0;
         }
         .more-or-less {
             font-size: 12px;
-            text-align: right;
+            text-align: left;
             margin-bottom: 15px;
         }
+        #started-time,
+        #finished-time,
+        #elapsed-time {
+            display: inline-block;
+        }
+        #finished-time,
+        #elapsed-time {
+            padding-left: 15px;
+        }
     }
 
 }
@@ -247,10 +254,22 @@
     }
 }
 
-#search_all_hosts_name {
-    font-size: 14px;
-    padding-left: 3px;
-    padding-right: 20px;
+#summary-search-section {
+    .remove-left-padding {
+        padding-left: 0;
+    }
+    label {
+        text-align: left;
+        font-weight: normal;
+        padding-left: 0;
+        padding-right: 0;
+        padding-top: 6px;
+    }
+    #search_all_hosts_name {
+        width: 100%;
+        padding-left: 3px;
+        padding-right: 20px;
+    }
 }
 
 #event-help-link {
@@ -367,9 +386,20 @@ svg text.percent{
     font-weight: bold;
 }
 
-
 @media (max-width: 767px) {
-    #job-status-form .more-or-less {
-        text-align: left;
+    #job-detail-container {
+        #job-status-form {
+            #finished-time,
+            #elapsed-time {
+                display: block;
+            }
+            #finished-time,
+            #elapsed-time {
+                padding-left: 0;
+                margin-left: 0;
+                padding-top: 15px;
+            }
+        }
     }
 }
+
diff --git a/awx/ui/static/partials/job_detail.html b/awx/ui/static/partials/job_detail.html
index fda9acdd8c..fc00b67e78 100644
--- a/awx/ui/static/partials/job_detail.html
+++ b/awx/ui/static/partials/job_detail.html
@@ -20,56 +20,54 @@
                         </div>
                     </div>
 
-                    <div class="form-horizontal" id="job-status-form">
+                    <div class="form-horizontal" role="form" id="job-status-form">
+
                         <div class="form-group">
-                            <label class="col-md-1 col-sm-2 control-label">Status</label>
-                            <div class="col-md-11 col-sm-10">
+                            <label class="col-md-2 col-sm-2 col-xs-3 control-label">Status</label>
+                            <div class="col-md-10 col-sm-10 col-xs-9">
                                 <i class="fa icon-job-{{ job_status.status }}"></i> {{ job_status.status }} {{ job_status.explanation }}
                             </div>
                         </div>
 
                         <div class="form-group">
-                            <label class="col-md-1 col-sm-2 control-label">Started</label>
-                            <div class="col-md-11 col-sm-10">
-                                <span ng-show="job_status.started">{{ job_status.started | date:'MM/dd/yy HH:mm:ss' }}</span>
-                                <span ng-show="job_status.finished" id="finished-time">Finished &nbsp;{{ job_status.finished | date:'MM/dd/yy HH:mm:ss' }}</span>
-                                <span ng-show="job_status.finished" id="elapsed-time">Elapsed &nbsp;{{ job_status.elapsed }}</span>
-                            </div>
-                        </div>
-
-                        <div class="row" ng-show="lessStatus">
-                            <div class="col-md-1 col-sm-2 more-or-less">
-                                <a href="" ng-click="toggleLessStatus()">more...</a>
+                            <label class="col-md-2 col-sm-2 col-xs-3 control-label">Started</label>
+                            <div class="col-md-10 col-sm-10 col-xs-9">
+                                <div ng-show="job_status.started" id="started-time">{{ job_status.started | date:'MM/dd/yy HH:mm:ss' }}</div>
+                                <div ng-show="job_status.finished" id="finished-time">Finished &nbsp;{{ job_status.finished | date:'MM/dd/yy HH:mm:ss' }}</div>
+                                <div ng-show="job_status.finished" id="elapsed-time">Elapsed &nbsp;{{ job_status.elapsed }}</div>
                             </div>
                         </div>
 
                         <div class="form-group" ng-show="!lessStatus">
-                            <label class="col-md-1 col-sm-2 control-label">Template</label>
-                            <div class="col-md-11 col-sm-10">
+                            <label class="col-md-2 col-sm-2 col-xs-3 control-label">Template</label>
+                            <div class="col-md-10 col-sm-10 col-xs-9">
                                 <a href="{{ job_template_url }}" aw-tool-tip="Edit the job template" data-placement="top">{{ job_template_name }}</a>
                             </div>
                         </div>
 
                         <div class="form-group" ng-show="!lessStatus">
-                            <label class="col-md-1 col-sm-2 control-label">Project</label>
-                            <div class="col-md-11 col-sm-10">
+                            <label class="col-md-2 col-sm-2 col-xs-3 control-label">Project</label>
+                            <div class="col-md-10 col-sm-10 col-xs-9">
                                 <a href="{{ project_url }}" aw-tool-tip="Edit the project" data-placement="top">{{ project_name }}</a>
                             </div>
                         </div>
 
                         <div class="form-group" ng-show="!lessStatus">
-                            <label class="col-md-1 col-sm-2 control-label">Inventory</label>
-                            <div class="col-md-11 col-sm-10">
+                            <label class="col-md-2 col-sm-2 col-xs-3 control-label">Inventory</label>
+                            <div class="col-md-10 col-sm-10 col-xs-9">
                                 <a href="{{ inventory_url }}" aw-tool-tip="Edit the inventory" data-placement="top">{{ inventory_name }}</a>
                             </div>
                         </div>
 
-                        <div class="row" ng-show="!lessStatus">
-                            <div class="col-md-1 col-sm-2 more-or-less">
-                                <a href="" ng-click="toggleLessStatus()">less <i class="fa fa-angle-up"></i></a>
+                        <div class="row">
+                            <div class="col-sm-12 more-or-less">
+                                <a ng-show="lessStatus" href="" ng-click="toggleLessStatus()">more...</a>
+                                <a ng-show="!lessStatus" href="" ng-click="toggleLessStatus()">less <i class="fa fa-angle-up"></i></a>
                             </div>
                         </div>
+
                         <hr>
+
                     </div>
 
                     <div id="job-detail-tables">
@@ -179,33 +177,36 @@
                         <div id="hide-summary-button" style="display: hidden;">
                             <a href="" class="btn btn-xs btn-primary" ng-click="toggleSummary('hide')" aw-tool-tip="Hide summary" data-placement="top"><i class="fa fa-arrow-circle-right fa-lg"></i></a>
                         </div>
+
                         <div id="summary-search-section" class="section">
                             <div class="header">
-                                <div class="title">Filter Hosts</div>
+                                <div class="title">Filter</div>
                             </div>
-                            <div class="row">
-                                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
+                            <form class="form-inline" id="job-filter-form">
+                                <div class="col-sm-7 col-xs-7 remove-left-padding">
                                     <div style="position:relative;">
                                         <input type="text" class="input-sm form-control" id="search_all_hosts_name" ng-model="search_all_hosts_name"
-                                            placeholder="Host Name" ng-disabled="searchAllDisabled" ng-keypress="allHostNameKeyPress($event)" />
+                                                placeholder="Host Name" ng-disabled="searchAllDisabled" ng-keypress="allHostNameKeyPress($event)" />
                                         <div id="search-all-input-icons">
                                             <a class="search-icon" ng-show="searchAllHostsEnabled" ng-click="searchAllByHost()"><i class="fa fa-search"></i></a>
                                             <a class="search-icon" ng-show="!searchAllHostsEnabled" ng-click="search_all_hosts_name=''; searchAllByHost()"><i class="fa fa-times"></i></a>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
-                                    <div style="padding-top: 5px;">
-                                        <label class="small-label">Show</label>
-                                        <div class="btn-group" aw-toggle-button data-after-toggle="filterByStatus">
-                                            <button class="btn btn-xs btn-primary active">All</button>
-                                            <button class="btn btn-xs btn-default">Failed</button>
-                                        </div>
+                                <div class="col-sm-5 col-xs-5 remove-left-padding">
+                                    <label>Status</label>
+                                    <div class="btn-group" aw-toggle-button data-after-toggle="filterByStatus">
+                                        <button class="btn btn-xs btn-primary active">All</button>
+                                        <button class="btn btn-xs btn-default">Failed</button>
                                     </div>
                                 </div>
-                            </div>
-                            <hr />
+                            </form>
                         </div>
+
+                        <div style="display:block; clear:both; width:100%; height:1px; margin-top:55px; margin-bottom:20px;">
+                            <hr>
+                        </div>
+
                         <div id="hosts-summary-section" class="section job_summary">
                             <div class="header">
                                 <div class="title">Host Summary</div>
@@ -215,8 +216,7 @@
                             <div class="table-header">
                                 <div class="row">
                                     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">Host</div>
-                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">Completed Tasks
-                                    </div>
+                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">Completed Tasks</div>
                                 </div>
                             </div>
                             <div id="hosts-summary-table" class="table-detail" aw-custom-scroll data-on-total-scroll="HostSummaryOnTotalScroll"