[vhffs-dev] Add improved disk quota

[Aaron Dewes <aaron.dewes@xxxxxx>]

Hello,


I'm currently trying to improve the design of vhffs. I made a little
improvement which displays the disk quota as gradient, which is a new
feature in CSS3. This also includes a fallback for older browsers, so if
linear-gradient is not available, disk quota is displayed as in the
current version. I also made little changes by removing/adding tabs and
newlines in the css file.

You can find the diff attached.


Aaron

diff --git a/vhffs-panel/templates/group/index.tt b/vhffs-panel/templates/group/index.tt
index 3b9669e1..e8625fe1 100644
--- a/vhffs-panel/templates/group/index.tt
+++ b/vhffs-panel/templates/group/index.tt
@@ -9,7 +9,7 @@
 [% IF use_quota %]
     <p>[% 'Quota (used/total): %d/%dMB' | i18n | pretty_print(p.get_quota_used, p.get_quota) | html %] &#8212;
     <span class="quota">
-        <span class="quota-used" style="width:[% (p.get_quota_used / p.get_quota * 100) | format('%d') %]%" title="[% (p.get_quota_used / p.get_quota * 100) | format('%.2f') %]%"></span>
+        <span class="quota-used" style="width:[% (p.get_quota_used / p.get_quota * 100) | format('%d') %]%" title="[% (p.get_quota_used / p.get_quota * 100) | format('%.2f') %]%"></span><span class="quota-unused" style="width:[% (100 - p.get_quota / p.get_quota_used  * 100) | format('%d') %]%" title="[% (100 - p.get_quota / p.get_quota_used  * 100) | format('%.2f') %]%"></span>
     </span></p>
 [% END # use_quota %]
     </li>
diff --git a/vhffs-themes/light-grey/main.css b/vhffs-themes/light-grey/main.css
index a3b87c5f..2ff0dc33 100644
--- a/vhffs-themes/light-grey/main.css
+++ b/vhffs-themes/light-grey/main.css
@@ -41,8 +41,8 @@ div#background-container {
 }

 /*************************************/
-	/* SECTION 2 - HEADER AND NAVIGATION */
-	/*************************************/
+/* SECTION 2 - HEADER AND NAVIGATION */
+/*************************************/
 #header {
 	width: 770px;
 	height: 65px;
@@ -52,9 +52,9 @@ div#background-container {
 }

 /*-----------------------------------*/
-	/* 2.1 - Sitename, slogan and banner */
-	/*-----------------------------------*/
-	/*.site-name {width: 300px; height: 50px; top: 12px; position: absolute; z-index: 4; overflow: hidden; margin: 0px; padding-left: 75px; color: rgb(69,140,204);}*/
+/* 2.1 - Sitename, slogan and banner */
+/*-----------------------------------*/
+/*.site-name {width: 300px; height: 50px; top: 12px; position: absolute; z-index: 4; overflow: hidden; margin: 0px; padding-left: 75px; color: rgb(69,140,204);}*/
 .site-name {
 	width: 300px;
 	height: 50px;
@@ -66,8 +66,9 @@ div#background-container {
 	color: rgb(69, 140, 204);
 }

-/*--------------------------*/ /* 2.2 - Navigation - Flags */
-	/*--------------------------*/
+/*--------------------------*/
+/* 2.2 - Navigation - Flags */
+/*--------------------------*/
 .navflag {
 	width: 750px;
 	top: 14px;
@@ -214,8 +215,9 @@ div#background-container {
     width: 100%
 }

-/*----------------------------*/ /* 2.5 - Navigation - Level 3 */
-	/*----------------------------*/
+/*----------------------------*/
+/* 2.5 - Navigation - Level 3 */
+/*----------------------------*/
 div#left-menu {
 	overflow: hidden;
 	width: 160px;
@@ -570,8 +572,8 @@ div.acltable div.tablebody form span {
 }

 /******************************************************/
-	/* SECTION 4 - SPECIFIC CLASSES FOR LAYOUTS #2 and #3 */
-	/******************************************************/
+/* SECTION 4 - SPECIFIC CLASSES FOR LAYOUTS #2 and #3 */
+/******************************************************/

 .content-login {
 	width: 569px;
@@ -668,7 +670,9 @@ p.subtitle {
         color: rgb(240, 0, 0);
 }

-/*----------------*/ /* - Forms        */ /*----------------*/
+/*----------------*/
+/* - Forms        */
+/*----------------*/
 input,textarea,select,button {
 	margin: 0px;
 	background-color: rgb(235, 235, 235);
@@ -1040,11 +1044,16 @@ span.quota-used {

 span.quota {
     width: 300px;
-	background-color: rgb(75, 75, 75);
+    background-color: rgb(127, 162, 202);
+    background: linear-gradient(90deg, green 0%, yellow 50%, red 100%);
 }

 span.quota-used {
-	background-color: rgb(127, 162, 202);
+    background-color: none;
+}
+
+span.quota-unused {
+    background-color: rgb(75, 75, 75);
 }

 /*-----------*/