Split the package page into little tabby doobries

2 files changed, 68 insertions, 18 deletions

diff --git a/gentoobrowse/browse.xslt b/gentoobrowse/browse.xslt
index c356828..2382013 100644
--- a/gentoobrowse/browse.xslt
+++ b/gentoobrowse/browse.xslt
@@ -42,9 +42,11 @@
 	</ul>
   </xsl:template>
   <xsl:template match="/gentoo/summary/package/versions">
-  	<table class="versions">
-		<xsl:apply-templates select="version" />
-	</table>
+  	<div class="tabvisible" id="versions">
+		<table class="versions">
+			<xsl:apply-templates select="version" />
+		</table>
+	</div>
   </xsl:template>
   <xsl:template match="/gentoo/summary/package/versions/version">
   <tr class="row1">
@@ -67,6 +69,18 @@
   </tr>
   </xsl:template>
   <xsl:template match="/gentoo/summary/package">
+  	<script language="javascript">
+		function showTab(name)
+		{
+			var children = document.getElementById('tabcontainer').childNodes;
+			for(var c = 0; c &lt; children.length; c++) {
+				if (children[c].className == 'tabvisible') {
+					children[c].className = 'tabhidden';
+				}
+			}
+			document.getElementById(name).className = 'tabvisible';
+		}
+	</script>
 	<xsl:if test="count(/gentoo/project2:session/project2:var[@name='loggedInUserID']) != 0">
 		<xsl:if test="count(tracks/track) > 0">
 			<form method="post" class="tracker">
@@ -91,6 +105,7 @@
 			</form>
 		</xsl:if>
 	</xsl:if>
+	<xsl:apply-templates select="packageUrls" />
   	<h2>
 		<a>
 			<xsl:attribute name="href">
@@ -102,10 +117,21 @@
 	<p>
 		<xsl:value-of select="description" />
 	</p>
-	<xsl:apply-templates select="packageUrls" />
-	<xsl:apply-templates select="versions" />
-	<xsl:apply-templates select="deps" />
-	<xsl:apply-templates select="packageBugs" />
+	<div class="tabbox" id="tabcontainer">
+		<!-- handles -->
+		<a class="tabhandle" href="javascript:showTab('versions');">Versions</a>
+		<xsl:if test="count(/gentoo/summary/package/deps/package) &gt; 0">
+			<a class="tabhandle" href="javascript:showTab('deps');">Dependencies</a>
+		</xsl:if>
+		<xsl:if test="count(/gentoo/summary/package/packageBugs/bug) &gt; 0">
+			<a class="tabhandle" href="javascript:showTab('bugs');">Open bugs</a>
+		</xsl:if>
+		<!-- content -->
+		<xsl:apply-templates select="versions" />
+		<xsl:apply-templates select="deps" />
+		<xsl:apply-templates select="packageBugs" />
+		<div style="clear; both" />
+	</div>
   </xsl:template>
 
   <!-- Package URLs -->
@@ -121,14 +147,16 @@
 		</xsl:attribute>
 		<xsl:value-of select="url" />
 	</a>
+	<br />
   </xsl:template>
 
   <!-- Package bugs -->
   <xsl:template match="/gentoo/summary/package/packageBugs">
-  	<h3>Open bugs</h3>
-  	<ul>
-	  <xsl:apply-templates match="bug" />
-	</ul>
+  	<xsl:if test="count(/gentoo/summary/package/packageBugs/bug) &gt; 0">
+		<ul class="tabhidden" id="bugs">
+		  <xsl:apply-templates match="bug" />
+		</ul>
+	</xsl:if>
   </xsl:template>
   <xsl:template match="/gentoo/summary/package/packageBugs/bug">
   	<li>
@@ -154,10 +182,10 @@
 
   <!-- Package dependencies -->
   <xsl:template match="/gentoo/summary/package/deps">
-  	<h3>Dependencies</h3>
-	<ul>
-		<xsl:apply-templates match="/gentoo/summary/package/deps/package" />
-		<li><i>@system</i></li>
-	</ul>
+  	<xsl:if test="count(/gentoo/summary/package/deps/package) &gt; 0">
+		<ul class="tabhidden" id="deps">
+			<xsl:apply-templates match="/gentoo/summary/package/deps/package" />
+		</ul>
+	</xsl:if>
   </xsl:template>
 </xsl:stylesheet>
diff --git a/gentoobrowse/style.css b/gentoobrowse/style.css
index d0e558c..2f3bc2e 100644
--- a/gentoobrowse/style.css
+++ b/gentoobrowse/style.css
@@ -46,7 +46,7 @@ p {
 
 .versions {
 	border-collapse: collapse;
-	width: 95%;
+	margin: 10px;
 }
 .versions td {
 	border: 1px solid gray;
@@ -66,7 +66,9 @@ p {
 	padding: 10px 5px;
 }
 .urls {
-	margin: 8px 50px;
+	float: right;
+	margin: 8px 30px;
+	text-align: center;
 }
 
 table.grps {
@@ -107,3 +109,23 @@ form.tracker {
 .tracked {
 	font-weight: bold;
 }
+
+.tabbox {
+	border: 1px solid grey;
+	background: #eeeeee;
+	margin: 10px;
+}
+
+.tabvisible, .tabhidden {
+}
+.tabvisible {
+	display: block;
+}
+.tabhidden {
+	display: none;
+}
+.tabhandle {
+	display: span;
+	padding: 0 40px;
+	font-size: 14px;
+}