From 9e9701d9093fbee16ede63821b7c351e7c418d59 Mon Sep 17 00:00:00 2001
From: Davide Franco <bacula-dev@dflc.ch>
Date: Wed, 15 Dec 2010 18:01:34 +0100
Subject: [PATCH] bacula-web: Changed Pools and Volumes design

 - In Pools page, volumes list by pool is now scrollable (appreciable if more than 100 volumes by pool)
---
 gui/bacula-web/style/default.css   | 11 +++++
 gui/bacula-web/templates/pools.tpl | 67 +++++++++++++++---------------
 2 files changed, 45 insertions(+), 33 deletions(-)

diff --git a/gui/bacula-web/style/default.css b/gui/bacula-web/style/default.css
index c25bbe0c46..f615defad7 100644
--- a/gui/bacula-web/style/default.css
+++ b/gui/bacula-web/style/default.css
@@ -94,6 +94,17 @@ a:hover { color: #736F6E }
  margin-top: 0px;
 }
 
+.listbox {
+ /*border: 1px solid red;*/
+ width: 100%;
+ height: auto;
+ overflow: auto;
+ margin: 0px;
+ padding: 0px;
+ text-align: center;
+ max-height: 420px;
+}
+
 .box {
  border: 1px solid black;
  width: 100%;
diff --git a/gui/bacula-web/templates/pools.tpl b/gui/bacula-web/templates/pools.tpl
index 75d655215d..6af7f1ce1a 100644
--- a/gui/bacula-web/templates/pools.tpl
+++ b/gui/bacula-web/templates/pools.tpl
@@ -22,43 +22,44 @@
 </div>
 
 <div id="main_center">
+
+{foreach from=$pools item=pool key=pool_name}
 <div class="box">
-  <p class="title">Pools</p>
-	
-  <table class="list">
-	{foreach from=$pools item=pool key=pool_name}
-	<tr>
-		<th colspan="6" style="font-size: 10pt; text-align: center; background-color: #E0C8E5; color: black; padding: 3px;">
-			{$pool_name}
-		</th>
-	</tr>
-	<tr style="text-align: center;">
-		<td class="info">Name</td>
-		<td class="info">{t}Bytes{/t}</td>
-		<td class="info">{t}Media Type{/t}</td>
-		<td class="info">{t}Expire{/t}</td>
-		<td class="info">{t}Last written{/t}</td>
-		<td class="info">{t}Status{/t}</td>
-	</tr>
-	{foreach from=$pool item=volume}
+	<p class="title">{$pool_name}</p>
+	<table class="list">
 		<tr style="text-align: center;">
-			<td style="text-align: left;">{$volume.volumename}</td>
-			<td>{$volume.volbytes}</td>
-			<td>{$volume.mediatype}</td>
-			<td>{$volume.expire}</td>
-			<td>{$volume.lastwritten}</td>
-			<td>{$volume.volstatus}</td>
-		{foreachelse}
-		<tr>
-			<td colspan="6" style="text-align: center; font-weight: bold; font-size: 8pt; padding: 1em;">
-				No volume in this pool
-			</td>
-		{/foreach}
+			<td class="info">Name</td>
+			<td class="info">{t}Bytes{/t}</td>
+			<td class="info">{t}Media Type{/t}</td>
+			<td class="info">{t}Expire{/t}</td>
+			<td class="info">{t}Last written{/t}</td>
+			<td class="info">{t}Status{/t}</td>
 		</tr>
-	{/foreach}
-  </table>
+	</table>
+	
+	<div class="listbox">
+		<table class="list">
+			{foreach from=$pool item=volume}
+			<tr style="text-align: center;">
+				<td>{$volume.volumename}</td>
+				<td>{$volume.volbytes}</td>
+				<td>{$volume.mediatype}</td>
+				<td>{$volume.expire}</td>
+				<td>{$volume.lastwritten}</td>
+				<td>{$volume.volstatus}</td>
+			</tr>
+			{foreachelse}
+			<tr>
+				<td colspan="6" style="text-align: center; font-weight: bold; font-size: 8pt; padding: 1em;">
+					No volume(s) in this pool
+				</td>
+			</tr>
+			{/foreach}
+		</table>	
+	</div>
+</div> <!-- end div box-->
+{/foreach}
 
-</div> <!-- end div box -->
 </div> <!-- end div main_center -->
 
 <!-- End volumes.tpl -->
-- 
2.39.5