[JENKINS-28180] The fluid layout has been improved to support long jo…

…b names
jenkinsci · Aug 30, 2015 · d1f51a2 · d1f51a2
1 parent c3339ec
commit d1f51a2
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 42 deletions.
diff --git a/...n/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly b/...n/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
@@ -17,10 +17,10 @@
 	<script src="${rootURL}/plugin/build-pipeline-plugin/js/build-pipeline.js"></script>
 	<script id="build-card-template" type="text/x-handlebars-template">
 <table class="build-card rounded {{build.status}} {{#if project.disabled}}disabled{{/if}}">
-	<tbody>
-		<tr class="header">
+	<thead>
+		<tr>
 			<td>
-				<div class="overflow-hidden">
+				<div class="header">
 					<a href="${rootURL}/{{build.url}}" title="{{project.name}}">
 						{{#unless build.isPending}}
 							{{#unless build.isReadyToBeManuallyBuilt}}
@@ -36,6 +36,8 @@
 				</div>
 			</td>
 		</tr>
+	</thead>
+	<tbody>
 		<tr class="build-body">
 			<td class="secondary-info">
 				<div class="build-time">
@@ -365,19 +367,23 @@
 									<!-- Only adding the revision-cell once. -->
 									<j:if test="${x == 0}"><td class="revision-cell" rowspan="${buildGrid.rows}">
 										<table class="revision rounded build-card">
-											<tbody>
-												<tr class="header">
-													<td colspan="2">
-														<j:choose>
-															<j:when test="${from.isShowPipelineParameters()}">
-																<div>Pipeline ${buildGrid.get(x,0).getRevision()}</div>
-															</j:when>
-															<j:otherwise>
-																<div>Pipeline</div>
-															</j:otherwise>
-														</j:choose>
+											<thead>
+												<tr>
+													<td>
+														<div class="header">
+															<j:choose>
+																<j:when test="${from.isShowPipelineParameters()}">
+																	Pipeline ${buildGrid.get(x,0).getRevision()}
+																</j:when>
+																<j:otherwise>
+																	Pipeline
+																</j:otherwise>
+															</j:choose>
+														</div>
 													</td>
 												</tr>
+											</thead>
+											<tbody>
 												<tr class="build-body">
 													<j:choose>
 														<j:when test="${from.isShowPipelineParameters()}">
@@ -412,7 +418,7 @@
 														</j:when>
 														<j:otherwise>
 															<td>
-																<div class="build-number-pipeline" id="buildNumber${buildGrid.get(x,0).getId()}"><span>${buildGrid.get(x,0).getRevision()}</span></div>
+																<div class="build-number-pipeline" id="buildNumber${buildGrid.get(x,0).getId()}">${buildGrid.get(x,0).getRevision()}</div>
 															</td>
 														</j:otherwise>
 													</j:choose>

diff --git a/src/main/webapp/css/main.css b/src/main/webapp/css/main.css
@@ -77,17 +77,6 @@
     text-shadow:1px 0px 0px #333333;
 }
 
-.overflow-hidden {
-	-o-text-overflow: ellipsis;
-	-icab-text-overflow: ellipsis;
-	-khtml-text-overflow: ellipsis;
-	-webkit-text-overflow: ellipsis;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	white-space: nowrap;
-}
-
-
 /*************************** build card *******************************/
 .rounded {
     height: 70px;
@@ -108,18 +97,6 @@
     margin-right: auto;
 }
 
-.header div {
-    background: rgba(255, 255, 255, 0.7);
-    color: #333;
-    padding: 3px;
-
-    -webkit-border-top-right-radius: 4px;
-    border-top-right-radius: 4px;
-
-    -webkit-border-top-left-radius: 4px;
-    border-top-left-radius: 4px;
-}
-
 .build-number {
 	font-style: italic;
 	background: url("../images/gear-small.png") no-repeat left center;
@@ -152,9 +129,30 @@
 	width: 102px;
 }
 
+table.build-card div.header {
+    background: rgba(255, 255, 255, 0.7);
+    color: #333;
+    border-radius: 4px 4px 0px 0px;
+    -moz-border-radius: 4px 4px 0px 0px;
+    -webkit-border-radius: 4px 4px 0px 0px;
+    padding: 2px 6px;
+}
+
+table.build-card div.header a {
+    position: relative;
+    display: block;
+     margin: 0;
+    padding: 0px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+
+}
+
 .build-card {
-    float: left;
     width: 100%;
+    table-layout: fixed;
 }
 
 .build-card .build-body {
@@ -215,8 +213,8 @@
 }
 
 td.next {
-    width: 40px;
-    vertical-align: top;
+    width: 30px;
+    vertical-align: middle;
 }
 
 tbody.pipelineGroup {
@@ -263,7 +261,6 @@ tr.spacerRow td {
 }
 
 .revision .build-number-pipeline {
-	padding-top: 0.25em;
 	font-size: 2em;
 }