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)

diff --git a/gui/bacula-web/style/default.css b/gui/bacula-web/style/default.css
index c25bbe0c46d34aba85db1d28e422c629289d44af..f615defad7cd9da2c6f6ccf94a386b4f30e73a1d 100644 (file)
--- 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 75d655215d8d0b48c5a44cd31ce71d35c14367d5..6af7f1ce1a66fbfe7c98ecfcb35e32ef46cb89d7 100644 (file)
--- 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 -->