From d43dfb8fa4d22fb70a42ea299596fcf0edb70b71 Mon Sep 17 00:00:00 2001
From: Marcin Haba <marcin.haba@bacula.pl>
Date: Sat, 16 Nov 2019 21:44:57 +0100
Subject: [PATCH] baculum: Tweak add transition effect on usage boxes

---
 gui/baculum/protected/Web/Pages/Dashboard.page |  8 ++++----
 gui/baculum/themes/Baculum-v2/css/baculum.css  | 10 ++++++++++
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/gui/baculum/protected/Web/Pages/Dashboard.page b/gui/baculum/protected/Web/Pages/Dashboard.page
index 3afa1f292..84e09bb66 100644
--- a/gui/baculum/protected/Web/Pages/Dashboard.page
+++ b/gui/baculum/protected/Web/Pages/Dashboard.page
@@ -8,7 +8,7 @@
 	</header>
 	<div class="w3-row-padding w3-margin-bottom">
 		<div class="w3-quarter">
-			<div class="w3-container w3-red w3-padding-16 w3-tooltip w3-animate-top">
+			<div class="w3-container w3-red w3-padding-16 w3-tooltip w3-animate-top usage_box">
 				<div class="w3-left"><i class="fa fa-desktop w3-xxxlarge"></i></div>
 				<div class="w3-right">
 					<h3 id="client_no">-</h3>
@@ -23,7 +23,7 @@
 			</div>
 		</div>
 		<div class="w3-quarter">
-			<div class="w3-container w3-blue w3-padding-16 w3-tooltip w3-animate-top">
+			<div class="w3-container w3-blue w3-padding-16 w3-tooltip w3-animate-top usage_box">
 				<div class="w3-left"><i class="fa fa-tasks w3-xxxlarge"></i></div>
 				<div class="w3-right">
 					<h3 id="job_no">-</h3>
@@ -37,7 +37,7 @@
 			</div>
 		</div>
 		<div class="w3-quarter">
-			<div class="w3-container w3-teal w3-padding-16 w3-tooltip w3-animate-top">
+			<div class="w3-container w3-teal w3-padding-16 w3-tooltip w3-animate-top usage_box">
 				<div class="w3-left"><i class="fa fa-tape w3-xxxlarge"></i></div>
 				<div class="w3-right">
 					<h3 id="pool_no">-</h3>
@@ -51,7 +51,7 @@
 			</div>
 		</div>
 		<div class="w3-quarter">
-			<div class="w3-container w3-orange w3-text-white w3-padding-16 w3-tooltip w3-animate-top">
+			<div class="w3-container w3-orange w3-text-white w3-padding-16 w3-tooltip w3-animate-top usage_box">
 				<div class="w3-left"><i class="fa fa-copy w3-xxxlarge"></i></div>
 				<div class="w3-right">
 					<h3 id="jobs_total_bytes">-</h3>
diff --git a/gui/baculum/themes/Baculum-v2/css/baculum.css b/gui/baculum/themes/Baculum-v2/css/baculum.css
index 074c50b32..7376fdd2d 100644
--- a/gui/baculum/themes/Baculum-v2/css/baculum.css
+++ b/gui/baculum/themes/Baculum-v2/css/baculum.css
@@ -298,3 +298,13 @@ table.component td:nth-of-type(1) {
 .bottom_buttons a, .bottom_buttons button {
 	margin: 0 3px;
 }
+
+.usage_box {
+	height: 138px;
+	-webkit-transition: height 0.3s; /* For Safari 3.1 to 6.0 */
+	transition: height 0.3s;
+}
+
+.usage_box:hover {
+	height: 200px;
+}
-- 
2.47.3