[vhffs-dev] Add gradient to disk quota (working version)

[Aaron Dewes <aaron.dewes@xxxxxx>]

Hello Sylvain,

thank you for your feedback. I just forgot to include some fixes in the
patch.

You can find the updated patch attached. I also added an example screenshot.


Aaron

From db615991f124d93348732a95f55a1ec5a2f2785e Mon Sep 17 00:00:00 2001
From: Aaron Dewes <aaron.dewes@xxxxxx>
Date: Mon, 1 Jun 2020 19:30:55 +0200
Subject: [PATCH] Add gradient to disk quota

Includes fallback for older browsers
Also fixes formatting in main.css
---
 vhffs-panel/templates/group/index.tt      |  2 +-
 vhffs-panel/templates/group/info.tt       |  2 +-
 vhffs-panel/templates/repository/prefs.tt |  2 +-
 vhffs-themes/light-grey/main.css          | 57 ++++++++++++++---------
 4 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/vhffs-panel/templates/group/index.tt b/vhffs-panel/templates/group/index.tt
index 3b9669e1..a33d3e23 100644
--- a/vhffs-panel/templates/group/index.tt
+++ b/vhffs-panel/templates/group/index.tt
@@ -36,7 +36,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_used / p.get_quota  * 100) | format('%d') %]%" title="[% (100 - p.get_quota_used / p.get_quota  * 100) | format('%.2f') %]%"></span>
     </span></p>
 [% END # use_quota %]
     </li>
diff --git a/vhffs-panel/templates/group/info.tt b/vhffs-panel/templates/group/info.tt
index 947133ef..38b61a0b 100644
--- a/vhffs-panel/templates/group/info.tt
+++ b/vhffs-panel/templates/group/info.tt
@@ -6,7 +6,7 @@
 [% IF use_quota %]
 	<li>[% 'Quota (used/total): %d/%dMB' | i18n | pretty_print(group.get_quota_used, group.get_quota) | html %] &#8212;
         <span class="quota">
-            <span class="quota-used" style="width:[% (group.get_quota_used / group.get_quota * 100) | format('%d') %]%" title="[% (group.get_quota_used / group.get_quota * 100) | format('%.2f') %]%"></span>
+            <span class="quota-used" style="width:[% (group.get_quota_used / group.get_quota * 100) | format('%d') %]%" title="[% (group.get_quota_used / group.get_quota * 100) | format('%.2f') %]%"></span><span class="quota-unused" style="width:[% (100 - group.get_quota_used / group.get_quota  * 100) | format('%d') %]%" title="[% (100 - group.get_quota_used / group.get_quota  * 100) | format('%.2f') %]%"></span>
         </span>
 	</li>
 [% END # use_quota %]
diff --git a/vhffs-panel/templates/repository/prefs.tt b/vhffs-panel/templates/repository/prefs.tt
index 467be1a7..033a7e86 100644
--- a/vhffs-panel/templates/repository/prefs.tt
+++ b/vhffs-panel/templates/repository/prefs.tt
@@ -4,7 +4,7 @@
 <div class="info_quota">
 	<p>[% 'Quota (used/total): %d/%dMB' | i18n | pretty_print(repository.get_quota_used, repository.get_quota) | html %] &#8212;
         <span class="quota">
-            <span class="quota-used" style="width:[% (repository.get_quota_used / repository.get_quota * 100) | format('%d') %]%" title="[% (repository.get_quota_used / repository.get_quota * 100) | format('%.2f') %]%"></span>
+            <span class="quota-used" style="width:[% (repository.get_quota_used / repository.get_quota * 100) | format('%d') %]%" title="[% (repository.get_quota_used / repository.get_quota * 100) | format('%.2f') %]%"></span><span class="quota-unused" style="width:[% (100 - repository.get_quota_used / repository.get_quota  * 100) | format('%d') %]%" title="[% (100 - repository.get_quota_used / repository.get_quota  * 100) | format('%.2f') %]%"></span>
         </span>
 	</p>
 </div>
diff --git a/vhffs-themes/light-grey/main.css b/vhffs-themes/light-grey/main.css
index a3b87c5f..481d4620 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,8 @@ 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;
@@ -66,8 +65,9 @@ div#background-container {
 	color: rgb(69, 140, 204);
 }

-/*--------------------------*/ /* 2.2 - Navigation - Flags */
-	/*--------------------------*/
+/*--------------------------*/
+/* 2.2 - Navigation - Flags */
+/*--------------------------*/
 .navflag {
 	width: 750px;
 	top: 14px;
@@ -214,8 +214,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 +571,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 +669,9 @@ p.subtitle {
         color: rgb(240, 0, 0);
 }

-/*----------------*/ /* - Forms        */ /*----------------*/
+/*----------------*/
+/* - Forms        */
+/*----------------*/
 input,textarea,select,button {
 	margin: 0px;
 	background-color: rgb(235, 235, 235);
@@ -1032,21 +1035,31 @@ div#tagging-panel div.request label {

 /* quota */
 span.quota,
-span.quota-used {
+span.quota-used,
+span.quota-unused {
     display: inline-block;
     vertical-align: middle;
     height: 20px;
 }

-span.quota {
+ 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);
+ span.quota-used {
+    background-color: none;
+    padding: 0;
+    margin: 0;
 }

+span.quota-unused {
+    background-color: rgb(75, 75, 75);
+    padding: 0;
+    margin: 0;
+ }
+
 /*-----------*/
 /* Subscribe */
 /*-----------*/
@@ -1060,10 +1073,10 @@ div#recaptcha_widget_div {
 /* Dijit overloading */
 /*********************/
 .tundra .dijitTextBox {
-	margin: 0px;
-	background: rgb(235, 235, 235);
-	color: rgb(30, 30, 30);
-	border: 1px solid rgb(150, 150, 150);;
+    margin: 0px;
+    background: rgb(235, 235, 235);
+    color: rgb(30, 30, 30);
+    border: 1px solid rgb(150, 150, 150);;
     width: 150px;
 }

--
2.25.1

Attachment: Improved Disk-Quota.png
Description: PNG image