From a4373cd0e6ce6c3b1c7ad31d9f12f1f87de028e5 Mon Sep 17 00:00:00 2001
From: Trygve Laugstøl <trygvis@inamo.no>
Date: Wed, 23 Jan 2013 09:06:27 +0100
Subject: o Better look for tables showing some kind of details of an object. o
 Using smaller buttons for navigation so they don't change their container's
 size.

---
 src/main/resources/webapp/apps/app.css             |  8 +++--
 .../resources/webapp/apps/frontPageApp/badge.html  |  4 +--
 .../webapp/apps/frontPageApp/buildList.html        | 10 +++---
 .../resources/webapp/apps/frontPageApp/person.html | 36 ++--------------------
 .../resources/webapp/apps/jenkinsApp/build.html    |  2 +-
 .../resources/webapp/apps/jenkinsApp/jenkinsApp.js | 10 +++++-
 src/main/resources/webapp/apps/jenkinsApp/job.html |  8 +++--
 .../webapp/apps/jenkinsApp/server-list.html        |  2 +-
 .../resources/webapp/apps/jenkinsApp/server.html   | 20 +++++++-----
 9 files changed, 47 insertions(+), 53 deletions(-)

diff --git a/src/main/resources/webapp/apps/app.css b/src/main/resources/webapp/apps/app.css
index 77ea36d..dadaccf 100755
--- a/src/main/resources/webapp/apps/app.css
+++ b/src/main/resources/webapp/apps/app.css
@@ -24,8 +24,8 @@
  * Common elements
  */
 
-table.text-baseline td {
-    vertical-align: baseline
+table.align-middle td {
+    vertical-align: middle;
 }
 
 div.dogtag-big {
@@ -43,6 +43,10 @@ div.dogtag-big img {
     margin-top: 0;
 }
 
+table.details-table th:first-child {
+  width: 15em;
+}
+
 /*
  * Other
  */
diff --git a/src/main/resources/webapp/apps/frontPageApp/badge.html b/src/main/resources/webapp/apps/frontPageApp/badge.html
index b501f15..1035b80 100755
--- a/src/main/resources/webapp/apps/frontPageApp/badge.html
+++ b/src/main/resources/webapp/apps/frontPageApp/badge.html
@@ -15,13 +15,13 @@
       <p>
         The badge was awarded for having {{badge.personalBadge.builds.length}} successful builds in a row:
       </p>
-      <table class="table table-striped">
+      <table class="table table-striped align-middle">
         <tr ng-repeat="b in badge.personalBadge.builds">
           <td>
             {{b.timestamp | date:'medium'}}
           </td>
           <td>
-            <a class="btn" href="#/build/{{b}}">{{$index + 1}} <i class="icon-chevron-right"></i></a>
+            <a class="btn btn-mini" href="#/build/{{b}}">{{$index + 1}} <i class="icon-chevron-right"></i></a>
           </td>
         </tr>
       </table>
diff --git a/src/main/resources/webapp/apps/frontPageApp/buildList.html b/src/main/resources/webapp/apps/frontPageApp/buildList.html
index 7e795e4..4c4fe65 100755
--- a/src/main/resources/webapp/apps/frontPageApp/buildList.html
+++ b/src/main/resources/webapp/apps/frontPageApp/buildList.html
@@ -24,7 +24,7 @@
             <h2>{{date | date:'mediumDate'}}</h2>
           </div>
           <div class="span12">
-            <table class="table">
+            <table class="table align-middle">
             <tr ng-repeat="build in group" class="{{{true: 'success', false: 'error'}[build.build.success]}}">
               <td>
                 <h4>
@@ -35,10 +35,12 @@
                 <span ng-repeat="p in build.participants" ng-show="build.participants">
                   <dogtag-xl person="p"></dogtag-xl>
                 </span>
-                <p ng-hide="build.participants">
+                <span ng-hide="build.participants">
                   No participants.
-                </p>
-                <a class="btn pull-right" href="#/build/{{build.build.uuid}}"><i class="icon-chevron-right"></i></a>
+                </span>
+                <a class="btn pull-right" href="#/build/{{build.build.uuid}}">
+                  <i class="icon-chevron-right"></i>
+                </a>
               </td>
             </tr>
             </table>
diff --git a/src/main/resources/webapp/apps/frontPageApp/person.html b/src/main/resources/webapp/apps/frontPageApp/person.html
index 11cfd0b..1da74ef 100755
--- a/src/main/resources/webapp/apps/frontPageApp/person.html
+++ b/src/main/resources/webapp/apps/frontPageApp/person.html
@@ -73,7 +73,9 @@
                     {{build.timestamp | date:'shortTime'}}:
                     {{{true: 'SUCCESS', false: 'FAILURE'}[build.success]}}
 
-                    <a class="btn pull-right" href="#/build/{{build.uuid}}"><i class="icon-chevron-right"></i></a>
+                    <a class="btn btn-mini pull-right" href="#/build/{{build.uuid}}">
+                      <i class="icon-chevron-right"></i>
+                    </a>
                   </td>
                 </tr>
               </table>
@@ -90,38 +92,6 @@
         </ul>
       </div>
     </div>
-<!--
-    <table class="table text-baseline">
-      <thead>
-      <tr>
-        <th>Date</th>
-        <th></th>
-      </tr>
-      </thead>
-      <tbody>
-      <tr ng-repeat="build in builds.rows" class="{{{true: 'success', false: 'error'}[build.success]}}">
-        <td>{{build.timestamp | date:'medium'}}</td>
-        <td>
-          <a class="btn btn-small" href="#/build/{{build.uuid}}"><i class="icon-chevron-right"></i></a>
-        </td>
-      </tr>
-      </tbody>
-      <tfoot>
-      <tr>
-        <td colspan="3">
-          <ul class="pager">
-            <li class="previous" ng-class="{disabled: builds.startIndex == 0}">
-              <a ng-click="builds.prev()">&larr; Older</a>
-            </li>
-            <li class="next">
-              <a ng-click="builds.next()">Newer &rarr;</a>
-            </li>
-          </ul>
-        </td>
-      </tr>
-      </tfoot>
-    </table>
--->
   </div>
 
   <div id="jenkins" ng-show="mode == 'jenkins'">
diff --git a/src/main/resources/webapp/apps/jenkinsApp/build.html b/src/main/resources/webapp/apps/jenkinsApp/build.html
index 13e3b8b..61411f5 100755
--- a/src/main/resources/webapp/apps/jenkinsApp/build.html
+++ b/src/main/resources/webapp/apps/jenkinsApp/build.html
@@ -14,7 +14,7 @@
   </ul>
 
   <h3>Overview</h3>
-  <table class="table">
+  <table class="table details-table">
     <tbody>
     <tr>
       <th>Timestamp</th>
diff --git a/src/main/resources/webapp/apps/jenkinsApp/jenkinsApp.js b/src/main/resources/webapp/apps/jenkinsApp/jenkinsApp.js
index f59c107..ea8eed8 100755
--- a/src/main/resources/webapp/apps/jenkinsApp/jenkinsApp.js
+++ b/src/main/resources/webapp/apps/jenkinsApp/jenkinsApp.js
@@ -13,7 +13,15 @@ function NavTabsService($location) {
 
     var onClick = function(tab) {
       currentTab = tab;
-      currentIndex = _.indexOf(tabs, tab);
+      var x = _.indexOf(tabs, tab);
+      if(x == -1) {
+        x = _.indexOf(keys, tab);
+        if(x == -1) {
+          throw "Unknown tab: " + tab;
+        }
+      }
+
+      currentIndex = x;
       $location.search(name, keys[currentIndex]);
     };
 
diff --git a/src/main/resources/webapp/apps/jenkinsApp/job.html b/src/main/resources/webapp/apps/jenkinsApp/job.html
index 4f21fad..91527dc 100755
--- a/src/main/resources/webapp/apps/jenkinsApp/job.html
+++ b/src/main/resources/webapp/apps/jenkinsApp/job.html
@@ -14,7 +14,7 @@
 
   <h3>Overview</h3>
 
-  <table class="table">
+  <table class="table details-table">
     <tbody>
     <tr>
       <th>URL</th>
@@ -40,7 +40,11 @@
     <tr ng-repeat="build in builds.rows" class="{{{true: 'success', false: 'error'}[build.success]}}">
       <td>{{build.timestamp | date:'medium'}}</td>
       <td>{{build.result}}</td>
-      <td><a class="btn" href="/jenkins/#/server/{{serverUuid}}/job/{{jobUuid}}/build/{{build.uuid}}"><i class="icon-chevron-right"></i></a></td>
+      <td>
+        <a class="btn btn-mini" href="/jenkins/#/server/{{serverUuid}}/job/{{jobUuid}}/build/{{build.uuid}}">
+          <i class="icon-chevron-right"></i>
+        </a>
+      </td>
     </tr>
     </tbody>
     <tfoot>
diff --git a/src/main/resources/webapp/apps/jenkinsApp/server-list.html b/src/main/resources/webapp/apps/jenkinsApp/server-list.html
index 93e5e9e..7319fc7 100755
--- a/src/main/resources/webapp/apps/jenkinsApp/server-list.html
+++ b/src/main/resources/webapp/apps/jenkinsApp/server-list.html
@@ -24,7 +24,7 @@
       <td>{{server.url}}</td>
       <td>{{server.enabled}}</td>
       <td><a href="{{server.url}}">Visit</a></td>
-      <td><a class="btn" href="/jenkins/#/server/{{server.uuid}}"><i class="icon-chevron-right"></i></a>
+      <td><a class="btn btn-mini" href="/jenkins/#/server/{{server.uuid}}"><i class="icon-chevron-right"></i></a>
       </td>
     </tr>
     </tbody>
diff --git a/src/main/resources/webapp/apps/jenkinsApp/server.html b/src/main/resources/webapp/apps/jenkinsApp/server.html
index bf54bb8..2cfd4db 100755
--- a/src/main/resources/webapp/apps/jenkinsApp/server.html
+++ b/src/main/resources/webapp/apps/jenkinsApp/server.html
@@ -20,7 +20,7 @@
   <div ng-show="navTabs.selectedIndex() == 0" class="row">
     <div class="span12">
       <h3>Overview</h3>
-      <table class="table">
+      <table class="table details-table">
         <tbody>
         <tr>
           <th>URL</th>
@@ -32,7 +32,7 @@
         </tr>
         <tr>
           <th>Number of jobs</th>
-          <td>{{server.jobCount}}</td>
+          <td><a href="" ng-click="navTabs.onClick('jobs')">{{server.jobCount}}</a></td>
         </tr>
         <tr>
           <th>Number of builds</th>
@@ -57,12 +57,16 @@
       </form>
     </div>
     <div class="span12">
-      <table class="table">
+      <table class="table table-striped align-middle">
         <tbody>
         <tr ng-repeat="job in jobs.rows">
           <td>{{job.displayName}}</td>
           <td>{{job.createdDate | date:'medium'}}</td>
-          <td><a class="btn" href="/jenkins/#/server/{{server.uuid}}/job/{{job.uuid}}"><i class="icon-chevron-right"></i></a></td>
+          <td>
+            <a class="btn btn-mini" href="/jenkins/#/server/{{server.uuid}}/job/{{job.uuid}}">
+              <i class="icon-chevron-right"></i>
+            </a>
+          </td>
         </tr>
         </tbody>
         <tfoot>
@@ -88,11 +92,13 @@
       <table class="table table-striped">
         <tbody>
         <tr ng-repeat="b in builds.rows">
-          <td>{{b.timestamp | date:'medium'}}</td>
+          <td class="span4">{{b.timestamp | date:'medium'}}</td>
           <td class="span6">{{b.result}}</td>
-          <td class="span1"><a class="btn" href="/jenkins/#/server/{{server.uuid}}/job/{{b.job}}">Job</a></td>
+          <td class="span1"><a class="btn btn-mini" href="/jenkins/#/server/{{server.uuid}}/job/{{b.job}}">Job</a></td>
           <td class="span1">
-            <a class="btn" href="/jenkins/#/server/{{server.uuid}}/job/{{b.job}}/build/{{b.uuid}}"><i class="icon-chevron-right"></i></a>
+            <a class="btn btn-mini" href="/jenkins/#/server/{{server.uuid}}/job/{{b.job}}/build/{{b.uuid}}">
+              <i class="icon-chevron-right"></i>
+            </a>
           </td>
         </tr>
         </tbody>
-- 
cgit v1.2.3