From 53d41d8f834d4de8f5ce19f1bfea374a12066e2b Mon Sep 17 00:00:00 2001
From: Cameron Dawson <cdawson@mozilla.com>
Date: Tue, 29 Oct 2013 16:30:22 -0700
Subject: [PATCH] css finally looking right...  I think...

---
 ui/css/treeherder.css | 92 ++++++++++++++++++++++++++-----------------
 ui/index.html         | 34 ++++++++--------
 ui/partials/jobs.html | 15 +++----
 3 files changed, 81 insertions(+), 60 deletions(-)

diff --git a/ui/css/treeherder.css b/ui/css/treeherder.css
index 6ddffb80d..9b5978c8e 100755
--- a/ui/css/treeherder.css
+++ b/ui/css/treeherder.css
@@ -1,7 +1,9 @@
 body {
     padding-top: 60px;
     padding-bottom: 500px;
-    min-width: 1000px;
+    min-width: 960px;
+    width: auto !important;
+    width: 960px;
 }
 
 .hidden {
@@ -10,19 +12,7 @@ body {
 }
 
 .navbar {
-    min-width: 1000px;
-}
-
-.th-action-button {
-    padding-left: 5px;
-}
-
-.pushactions span.dropdown:hover ul.dropdown-menu{
-    display: block;
-}
-
-.pushactions:after {
-  content: none;
+    min-width: 960px;
 }
 
 .navbar .dropdown-menu {
@@ -30,9 +20,56 @@ body {
     overflow: auto;
 }
 
+.th-content {
+    display: inline-block;
+    overflow: auto;
+    min-width: 900px;
+    white-space: nowrap;
+}
+
+.th-nav {
+    display: inline-block;
+    width: 100px;
+    vertical-align: top;
+}
+
+.th-view-content {
+    display: inline-block;
+}
+
+.th-show-jobs-button {
+    width: 100px;
+}
+
+.th-revision-btn {
+    margin-left: 5px;
+}
+
+.th-action-button {
+    padding-left: 5px;
+    width: 50;
+}
+
+.th-rs-loading {
+    width: 25px;
+}
+
+.revision {
+    font-size: 10px;
+    padding-top: 2px;
+    overflow: auto;
+}
+
+.platform {
+    font-size: 11px;
+    padding-left: 0;
+    padding-right: 5px;
+}
+
 .result-set {
     padding-bottom: 5px;
     margin-left: 0;
+    white-space: normal;
 }
 
 .result-set .revision-list {
@@ -43,37 +80,18 @@ body {
     padding-left: 0;
 }
 
-.revision-btn {
-    margin-left: 5px;
-}
-
-.revision {
-    font-size: 10px;
-    padding-top: 2px;
-}
-
-.platform {
-    font-size: 11px;
-    padding-left: 0;
-    padding-right: 5px;
-}
-
 .selected-job {
     border: 5px solid black;
 }
 
-.th-notes-accordion .accordion-toggle {
-    padding: 0;
-}
-
-.show-jobs-button {
-    width: 100px;
-}
-
 .job-btn {
   margin: 0 -2px 0 0;
 }
 
+.th-notes-accordion .accordion-toggle {
+    padding: 0;
+}
+
 
 /*Log Viewer*/
 
diff --git a/ui/index.html b/ui/index.html
index 236501d71..0fbeb09a1 100755
--- a/ui/index.html
+++ b/ui/index.html
@@ -41,24 +41,26 @@
             </div>
         </nav>
         <!-- nav end -->
-            <div class="row">
-                <div class="col-md-1">
-                    <ul class="nav nav-pills nav-stacked">
-                        <li><a ng-class="{'active': (routeIs('jobs'))}" href="#/jobs">Jobs</a></li>
-                        <li><a ng-class="{'active': (routeIs('timeline'))}" href="#/timeline">Timeline</a></li>
-                        <li><a ng-class="{'active': (routeIs('machines'))}" href="#/machines">Machines</a></li>
-                    </ul>
-                </div>
+        <div class="th-content">
+            <span class="th-nav">
+                <ul class="nav nav-pills nav-stacked">
+                    <li><a ng-class="{'active': (routeIs('jobs'))}" href="#/jobs">Jobs</a></li>
+                    <li><a ng-class="{'active': (routeIs('timeline'))}" href="#/timeline">Timeline</a></li>
+                    <li><a ng-class="{'active': (routeIs('machines'))}" href="#/machines">Machines</a></li>
+                </ul>
+            </span>
 
-                <div class="jobs_list col-md-11" ng-cloak>
-                    <div class="alert"
-                         ng-bind="statusMsg"
-                         ng-show="statusMsg"
-                         ng-class="{'alert-success': (statusColor=='green'), 'alert-error': (statusColor=='red')}"></div>
-                    <ng-view ></ng-view>
+            <span class="th-view-content" ng-cloak>
+                <div class="alert"
+                     ng-bind="statusMsg"
+                     ng-show="statusMsg"
+                     ng-class="{'alert-success': (statusColor=='green'), 'alert-error': (statusColor=='red')}"></div>
+                <ng-view ></ng-view>
 
-                </div>
-            </div>
+            </span>
+        </div>
+
+        <!-- Footer -->
         <div class="nav navbar navbar-default navbar-fixed-bottom"
              ng-show="selectedJob">
                 <div class="container">
diff --git a/ui/partials/jobs.html b/ui/partials/jobs.html
index 53dfe8043..d0acfd9b6 100755
--- a/ui/partials/jobs.html
+++ b/ui/partials/jobs.html
@@ -2,20 +2,20 @@
 <div>
 <div ng-repeat="resultset in result_sets"
      ng-controller="ResultSetCtrl"
-     class="result-set row">
+     class="result-set">
 
-    <a class="btn {{ resultsetStateBtn }} show-jobs-button pull-left"
+    <a class="btn {{ resultsetStateBtn }} th-show-jobs-button pull-left"
        ng-click="isCollapsedResults = !isCollapsedResults">
            <i class="{{ icon }}"></i>
            {{ ' jobs' | showOrHide:isCollapsedResults }}
     </a>
-    <a class="text-left btn btn-info revision-btn"
+    <a class="text-left btn btn-info th-revision-btn"
        ng-click="isCollapsedRevisions = !isCollapsedRevisions"
-       ng-class="{'col-md-8': (isLoadingResults), 'col-md-9': (isLoadingResults==false)}">
+       >
         <div class="text-left">{{resultset.push_timestamp*1000|date:'medium'}} - {{resultset.author}} - {{resultset.revision}}</div>
     </a>
 
-    <span class="col-md-1 th-action-button">
+    <span class="th-action-button">
         <span class="dropdown">
             <a class="btn btn-default dropdown-toggle" data-hover="dropdown" data-delay="1000" href="#">
                 <i class="glyphicon glyphicon-cog"></i>
@@ -32,8 +32,9 @@
             </ul>
         </span>
     </span>
-    <div class="col-md-1 progress progress-striped active"
-         ng-show="isLoadingResults"><div class="bar" style="width: 100%"></div></div>
+    <span class="progress progress-striped active th-rs-loading"
+         ng-show="isLoadingResults"><div class="bar" style="width: 100%"></div>
+    </span>
     <div class="clearfix"></div>
 
     <div ng-hide="isCollapsedRevisions && isCollapsedResults"