From c01ba85517e35a59be262a000ce5f4d07daafeae Mon Sep 17 00:00:00 2001
From: Davide Franco <bacula-dev@dflc.ch>
Date: Sat, 23 Jul 2011 16:01:38 +0200
Subject: [PATCH] bacula-web: html and css improvments in all pages

---
 gui/bacula-web/style/default.css              | 47 +++++++++++--------
 gui/bacula-web/templates/backupjob-report.tpl |  4 +-
 gui/bacula-web/templates/client-report.tpl    | 31 ++++++------
 gui/bacula-web/templates/index.tpl            | 14 ++----
 gui/bacula-web/templates/jobs.tpl             |  5 +-
 5 files changed, 51 insertions(+), 50 deletions(-)

diff --git a/gui/bacula-web/style/default.css b/gui/bacula-web/style/default.css
index 57d7124206..2163e0a561 100644
--- a/gui/bacula-web/style/default.css
+++ b/gui/bacula-web/style/default.css
@@ -91,7 +91,7 @@ a:link, a:visited, a:hover, a:visited {
 #main_left {
  position: absolute; 
  left:10px; 
- width: 400px; 
+ width: 380px; 
  border:none; 
  margin-top: 0px; 
  background-color: #FFFFFF;
@@ -99,15 +99,15 @@ a:link, a:visited, a:hover, a:visited {
 
 #main_middle {
  position: absolute;
- left:420px;
- width: 400px;
+ left:400px;
+ width: 380px;
  border: none;
  margin-top: 0px;
 }
 #main_right {
  position: absolute; 
- left: 830px; 
- width: 350px; 
+ left: 790px; 
+ width: 300px; 
  border: none; 
  margin-top: 0px;
 }
@@ -115,8 +115,8 @@ a:link, a:visited, a:hover, a:visited {
 #main_center {
  position: absolute; 
  left:10px; 
- width: 1000px; 
- /*border: 1px solid red; */
+ min-width: 800px;
+ width: auto; 
  margin-top: 0px;
 }
 
@@ -132,20 +132,30 @@ a:link, a:visited, a:hover, a:visited {
 }
 
 .box {
- border: 1px solid black;
- width: 100%;
- margin: 10px 0px 10px 0px;
+ border: 1px solid #c8c8c8;
+ width: auto;
+ min-height: 100px;
+ margin-top: 10px;
+ margin-bottom: 10px;
  padding: 0px;
  text-align: center;
 }
 
-.box h3, .box h4 {
- text-align:left;
- margin-left: 10px;
+.box h4, .box h5 {
+ background-color: #eeeeee;
+ width: auto;
+ text-align: center;
+ font-weight: bold;
+ padding: 3px;
+ margin: 5px 0px 5px 0px;
+}
+
+.box img.graph {
+ width: 350px;
+ margin: 5px 0px;
 }
 
 .box p.title {
- /*height: 25px;*/
  text-align: center;
  vertical-align: middle;
  font-size: 11pt;
@@ -158,12 +168,15 @@ a:link, a:visited, a:hover, a:visited {
 
 .box div.footer { 
  text-align: right; 
- padding: 3px; 
+ padding: 0px;
+ margin: 3px;
+ margin-right: 20px;
 }
 
 .box div.footer a {
  text-decoration: none;
  font-size: 9pt;
+ font-weight: bold;
  vertical-align: middle;
 }
 
@@ -178,16 +191,12 @@ a:link, a:visited, a:hover, a:visited {
 }
 
 .box table tr td.label { 
- background-color: #FFFFFF;
  font-weight: bold;
  text-align: left;
- padding: 3px;
 }
 
 .box table td.info {
  text-align: right;
- background-color: #FFFFFF;
- padding: 3px 10px;
 }
 
 .box table tr td.info a { font-size: 8pt;}
diff --git a/gui/bacula-web/templates/backupjob-report.tpl b/gui/bacula-web/templates/backupjob-report.tpl
index 9867f8a7e7..66c22e3ffa 100644
--- a/gui/bacula-web/templates/backupjob-report.tpl
+++ b/gui/bacula-web/templates/backupjob-report.tpl
@@ -69,8 +69,8 @@
   <!-- Transfered Bytes/Files graph -->
   <div class="box">
 	<p class="title">Transfered Bytes / Files</p>
-	<img src="{$graph_stored_bytes}" alt="" />
-	<img src="{$graph_stored_files}" alt="" />
+	<img class="graph" src="{$graph_stored_bytes}" alt="" />
+	<img class="graph" src="{$graph_stored_files}" alt="" />
   </div> <!-- end div class=box -->
   
   </div> <!-- end div id=main_center -->
diff --git a/gui/bacula-web/templates/client-report.tpl b/gui/bacula-web/templates/client-report.tpl
index b1c09b0dfd..962d61d971 100644
--- a/gui/bacula-web/templates/client-report.tpl
+++ b/gui/bacula-web/templates/client-report.tpl
@@ -16,22 +16,21 @@
   
   <div class="box">
 	<p class="title">Client(s) Report</p>
-
-  <h4>Client informations</h4>	
-  <table width="300px">
-	<tr>
-		<td width="100px" class="label"><b>Client name:</b></td> <td>{$client_name}</td>
-	</tr>
-	<tr>
-		<td class="label"><b>Client version:</b></td> <td>{$client_version}</td>
-	</tr>
-	<tr>
-		<td class="label"><b>Client os:</b></td> <td>{$client_os}</td>
-	</tr>
-	<tr>
-		<td class="label"><b>Client arch:</b></td> <td>{$client_arch}</td>
-	</tr>
-  </table>
+    <h4>Client informations</h4>	
+    <table width="300px">
+	  <tr>
+		<td width="100px" class="label">Client name:</td> <td>{$client_name}</td>
+	  </tr>
+	  <tr>
+		<td class="label">Client version:</td> <td>{$client_version}</td>
+	  </tr>
+	  <tr>
+		<td class="label">Client os:</td> <td>{$client_os}</td>
+	  </tr>
+	  <tr>
+		<td class="label">Client arch:</td> <td>{$client_arch}</td>
+	  </tr>
+    </table>
 	
   </div> <!-- end div class=box -->
   
diff --git a/gui/bacula-web/templates/index.tpl b/gui/bacula-web/templates/index.tpl
index 2787a8b6ad..f04f407c33 100644
--- a/gui/bacula-web/templates/index.tpl
+++ b/gui/bacula-web/templates/index.tpl
@@ -15,7 +15,7 @@
 	<p class="title">
 	Pools and volumes status	
 	</p>
-	<img src="{$graph_pools}" alt="" />
+	<img class="graph" src="{$graph_pools}" alt="" />
 	<div class="footer">
 		<a href="pools.php" title="Show pools and volumes report">{t}View report{/t}</a>
 	</div>
@@ -24,7 +24,7 @@
   <!-- Stored Bytes for last 7 days -->
   <div class="box">
 	<p class="title" title="Stored bytes for last 7 days (GB)">Stored bytes</p>
-	  <img src="{$graph_stored_bytes}" alt="" />
+	  <img class="graph" src="{$graph_stored_bytes}" alt="" />
   </div> <!-- end div box -->
 
 </div>
@@ -33,7 +33,7 @@
   <!-- Last 24 hours jobs status -->
   <div class="box">
 	<p class="title" title="Last 24 hours jobs status">Jobs status</p>
-	  <img src="{$graph_jobs}" alt="" />
+	  <img class="graph" src="{$graph_jobs}" alt="" />
 	<div class="footer">
 		<a href="jobs.php" title="Show last 24 hours jobs status">View report</a>
 	</div>
@@ -114,13 +114,9 @@
   
 <div class="box">
 	<p class="title">Reports</p>
- 
  <!-- Custom report -->
  <form method="post" action="client-report.php">
 	<table>
-		<tr>
-			<td class="tbl_header" colspan="2"><b>Custom report</b></td>
-		</tr>
 		<tr>
 			<td class="label">Client</td>
 			<td class="info">
@@ -163,12 +159,10 @@
 	</table>
  </form>
  
+ <h5>{t}Backup Job report{/t}</h5>
  <!-- Backup job report form -->
  <form method="post" action="backupjob-report.php">
    <table>
-	 <tr>
- 	   <td colspan="2" class="tbl_header"><b>{t}Backup Job report{/t}</b></td>
-	 </tr>
 	 <tr>
 		<td class="label">Select a backup job</td>
 		<td class="info">
diff --git a/gui/bacula-web/templates/jobs.tpl b/gui/bacula-web/templates/jobs.tpl
index 3c7888f19f..70d2884bb3 100644
--- a/gui/bacula-web/templates/jobs.tpl
+++ b/gui/bacula-web/templates/jobs.tpl
@@ -18,6 +18,7 @@
   <div class="box">
 	<p class="title">Jobs report</p>
 	<!-- Filter jobs -->
+	<h4>Filter jobs</h4>
 	<form action="jobs.php" method="post">
 	<table border="0">
 	  <tr>
@@ -33,12 +34,10 @@
 			{html_options name=status values=$job_status options=$job_status selected=$job_status_filter onChange="submit();"}
 		</td>
 	  </tr>
-	  <tr>
-		<td colspan="8">&nbsp;</td>
-	  </tr>
 	</table>
 	</form>
 	
+	<h4>Jobs result</h4>
 	<table border="0">
 	  <tr>
 		<td class="tbl_header">Status</td>
-- 
2.39.5