From e0c6a7316324a74adfc7740760c31243a5cbb53c Mon Sep 17 00:00:00 2001
From: Davide Franco <bacula-dev@dflc.ch>
Date: Fri, 22 Oct 2010 18:28:14 +0200
Subject: [PATCH] bacula-web: Improved design and fixed html/css issue

---
 gui/bacula-web/style/default.css             |  66 ++++++++++--
 gui/bacula-web/templates/generaldata.tpl     |  22 ++--
 gui/bacula-web/templates/header.tpl          |   8 +-
 gui/bacula-web/templates/index.tpl           |  54 +++++-----
 gui/bacula-web/templates/last_run_report.tpl | 104 ++++++++++---------
 gui/bacula-web/templates/volumes.tpl         |  42 +++++---
 6 files changed, 189 insertions(+), 107 deletions(-)

diff --git a/gui/bacula-web/style/default.css b/gui/bacula-web/style/default.css
index f29052cb85..a53eb52f42 100644
--- a/gui/bacula-web/style/default.css
+++ b/gui/bacula-web/style/default.css
@@ -1,6 +1,6 @@
 body{
   background-color: #ffffff;
-  padding: 0px;
+  padding: 3px;
   margin: 0px;
   
   font-family: Arial,Verdana;
@@ -10,22 +10,23 @@ body{
  width: 100%;
  padding: 0px;
  margin: 0px;
+ margin-bottom: 15px;
  background-color: #1E90FF ;
 }
-#header p.title{
+#header p {
+ margin: 0px;
+ padding: 5px;
+ color: #FFFFFF;
  vertical-align: middle;
- background-image: url('images/bg2.png');
  font-size: 18pt;
  font-variant: small-caps;
  font-weight: bold;
  text-align: right;
- color: #FFFFFF;
- padding: 0.5em;
 }
+
 #subheader {
- width: 100%;
  font-size: 10pt;
- margin: 0px;
+ margin: 0em;
  padding: 0px;
  border-bottom: 1px solid black;
 }
@@ -44,6 +45,56 @@ body{
  text-decoration: none;
 }
 
+#main_left {
+ position: absolute; 
+ left:5px; 
+ width: 550px; 
+ border:none; 
+ margin-top: 1em; 
+ background-color: #FFFFFF;
+}
+
+#main_right {
+ position: absolute; 
+ left:560px; 
+ width: 420px; 
+ border: none; 
+ margin-top: 1em;
+}
+
+.box {
+ border: 1px solid black;
+ width: 100%;
+ margin: 10px 0px 0px 0px;
+ padding: 0px;
+ text-align: center;
+}
+
+.box p.title {
+ height: auto;
+ text-align: center;
+ vertical-align: middle;
+ font-size: 11pt;
+ background-color: #1E90FF;
+ color: white;
+ font-weight: bold;
+ padding: 0px;
+ margin-top: 0px;
+ margin-bottom: 5px;
+ padding-top: 5px;
+ padding-bottom: 5px;
+}
+
+.box img {
+ width: 410px;
+ margin: 0px;
+}
+
+table {
+ width: 100%;
+ margin: 0px;
+}
+
 a:link { color: #0000c0 }
 a:visited { color: #0000c0 }
 a:hover { color: #6040ff }
@@ -77,6 +128,7 @@ td,input,select {
  border-left-width: 1px; 
  border-top-width: 1px; 
  border-right-width: 0px;
+ background-image:url('../images/bg5.png');
 }
 .tbl_pool_inter_2 { 
  background-color: #D4D4D9; 
diff --git a/gui/bacula-web/templates/generaldata.tpl b/gui/bacula-web/templates/generaldata.tpl
index 1ed0d79453..bd6ffa406d 100644
--- a/gui/bacula-web/templates/generaldata.tpl
+++ b/gui/bacula-web/templates/generaldata.tpl
@@ -1,10 +1,16 @@
-<table class=genmed cellspacing="0" cellpadding="0" border=1 align="center" width=90%>
-<tr><td align=center class=tbl_medium background="images/bg3.png">
-{t}GENERAL DATA{/t}
-</td></tr>
-<tr><td class=code>
+<div class="box">
+	<p class="title">General informations</p>
+<!--
+<table class=genmed cellspacing="0" cellpadding="0" border=1 align="center" width=100%>
+<tr>
+  <td align=center class=tbl_medium background="images/bg3.png">
+	General information
+  </td>
+</tr>
+</table>
+-->
 
-<table class=genmed width="90%" cellspacing="1" cellpadding="3" border="0" align="center">
+<table class=genmed width="100%" cellspacing="1" cellpadding="3" border="0" align="center">
 <tr>	
 	<td width=35%>
 	{t}Total clients:{/t}
@@ -50,6 +56,4 @@
 	</td>
 </tr>
 </table>
-
-</td></tr>
-</table>
+</div> <!-- end div box -->
\ No newline at end of file
diff --git a/gui/bacula-web/templates/header.tpl b/gui/bacula-web/templates/header.tpl
index d6f1c1180f..327f37837f 100644
--- a/gui/bacula-web/templates/header.tpl
+++ b/gui/bacula-web/templates/header.tpl
@@ -1,7 +1,7 @@
 <!-- Header -->
 <div id="header">
- <p class="title">bacula-web</p>
-</div>
+ <p>bacula-web</p>
+</div> <!-- end div header -->
 
 <div id="subheader">
  <ul>
@@ -14,9 +14,9 @@
 		<a href="http://bacula-web.dflc.ch" target="_blank">About</a>
 	</li>
  </ul>
-</div>
+</div> <!-- end div subheader -->
 
-<!-- 
+<!-- Multi catalog selection will added in next release
 <table width="100%" cellpadding=0 cellspacing=0 border=0 bgcolor="#2F92AF">
  <tr>
 
diff --git a/gui/bacula-web/templates/index.tpl b/gui/bacula-web/templates/index.tpl
index 12db01f6cd..5a496d12ca 100644
--- a/gui/bacula-web/templates/index.tpl
+++ b/gui/bacula-web/templates/index.tpl
@@ -1,3 +1,4 @@
+{config_load file=bacula.conf}
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
   "http://www.w3.org/TR/html4/loose.dtd">
 <html lang="en">
@@ -14,37 +15,38 @@
 <title>bacula-web</title>
 </head>
 <body>
-
 {include file=header.tpl}
 
-{config_load file=bacula.conf}
+<div id="main_left">
+{include file=generaldata.tpl}
+<br /> 
+{include file=volumes.tpl}
+</div>
+
+<div id="main_right">
+  {if !#IndexReport#}
+    {include file=last_run_report.tpl} 	
+  {else}
+    {include file=report_select.tpl}
+  {/if}
+<!--  <table class=genmed cellspacing="1" cellpadding="3" border=0 align="center">
 
-<table width=1000px border=0 cellspacing=5 class="back">
-  <tr>
-	<td valign=top width=60%> 
-	  {include file=generaldata.tpl} 
-	  <br /> 
-	  {include file=volumes.tpl}
-	</td>
-	<td valign=top width=40% bgcolor=#DDDFF9 style="border-style: solid; border-color: grey">
-  	  {if !#IndexReport#}
-	    {include file=last_run_report.tpl} 	
-	  {else}
-		{include file=report_select.tpl}
-	  {/if}
-	  <table class=genmed cellspacing="1" cellpadding="3" border=0 align="center">
 		<tr>
 		  <td>
-			{if $server==""}
-			  <img src="stats.php?server={$server}&tipo_dato=69&title=General%20report&modo_graph=bars&sizex=420&sizey=250&MBottom=20&legend=1" />
-			{else}
-			  <img src="stats.php?server={$server}&tipo_dato=3&title={$server}&modo_graph=bars" />
-			{/if}
-		  </td>
+-->
+	<div class="box">
+		<p class="title">General report</p>
+		{if $server==""} 
+		  <img src="stats.php?server={$server}&tipo_dato=69&title=General%20report&modo_graph=bars&sizex=420&sizey=250&MBottom=20&legend=1" />
+		{else}
+		  <img src="stats.php?server={$server}&tipo_dato=3&title={$server}&modo_graph=bars" />
+		{/if}
+	</div> <!-- end div box -->
+<!--
+			</td>
 		</tr>
-	  </table>
-	</td>
-  </tr>
-</table>
+  </table>
+-->
+</div>
 
 {include file="footer.tpl"}
\ No newline at end of file
diff --git a/gui/bacula-web/templates/last_run_report.tpl b/gui/bacula-web/templates/last_run_report.tpl
index 80096f3aa4..bde0fc60b7 100644
--- a/gui/bacula-web/templates/last_run_report.tpl
+++ b/gui/bacula-web/templates/last_run_report.tpl
@@ -1,12 +1,17 @@
 <!-- last_run_report.tpl -->
 
-<table width=90% align=center {if !$status }background="images/backlast.gif"{else}background="images/backlastred.gif" {/if} style="background-repeat:no-repeat" height=178px border=0 cellspacing=0 cellpadding=0>
+<div class="box">
+	<p class="title">Last 24 hours status</p>
+<!--	
+<table width=100% align=center {if !$status }background="images/backlast.gif"{else}background="images/backlastred.gif" {/if} style="background-repeat:no-repeat" height=178px border=0 cellspacing=0 cellpadding=0>
  <tr>
  	<td colspan=2 align=center style="font-size: 12px; font-weight: bold; background-repeat: repeat" background="images/bg6.png" height=25>
  		{t}Status from last 24h{/t}
  	</td>
  </tr>
+-->
 {if #mode# == "Lite" && $smarty.get.Full_popup != "yes"}
+<table width="100%">
  <tr>
  	<td>
  		<b>{t}Errors:{/t}</b>
@@ -46,9 +51,11 @@
  		<a href="javascript:OpenWin('index.php?Full_popup=yes','490','350')">{t}Show details{/t}</a>
  	</td>
  </tr>
+ </table>
  
  {if $status != 0}
- 	<tr>
+<table>
+	<tr>
  		<td colspan=2>
  			<table border=0 cellpadding=0 cellspacing=0>
  				<tr>
@@ -119,20 +126,27 @@
  				{/section}
  			</table>
  		</td>
- 	</tr> 
+ 	</tr>
+</table>	
  {/if}
+</div> <!-- end div box --> 
  
+<div class="box">
+	<p class="title">Detailled report</p>
+ 
+ <form method="get" action="report.php" target="_blank">
+ <table>
+ <!--
  <tr>
  	<td align=right colspan=2 valign=bottom>
- 		<form method="get" action="report.php" target="_blank">
-		<table width="100%" cellpadding="0" cellspacing="3" border="1">
+
+		<table width="100%" cellpadding="0" cellspacing="3" border="0">
  			<tr bgcolor=white>
-				<!-- <td align=right colspan=3 background="images/bg1.png" style="font-size: 12px; font-weight: bold;"> -->
 				<td colspan="3" style="text-align: center; background-image: url(images/bg1.png); font-size: 12px; font-weight: bold;">
 				Detailed report
 				</td>
  			</tr>
- 			
+  -->		
  			<tr>
  				<td align=left>
  					{t}Select a job:{/t}
@@ -152,50 +166,46 @@
  				</td>
  				
  			</tr>
- 		</table>
+ </table>
 		</form>
- 	</td>
- </tr>
 {else if #mode# == "Full" || $smarty.get.Full_popup == "yes"}
- <tr>
- 	<td>
- 		<table width=100% class="genmed" cellpadding=2 cellspacing=0>
- 			<tr class="tbl_header1">
- 				<td><b>{t}Elapsed time{/t}</b></td>
- 				<td><b>{t}Client{/t}</b></td>
- 				<td><b>{t}Start Time{/t}</b></td>
- 				<td><b>{t}End Time{/t}</b></td>
- 				<td><b>{t}Type{/t}</b></td>
- 				<td><b>{t}Pool{/t}</b></td>
- 				<td><b>{t}Status{/t}</b></td>
- 			</tr>
- 			{section name=job loop=$clients}
- 				<tr class={cycle values="table3,table4"}>
- 					{section name=row loop=$clients[job]}
- 						<td align=left class="size_small">
- 							{if $smarty.section.row.iteration == 2}
- 							<a href=report.php?default=1&server={$clients[job][row]|escape:"url"} target="_blank">
- 							{/if}
- 							{if $smarty.section.row.last == TRUE}
-							  	{if $clients[job][row] eq "T"}
-								  	<img src={#root#}/images/s_ok.gif>
-							  	{else}
-									<img src={#root#}/images/s_error.gif>
-								{/if}
-							{else}
-							{$clients[job][row]}
-							{/if}
-							{if $smarty.section.row.iteration == 2}
-							</a>
-							{/if}
- 						</td>
- 					{/section}
- 				</tr>
- 			{/section}
- 		</table>
+<table>
+	<tr class="tbl_header1">
+ 		<td><b>{t}Elapsed time{/t}</b></td>
+		<td><b>{t}Client{/t}</b></td>
+ 		<td><b>{t}Start Time{/t}</b></td>
+ 		<td><b>{t}End Time{/t}</b></td>
+ 		<td><b>{t}Type{/t}</b></td>
+ 		<td><b>{t}Pool{/t}</b></td>
+ 		<td><b>{t}Status{/t}</b></td>
+ 	</tr>
+ 	{section name=job loop=$clients}
+ 	<tr class={cycle values="table3,table4"}>
+ 		{section name=row loop=$clients[job]}
+			<td align=left class="size_small">
+			{if $smarty.section.row.iteration == 2}
+ 				<a href=report.php?default=1&server={$clients[job][row]|escape:"url"} target="_blank">
+ 			{/if}
+ 			{if $smarty.section.row.last == TRUE}
+			{if $clients[job][row] eq "T"}
+			  	<img src={#root#}/images/s_ok.gif>
+			{else}
+				<img src={#root#}/images/s_error.gif>
+			{/if}
+			{else}
+				{$clients[job][row]}
+			{/if}
+				{if $smarty.section.row.iteration == 2}
+			</a>
+			{/if}
+			</td>
+		{/section}
+ 	</tr>
+ 		{/section}
  	</td>
  </tr>
-{/if}
 </table>
+{/if}
 
+</div>
 <!-- end last_run_report.tpl -->
\ No newline at end of file
diff --git a/gui/bacula-web/templates/volumes.tpl b/gui/bacula-web/templates/volumes.tpl
index 2d1610cf69..b3f88a8862 100644
--- a/gui/bacula-web/templates/volumes.tpl
+++ b/gui/bacula-web/templates/volumes.tpl
@@ -1,30 +1,39 @@
 <!-- volumes.tpl -->
+
+<div class="box">
+	<p class="title">Pools</p>
+<!--
 <table border=0 width=100% class=code cellspacing=0 cellpadding=0>
 <tr align=center width=100%>
         <td class=tbl_header2 background="images/bg4.png"><b>Pools</b></td>
         <td class=tbl_header2 background="images/end4.png"><img src="images/empty.png"></td>
 </tr>
-<tr><td colspan=2>
-<table border=0 width=100% class=code cellspacing=0 cellpadding=0>
-{foreach from=$pools item=current}
-        <tr><td colspan=6>&nbsp;</td></tr>
+-->
+<table width="100%">
+	<tr>
+		<td colspan=2>
+			<table border=0 width=100% class=code cellspacing=0 cellpadding=0>
+				{foreach from=$pools item=current}
+			<tr>
+			<td colspan=6>&nbsp;</td></tr>
         <tr>
-                <th align=left style="background-color: #E0C8E5; color: black;" background="images/bg6.png">
+			<!-- <td align=left style="background-color: #E0C8E5; color: black;" background="images/bg6.png"> -->
+			<td style="text-align: left; background-color: #E0C8E5; color: black; background-image: url('images/bg6.png');">
                 {$current}
-                </th>
+            </td>
         </tr>
         {foreach from=$volumes item=current2}
                 {assign var=key value=$current2}
                 {foreach from=$key item=current3 name=loop}
                 {if $current3.3 == $current && $current3.0 != ""}
                         {if $smarty.foreach.loop.first == TRUE}
-                                <tr align=center background="images/bg5.png">
-                                        <td background="images/bg5.png" class=tbl_pool_inter_1>{t}Volume Name{/t}</td>
-                                        <td background="images/bg5.png" class=tbl_pool_inter_2>{t}Volume Bytes{/t}</td>
-                                        <td background="images/bg5.png" class=tbl_pool_inter_2>{t}Media Type{/t}</td>
-                                        <td background="images/bg5.png" class=tbl_pool_inter_2>{t}When expire?{/t}</td>
-                                        <td background="images/bg5.png" class=tbl_pool_inter_2>{t}Last Written{/t}</td>                                      
-                                        <td background="images/bg5.png" class=tbl_pool_inter_3>{t}Volume Status{/t}</td>
+                                <tr style="text-align: center; background-image: url('../images/bg5.png'); border: 1px solid black;">
+                                        <td style="font-size: 5pt;">Volume Name</td>
+                                        <td>Volume Bytes</td>
+                                        <td>Media Type</td>
+                                        <td>Expire on</td>
+                                        <td>Last Written</td>                                      
+                                        <td>Volume Status</td>
                                 </tr>
                         {/if}
                                 <tr align=center bgcolor={cycle values="#D9E3FC,#CBE7F5"}>
@@ -63,5 +72,10 @@
         {/foreach}
 {/foreach}
 </table>
-</td></tr></table>
+</td>
+</tr>
+</table>
+
+</div> <!-- end div box -->
+
 <!-- End volumes.tpl -->
-- 
2.39.5