Improve visual of disk info :)

public/css/foundation.css

@@ -5329,3 +5329,36 @@ th.hide-for-touch {
 
 .touch th.show-for-touch {
   display: table-cell !important; }
+
+
+
+
+/** CUSTOM **/
+
+.disk-info {
+  width: 120px;
+  display: block;
+  line-height: 1;
+  height: 100%;
+  padding-top: 12px;
+  font-size: 0.75em;
+  text-align: center;
+}
+
+.disk-bar {
+  background: #AAA;
+  border-radius: 4px;
+  width: 100%;
+  height: 8px;
+  display: block;
+  margin-bottom: 5px;
+}
+
+.disk-bar > .inner-bar {
+  background: #FFF;
+  border-radius: 4px;
+  height: 100%;
+  display: block;
+}
+
+

public/js/custom.js

@@ -57,8 +57,9 @@ function refreshList(){
 
 function diskInfo(){
   $.getJSON( "api/get_diskinfo", function ( data ) {
-    percent = (data['free'] / data['total']) * 100;
-    $(".diskinfo").html(bytesToSize(data['free'], false) + ' Free');
+    percent = 100 - (data['free'] / data['total'] * 100);
+    $(".disk-info > .text-info").html(bytesToSize(data['free'], false) + ' Free');
+    $(".disk-bar > .inner-bar").css('width', percent + '%');
   });
 }
 

views/index.haml

@@ -14,8 +14,10 @@
           %ul.right
             %li
               %a
-                %i.fi-graph-pie
-                %span.diskinfo 
+                %span.disk-info 
+                  %span.disk-bar
+                    %span.inner-bar
+                  %span.text-info
             %li.divider
             %li.has-form
               %a.button.radius.success= "&#8593; <strong id='up-info'></strong>"