pts-core: Update CSS and XSL for results viewer, fix table column

alignment bug

2 files changed, 27 insertions, 23 deletions

diff --git a/pts-core/results-viewer/pts-results-viewer.xsl b/pts-core/results-viewer/pts-results-viewer.xsl
index 228343c..14402c6 100644
--- a/pts-core/results-viewer/pts-results-viewer.xsl
+++ b/pts-core/results-viewer/pts-results-viewer.xsl
@@ -30,23 +30,17 @@
 					<p><xsl:value-of select="PhoronixTestSuite/Suite/Description"/></p>
 				</div>
 
-				<xsl:variable name="idcount"><xsl:value-of select="count(PhoronixTestSuite/System)" /></xsl:variable>
-				<xsl:variable name="idwidth"><xsl:value-of select="floor(815 div $idcount) - 3" /></xsl:variable>
-
 				<h1>System Hardware</h1>
-				<div class="pts_chart_box">
-				<xsl:for-each select="PhoronixTestSuite/System"><div class="pts_column_head"><xsl:attribute name="style">width: <xsl:value-of select="$idwidth" />px;</xsl:attribute><xsl:value-of select="AssociatedIdentifiers" /></div></xsl:for-each>
-				<xsl:for-each select="PhoronixTestSuite/System"><div class="pts_column_body"><xsl:attribute name="style">width: <xsl:value-of select="$idwidth" />px;</xsl:attribute><xsl:value-of select="Hardware" /></div></xsl:for-each>
+				<div class="pts_table_box">
+				<xsl:for-each select="PhoronixTestSuite/System"><div class="pts_table_box_col"><div class="pts_column_head"><xsl:value-of select="AssociatedIdentifiers" /></div><div class="pts_column_body"><div class="pts_column_body_text"><xsl:value-of select="Hardware" /></div></div></div></xsl:for-each>
 				</div>
 				<h1>System Software</h1>
-				<div class="pts_chart_box">
-				<xsl:for-each select="PhoronixTestSuite/System"><div class="pts_column_head"><xsl:attribute name="style">width: <xsl:value-of select="$idwidth" />px;</xsl:attribute><xsl:value-of select="AssociatedIdentifiers" /></div></xsl:for-each>
-				<xsl:for-each select="PhoronixTestSuite/System"><div class="pts_column_body"><xsl:attribute name="style">width: <xsl:value-of select="$idwidth" />px;</xsl:attribute><xsl:value-of select="Software" /></div></xsl:for-each>
+				<div class="pts_table_box">
+				<xsl:for-each select="PhoronixTestSuite/System"><div class="pts_table_box_col"><div class="pts_column_head"><xsl:value-of select="AssociatedIdentifiers" /></div><div class="pts_column_body"><div class="pts_column_body_text"><xsl:value-of select="Software" /></div></div></div></xsl:for-each>
 				</div>
 				<h1>Additional Details</h1>
-				<div class="pts_chart_box">
-				<xsl:for-each select="PhoronixTestSuite/System"><div class="pts_column_head"><xsl:attribute name="style">width: <xsl:value-of select="$idwidth" />px;</xsl:attribute><xsl:value-of select="AssociatedIdentifiers" /></div></xsl:for-each>
-				<xsl:for-each select="PhoronixTestSuite/System"><div class="pts_column_body"><xsl:attribute name="style">width: <xsl:value-of select="$idwidth" />px;</xsl:attribute><strong>Test Administrator:</strong> <xsl:value-of select="Author" /><br /><strong>Test Date/Time:</strong> <xsl:value-of select="TestDate" /> (UTC)<br /><strong>PTS Version:</strong> <xsl:value-of select="Version" /><br /><strong>Test Notes:</strong><br /><xsl:value-of select="TestNotes" /></div></xsl:for-each>
+				<div class="pts_table_box">
+				<xsl:for-each select="PhoronixTestSuite/System"><div class="pts_table_box_col"><div class="pts_column_head"><xsl:value-of select="AssociatedIdentifiers" /></div><div class="pts_column_body"><div class="pts_column_body_text"><strong>Administrator:</strong> <xsl:value-of select="Author" /><br /><strong>Date:</strong> <xsl:value-of select="TestDate" /> (UTC)<br /><strong>PTS Version:</strong> <xsl:value-of select="Version" /><br /><strong>Test Notes:</strong><br /><xsl:value-of select="TestNotes" /></div></div></div></xsl:for-each>
 				</div>
 			</div>
 
diff --git a/pts-core/results-viewer/pts-viewer.css b/pts-core/results-viewer/pts-viewer.css
index 89a5fdf..03da835 100644
--- a/pts-core/results-viewer/pts-viewer.css
+++ b/pts-core/results-viewer/pts-viewer.css
@@ -97,24 +97,19 @@ div.pts_column_head
 {	
 	font-size: 13px;
 	color: #FFF;
-	text-align: center;
-	margin: 0 3px;
 	background-color: #2b6b29;
 	font-weight: bold;
-	float: left;
-	border: solid #3B433A;
-	border-width: 1px;
+	display: table-row;
 }
 div.pts_column_body
 {	
 	font-size: 12px;
 	color: #000;
-	text-align: center;
-	margin: 0 3px;
-	background-color: #F8F8F8;
-	float: left;
-	border: solid #66695B;
-	border-width: 0 1px 1px;
+	display: table-row;
+}
+div.pts_column_body_text
+{
+	padding: 3px 4px;
 }
 h1
 {
@@ -123,6 +118,21 @@ h1
 	color: #2b6b29;
 	font-weight: bold;
 }
+div.pts_table_box
+{
+	text-align: center;
+	background-color: #F8F8F8;
+	border: solid #2b6b29;
+	border-width: 0 0 1px 1px;
+	margin: 6px auto;
+	display: table;
+}
+div.pts_table_box_col
+{
+	border: solid #2b6b29;
+	border-width: 0 1px 0 0;
+	display: table-cell;
+}
 div.pts_chart_box
 {
 	width: 95%;