baculum: Tweak add transition effect on usage boxes

diff --git a/gui/baculum/protected/Web/Pages/Dashboard.page b/gui/baculum/protected/Web/Pages/Dashboard.page
index 3afa1f2924c7c03700f382df4b6ad8113046155a..84e09bb66a428551db1ccc9c9709a986638d312b 100644 (file)
--- 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 074c50b3248c5f6249fc6d913f93b446cf08c4d5..7376fdd2d7aa1e4b224fde93065f9284cc3d4213 100644 (file)
--- 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;
+}