From ac25e42d426981b8cab5f660de074e6c4fc41453 Mon Sep 17 00:00:00 2001
From: Sean Dague <sdague@linux.vnet.ibm.com>
Date: Mon, 29 Jul 2013 11:17:22 -0400
Subject: [PATCH] float the progress bars and statuses to the right

this floats the progress bars and statuses to the right, which
provides a nicer visual block for all the status elements. The
progress bars need a margin hack to get them to visually align with
the rest of the line.

This also moves the progress bar width into the css instead of
inline, and to 5em which is approx what SUCCESS width is in chrome.
(Should be about the same in other browsers, but font rendering
is different between webkit / firefox).

Errant white space deleted, my editor does that on all changes,
sorry if that noises things up.

Change-Id: Ibf4288049e3b24949d17a6b39f2cf1b7bd7a52dc
---
 .../openstack_project/files/zuul/status.html  | 21 +++++++++++++------
 .../openstack_project/files/zuul/status.js    |  4 ++--
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/modules/openstack_project/files/zuul/status.html b/modules/openstack_project/files/zuul/status.html
index d1c13ceec6..8f5c4597af 100644
--- a/modules/openstack_project/files/zuul/status.html
+++ b/modules/openstack_project/files/zuul/status.html
@@ -41,6 +41,9 @@
     font-size: 16pt;
     line-height: 1.0;
 }
+.result {
+    float: right;
+}
 .result_success {
     color: #007f00;
 }
@@ -64,6 +67,12 @@ a:link {
     font-size: 12pt;
     margin: 0pt;
 }
+.change_progress {
+    width: 5em;
+    float: right;
+    /* because other wise this floats up off the line */
+    margin-top: 0.25em;
+}
 
 </style>
 
@@ -79,24 +88,24 @@ a:link {
 	src="http://status.openstack.org/common.js"></script>
 <script type="text/javascript"
 	src="status.js"></script>
-    
+
     <!-- Google Fonts -->
     <link href='http://fonts.googleapis.com/css?family=PT+Sans&amp;subset=latin' rel='stylesheet' type='text/css'/>
-    
+
     <!-- Framework CSS -->
     <link rel="stylesheet" href="http://www.openstack.org/themes/openstack/css/blueprint/screen.css" type="text/css" media="screen, projection"/>
     <link rel="stylesheet" href="http://www.openstack.org/themes/openstack/css/blueprint/print.css" type="text/css" media="print"/>
-    
+
     <!-- IE CSS -->
     <!--[if lt IE 8]><link rel="stylesheet" href="http://www.openstack.org/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
-    
+
     <!-- OpenStack Specific CSS -->
-    
+
     <link rel="stylesheet" href="http://www.openstack.org/themes/openstack/css/dropdown.css" type="text/css" media="screen, projection, print"/>
 
     <!-- Page Specific CSS -->
     <link rel="stylesheet" href="http://www.openstack.org/themes/openstack/css/home.css" type="text/css" media="screen, projection, print"/>
-	
+
     <link rel="stylesheet" type="text/css" href="http://www.openstack.org/themes/openstack/css/main.css" />
   </HEAD>
 
diff --git a/modules/openstack_project/files/zuul/status.js b/modules/openstack_project/files/zuul/status.js
index 3d69ee9c1b..20d4680915 100644
--- a/modules/openstack_project/files/zuul/status.js
+++ b/modules/openstack_project/files/zuul/status.js
@@ -46,7 +46,7 @@ function format_progress(elapsed, remaining) {
     } else {
         total = null;
     }
-    r = '<progress style="width:6em" title="' +
+    r = '<progress class="change_progress" title="' +
         format_time(elapsed, false) + ' elapsed, ' +
         format_time(remaining, false)+' remaining" ' +
         'value="'+elapsed+'" max="'+total+'">in progress</progress>';
@@ -137,7 +137,7 @@ function format_change(change) {
         if (job['result'] == null && job['url'] != null) {
             html += format_progress(job['elapsed_time'], job['remaining_time']);
         } else {
-            html += '<span class="'+result_class+'">'+result+'</span>';
+            html += '<span class="result '+result_class+'">'+result+'</span>';
         }
 
         if (job['voting'] == false) {