From ba486f340d11235aa4836c43a53a7bf4ca3ad75f Mon Sep 17 00:00:00 2001
From: Mohammad Naghavi <mohamnag@gmail.com>
Date: Thu, 11 Feb 2016 18:42:41 +0100
Subject: [PATCH] human readable file size and bit of styling

---
 css/main.css     |  31 +++++++++++++++++++++++++--
 image/parent.png | Bin 0 -> 1090 bytes
 js/main.js       |  53 +++++++++++++++++++++++++++++++++--------------
 3 files changed, 67 insertions(+), 17 deletions(-)
 create mode 100644 image/parent.png

diff --git a/css/main.css b/css/main.css
index 6f1f314..15df0cf 100644
--- a/css/main.css
+++ b/css/main.css
@@ -31,7 +31,6 @@ a {
     display: inline-block;
     position: relative;
     padding-left: 4rem;
-    min-width: 70%;
 }
 
 .file-list .file-name::before {
@@ -59,14 +58,42 @@ a {
     background-image: url(../image/other.png);
 }
 
+.file-list .parent .file-name::before {
+    background-image: url(../image/parent.png);
+}
+
 .file-list .file-link {
 
 }
 
 .file-list .file-date {
+    padding: .25rem .5rem;
+    background: #1EAEDB;
+    border-radius: .5rem;
+    font-size: 70%;
+    margin: 0 .5rem;
+    color: #fff;
+}
 
+.file-list .directory .file-date {
+}
+
+.file-list .parent .file-date {
+    display: none;
 }
 
 .file-list .file-size {
-
+    padding: .25rem .5rem;
+    background: #24db53;
+    border-radius: .5rem;
+    font-size: 70%;
+    margin: 0 .5rem;
+    color: #fff;
 }
+
+.file-list .other .file-size,
+.file-list .parent .file-size,
+.file-list .directory .file-size {
+    display: none;
+}
+
diff --git a/image/parent.png b/image/parent.png
new file mode 100644
index 0000000000000000000000000000000000000000..6e8e2d760c9a0729a94654633cfb49f68379de8b
GIT binary patch
literal 1090
zcmV-I1ikx-P)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF000CDNkl<ZcwX(B
zUsBsJ5XL{nPG3t;06js;34j}<C#X3A@Q`%caRxK-v_tYhI6=h;N>4y?g3=R^8#FvO
z$#&#~few}>+maod>MavX^7qqfclE~%7K;~LY+*4!1>gZR12N9S&Y8t7Q#Z|0*U+pG
ziJ$+u0b{%WR3V)4uoGxDWBoBJ0HorD9HLtuc3ak!X?9>7K%)5QrD($Y-F?mXv;LS-
z0BZ4(o)g~hjI1lu?7$cRE%Aga9(Fv<cPr#EBLJ!@UJ%X=pvvNN1E{+ATmb4IJ~M#2
zh|dI|PU2GosGImy0O}}S8$eyfYXPXUcqITW@um}2qFVq{0AnmM;a|Gqx3!X(33~ou
z1jdf6^{&-0O~pnE-1!v`J_#^JOEQ4o@Hc=hqdn$oj5wUdnMn`|3m8tpu$}9jZB!-%
zaNSEDoXqkzud;w+02g^Xu~J|7iX{&7`UvG}(DR2J3?CFCenp#}SqotojJ?iKeFo48
z?{|5Ix=|G+0P&C#f*1|Ad63s6S5ap!Hc|J%&<5~MPZ%9$g`fqXNC-~_d%@Qo%$;Ms
zNR$nNHh{7qMEyn}+(11Q(?duFpiBr+-@Sncg2+u|{$hp&9i(xLsR5J@;qzb@4UDA_
zQl2|x0#G`H)v41|4nhC)DKmi5AtYPE49>izlQHH3P&x$R6TrU3hDyyd$lL%n0Kynx
zdod7ZaNM`5+{6fgG9h?kDmd(Ce8Qv-i^c$y3PF~xYeWR205l<7@~|rwS;k7D6*%sj
zq-kIrfEt3G<8jX)%woeLE#LF-<F$;o6#&T)Yypt0S{2d28UQH-!T}FEV`KKeZpib`
z+hC3F&)ZD~ZWX`^!g(8Lh^4J4;*ykc@oU&(34OD108Edxti5Q(xNz^{{^$LUbfB$U
zKv4i9E9edBKY$nlFTw((xd72U54+N>{n|_c&mX>UCnybr_`&;~hbZ)Hg4D?Z;<xY1
zOoR%K0P)9oWu?M}ikF)|P{v}YNb&0|@CFQV_m30jzo=VzA0YSsLSDfeB1MmU;^-6I
z!)@*qwk1}I_})-{dR^qEXer{89G~XsSJnrt(_XRkm87`px&JU|m2-mYjSq1aAQPYJ
zi<C+M@ch9M7?Xc(lEU;WWdTvB15PEe{?P?3sFmhqc;kJ*VQ;WU1aUz^x|n%XuRrgf
zI_-^_0%A*xEu3vIwnap3AQG*4MK7Cps}>M>>V_~|ozcq}NX49AVn40f7h(ZkZ*T{&
zos7~ns?h{av#rYXR1H~~0!cfxsuxoJFGiiQz|^;g)d3)cgN@+2qr9VD%oOlVU9+W$
zI8cGpyf!J^dLFP!S22=YUXWS(>c%OtF|fRa`)X`M^wZA&0+w!6UyADTIRF3v07*qo
IM6N<$g6h5U+5i9m

literal 0
HcmV?d00001

diff --git a/js/main.js b/js/main.js
index 4fad066..a24bfeb 100644
--- a/js/main.js
+++ b/js/main.js
@@ -22,19 +22,17 @@ $(document).ready(function () {
             fileItemElement.find(".file-date").text(moment(fileDate).fromNow());
         }
 
-        if (fileType === "directory") {
-            if (fileName === "..") {
-                // navigate to parent dir
-                fileItemElement.find(".file-link").click(function () {
-                    navigateTo(directory);
-                });
+        if (fileType === "parent") {
+            // navigate to parent dir
+            fileItemElement.find(".file-link").click(function () {
+                navigateTo(directory);
+            });
 
-            } else {
-                // navigate to sub dir
-                fileItemElement.find(".file-link").click(function () {
-                    navigateTo(directory + fileName + "/");
-                });
-            }
+        } else if (fileType === "directory") {
+            // navigate to sub dir
+            fileItemElement.find(".file-link").click(function () {
+                navigateTo(directory + fileName + "/");
+            });
 
         } else if (fileType === "other") {
             // nginx returns symlinks as type other,
@@ -95,7 +93,7 @@ $(document).ready(function () {
             fileListElement.append(renderFileElement(
                 parentDir,
                 "..",
-                "directory"
+                "parent"
             ));
         }
 
@@ -119,7 +117,10 @@ $(document).ready(function () {
             success: function (filesData) {
 
                 filesData.map(function (fileData) {
-                    return fileData.mtime = new Date(fileData.mtime);
+                    fileData.mtime = new Date(fileData.mtime);
+                    fileData.size = fileData.size ? fileSize(fileData.size) : null;
+
+                    return fileData;
                 });
 
                 renderFileList(filesData, path);
@@ -146,6 +147,28 @@ $(document).ready(function () {
         });
     }
 
+    function sizeOf(bytes) {
+        if (bytes == 0) {
+            return "0.00 B";
+        }
+        var e = Math.floor(Math.log(bytes) / Math.log(1024));
+        return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B';
+    }
+
+    function fileSize(bytes) {
+        var exp = Math.log(bytes) / Math.log(1024) | 0;
+        var value = bytes / Math.pow(1024, exp);
+
+        if (exp == 0) {
+            return value.toFixed(0) + ' bytes';
+
+        } else {
+            var result = value.toFixed(2);
+            return result + ' ' + 'KMGTPEZY'[exp - 1] + 'B';
+        }
+
+    }
+
     var isNavigating = false;
 
     function navigateToUrlLocation() {
@@ -156,7 +179,7 @@ $(document).ready(function () {
 
     if (history.replaceState) {
         window.onpopstate = function () {
-            if(!isNavigating) {
+            if (!isNavigating) {
                 navigateToUrlLocation();
             }
         };