From 863ab8fadd264682de78e992bdfe6145a9f4bb18 Mon Sep 17 00:00:00 2001
From: simov <simeonvelichkov@gmail.com>
Date: Tue, 3 Dec 2013 00:30:45 +0200
Subject: [PATCH 1/3] Directory Middleware Improvements: - details and mobile
 views - include icon images only once from css

---
 lib/middleware/directory.js |  70 +++++++++++++++++---
 lib/public/directory.html   |   4 +-
 lib/public/style.css        | 123 ++++++++++++++++++++++++++++--------
 3 files changed, 158 insertions(+), 39 deletions(-)

diff --git a/lib/middleware/directory.js b/lib/middleware/directory.js
index 9b5cc918d..3a7894329 100644
--- a/lib/middleware/directory.js
+++ b/lib/middleware/directory.js
@@ -70,6 +70,7 @@ exports = module.exports = function directory(root, options){
   if (!root) throw new Error('directory() root path required');
   var hidden = options.hidden
     , icons = options.icons
+    , view = options.view || 'tiles'
     , filter = options.filter
     , root = normalize(root + sep);
 
@@ -109,7 +110,7 @@ exports = module.exports = function directory(root, options){
 
         // not acceptable
         if (!type) return next(utils.error(406));
-        exports[mediaType[type]](req, res, files, next, originalDir, showUp, icons, path);
+        exports[mediaType[type]](req, res, files, next, originalDir, showUp, icons, path, view);
       });
     });
   };
@@ -119,7 +120,7 @@ exports = module.exports = function directory(root, options){
  * Respond with text/html.
  */
 
-exports.html = function(req, res, files, next, dir, showUp, icons, path){
+exports.html = function(req, res, files, next, dir, showUp, icons, path, view){
   fs.readFile(__dirname + '/../public/directory.html', 'utf8', function(err, str){
     if (err) return next(err);
     fs.readFile(__dirname + '/../public/style.css', 'utf8', function(err, style){
@@ -131,7 +132,8 @@ exports.html = function(req, res, files, next, dir, showUp, icons, path){
         if (showUp) files.unshift({ name: '..' });
         str = str
           .replace('{style}', style)
-          .replace('{files}', html(files, dir, icons))
+          .replace('{iconstyle}', iconStyle(files, icons))
+          .replace('{files}', html(files, dir, icons, view))
           .replace('{directory}', dir)
           .replace('{linked-path}', htmlPath(dir));
         res.setHeader('Content-Type', 'text/html');
@@ -185,32 +187,80 @@ function htmlPath(dir) {
   }).join(' / ');
 }
 
+/**
+ * Load icon images, return css string.
+ */
+
+function iconStyle (files, useIcons) {
+  if (!useIcons) return '';
+  var data = {};
+  var views = { tiles: [], details: [], mobile: [] };
+
+  for (var i=0; i < files.length; i++) {
+    var file = files[i];
+    if (file.name == '..') continue;
+
+    var isDir = '..' == file.name || (file.stat && file.stat.isDirectory());
+    var icon = isDir ? icons.folder : icons[extname(file.name)] || icons.default;
+
+    var ext = extname(file.name);
+    ext = isDir ? '.directory' : (icons[ext] ? ext : '.default');
+
+    if (data[icon]) continue;
+    data[icon] = ext + ' .name{background-image: url(data:image/png;base64,' + load(icon)+');}';
+    views.tiles.push('.view-tiles ' + data[icon]);
+  	views.details.push('.view-details ' + data[icon]);
+  	views.mobile.push('#files ' + data[icon]);
+  }
+
+  var style = views.tiles.join('\n')
+    + '\n'+views.details.join('\n')
+    + '\n@media (max-width: 768px) {\n\t'
+    + views.mobile.join('\n\t')
+    + '\n}';
+  return style;
+}
+
 /**
  * Map html `files`, returning an html unordered list.
  */
 
-function html(files, dir, useIcons) {
-  return '<ul id="files">' + files.map(function(file){
-    var icon = ''
-      , isDir
+function html(files, dir, useIcons, view) {
+  	return '<ul id="files" class="view-'+view+'">'
+    + (view == 'details' ? (
+      '<li class="header">'
+      + '<span class="name">Name</span>'
+      + '<span class="size">Size</span>'
+      + '<span class="date">Modified</span>'
+      + '</li>') : '')
+    + files.map(function(file){
+    var isDir
       , classes = []
       , path = dir.split('/').map(function (c) { return encodeURIComponent(c); });
 
     if (useIcons) {
+      var ext = extname(file.name);
       isDir = '..' == file.name || (file.stat && file.stat.isDirectory());
-      icon = isDir ? icons.folder : icons[extname(file.name)] || icons.default;
-      icon = '<img src="data:image/png;base64,' + load(icon) + '" />';
+      ext = isDir ? '.directory' : (icons[ext] ? ext : '.default');
       classes.push('icon');
+      classes.push(ext.replace('.',''));
     }
 
     path.push(encodeURIComponent(file.name));
 
+    var date = file.name == '..' ? ''
+      : file.stat.mtime.toDateString()+' '+file.stat.mtime.toLocaleTimeString();
+    var size = file.name == '..' ? '' : file.stat.size;
+
     return '<li><a href="'
       + utils.normalizeSlashes(normalize(path.join('/')))
       + '" class="'
       + classes.join(' ') + '"'
       + ' title="' + file.name + '">'
-      + icon + file.name + '</a></li>';
+      + '<span class="name">'+file.name+'</span>'
+      + '<span class="size">'+size+'</span>'
+      + '<span class="date">'+date+'</span>'
+      + '</a></li>';
 
   }).join('\n') + '</ul>';
 }
diff --git a/lib/public/directory.html b/lib/public/directory.html
index 2d6370421..08cb718e6 100644
--- a/lib/public/directory.html
+++ b/lib/public/directory.html
@@ -2,8 +2,10 @@
 <html>
   <head>
     <meta charset='utf-8'> 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <title>listing directory {directory}</title>
     <style>{style}</style>
+    <style>{iconstyle}</style>
     <script>
       function $(id){
         var el = 'string' == typeof id
@@ -44,7 +46,7 @@
           var classes = this.getClasses().filter(function(curr){
             return curr != name;
           });
-          this.setAttribute('class', classes);
+          this.setAttribute('class', classes.join(' '));
         };
 
         return el;
diff --git a/lib/public/style.css b/lib/public/style.css
index 32b650710..2a05f85c4 100644
--- a/lib/public/style.css
+++ b/lib/public/style.css
@@ -1,5 +1,6 @@
+* { margin: 0; padding: 0; outline: 0; }
+
 body {
-  margin: 0;
   padding: 80px 100px;
   font: 13px "Helvetica Neue", "Lucida Grande", "Arial";
   background: #ECE9E9 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ECE9E9));
@@ -9,7 +10,6 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 h1, h2, h3 {
-  margin: 0;
   font-size: 22px;
   color: #343434;
 }
@@ -21,7 +21,7 @@ h1 {
   font-size: 60px;
 }
 h2 {
-	margin-top: 10px;
+  margin-top: 10px;
 }
 h3 {
   margin: 5px 0 10px 0;
@@ -29,13 +29,7 @@ h3 {
   border-bottom: 1px solid #eee;
   font-size: 18px;
 }
-ul {
-  margin: 0;
-  padding: 0;
-}
 ul li {
-  margin: 5px 0;
-  padding: 3px 8px;
   list-style: none;
 }
 ul li:hover {
@@ -64,7 +58,7 @@ a:hover {
   color: #303030;
 }
 #stacktrace {
-	margin-top: 15px;
+  margin-top: 15px;
 }
 .directory h1 {
   margin-bottom: 15px;
@@ -72,38 +66,27 @@ a:hover {
 }
 ul#files {
   width: 100%;
-  height: 500px;
+  height: 100%;
+  overflow: hidden;
 }
 ul#files li {
-  padding: 0;
-}
-ul#files li img {
-  position: absolute;
-  top: 5px;
-  left: 5px;
+  float: left;
+  width: 30%;
+  line-height: 25px;
+  margin: 1px;
 }
 ul#files li a {
-   position: relative;
   display: block;
-  margin: 1px;
-  width: 30%;
   height: 25px;
-  line-height: 25px;
-  text-indent: 8px;
-  float: left;
   border: 1px solid transparent;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   overflow: hidden;
-  text-overflow: ellipsis;
-}
-ul#files li a.icon {
-  text-indent: 25px;
+  white-space: nowrap;
 }
 ul#files li a:focus,
 ul#files li a:hover {
-  outline: none;
   background: rgba(255,255,255,0.65);
   border: 1px solid #ececec;
 }
@@ -139,3 +122,87 @@ ul#files li a.highlight {
   width: 120px;
   opacity: 1.0; 
 }
+
+/*views*/
+#files span { display: inline-block; overflow: hidden; text-overflow: ellipsis; text-indent: 10px; }
+#files .name { background-repeat: no-repeat; }
+#files .icon .name { text-indent: 28px; }
+
+/*tiles*/
+.view-tiles .name { width: 100%; background-position: 8px 5px; }
+.view-tiles .size,
+.view-tiles .date { display: none; }
+
+/*details*/
+ul#files.view-details li { float: none; display: block; width: 90%; }
+ul#files.view-details li.header { height: 25px; background: #000; color: #fff; font-weight: bold; }
+.view-details .header { border-radius: 5px; }
+
+.view-details .name { width: 60%; background-position: 8px 5px; }
+.view-details .size { width: 10%; }
+.view-details .date { width: 30%; }
+.view-details .size,
+.view-details .date { text-align: right; direction: rtl; }
+
+@media (max-width: 768px) {
+  body {
+    font-size: 13px;
+    line-height: 16px;
+    padding: 0;
+  }
+  #search {
+    position: static;
+    width: 100%;
+    font-size: 2em;
+    line-height: 1.8em;
+    text-indent: 10px;
+    border: 0;
+    border-radius: 0;
+    padding: 10px 0;
+    margin: 0;
+  }
+  #search:focus {
+    width: 100%;
+    border: 0;
+    opacity: 1;
+  }
+  .directory h1 {
+    font-size: 2em;
+    line-height: 1.5em;
+    color: #fff;
+    background: #000;
+    padding: 15px 10px;
+    margin: 0;
+  }
+  ul#files {
+    border-top: 1px solid #cacaca;
+  }
+  ul#files li {
+    float: none;
+    width: auto !important;
+    display: block;
+    border-bottom: 1px solid #cacaca;
+    font-size: 2em;
+    line-height: 1.2em;
+    text-indent: 0;
+    margin: 0;
+  }
+  ul#files li:nth-child(odd) {
+    background: #e0e0e0;
+  }
+  ul#files li a {
+    height: auto;
+    border: 0;
+    border-radius: 0;
+    padding: 15px 10px;
+  }
+  ul#files li a:focus,
+  ul#files li a:hover {
+    border: 0;
+  }
+  #files .header,
+  #files .size,
+  #files .date { display: none !important; }
+  #files .name { float: none; display: inline-block; width: 100%; text-indent: 0; background-position: 0 0; }
+  #files .icon .name { text-indent: 41px; }
+}

From 4de80a588645bdc5b9792bb1b3329d000fdd9d00 Mon Sep 17 00:00:00 2001
From: simov <simeonvelichkov@gmail.com>
Date: Tue, 3 Dec 2013 10:51:04 +0200
Subject: [PATCH 2/3] Style fix - each css property is on new line

---
 lib/public/style.css | 83 +++++++++++++++++++++++++++++++++++---------
 1 file changed, 66 insertions(+), 17 deletions(-)

diff --git a/lib/public/style.css b/lib/public/style.css
index 2a05f85c4..0709908a6 100644
--- a/lib/public/style.css
+++ b/lib/public/style.css
@@ -1,4 +1,8 @@
-* { margin: 0; padding: 0; outline: 0; }
+* {
+  margin: 0;
+  padding: 0;
+  outline: 0;
+}
 
 body {
   padding: 80px 100px;
@@ -124,26 +128,61 @@ ul#files li a.highlight {
 }
 
 /*views*/
-#files span { display: inline-block; overflow: hidden; text-overflow: ellipsis; text-indent: 10px; }
-#files .name { background-repeat: no-repeat; }
-#files .icon .name { text-indent: 28px; }
+#files span {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-indent: 10px;
+}
+#files .name {
+  background-repeat: no-repeat;
+}
+#files .icon .name {
+  text-indent: 28px;
+}
 
 /*tiles*/
-.view-tiles .name { width: 100%; background-position: 8px 5px; }
+.view-tiles .name {
+  width: 100%;
+  background-position: 8px 5px;
+}
 .view-tiles .size,
-.view-tiles .date { display: none; }
+.view-tiles .date {
+  display: none;
+}
 
 /*details*/
-ul#files.view-details li { float: none; display: block; width: 90%; }
-ul#files.view-details li.header { height: 25px; background: #000; color: #fff; font-weight: bold; }
-.view-details .header { border-radius: 5px; }
-
-.view-details .name { width: 60%; background-position: 8px 5px; }
-.view-details .size { width: 10%; }
-.view-details .date { width: 30%; }
+ul#files.view-details li {
+  float: none;
+  display: block;
+  width: 90%;
+}
+ul#files.view-details li.header {
+  height: 25px;
+  background: #000;
+  color: #fff;
+  font-weight: bold;
+}
+.view-details .header {
+  border-radius: 5px;
+}
+.view-details .name {
+  width: 60%;
+  background-position: 8px 5px;
+}
+.view-details .size {
+  width: 10%;
+}
+.view-details .date {
+  width: 30%;
+}
 .view-details .size,
-.view-details .date { text-align: right; direction: rtl; }
+.view-details .date {
+  text-align: right;
+  direction: rtl;
+}
 
+/*mobile*/
 @media (max-width: 768px) {
   body {
     font-size: 13px;
@@ -202,7 +241,17 @@ ul#files.view-details li.header { height: 25px; background: #000; color: #fff; f
   }
   #files .header,
   #files .size,
-  #files .date { display: none !important; }
-  #files .name { float: none; display: inline-block; width: 100%; text-indent: 0; background-position: 0 0; }
-  #files .icon .name { text-indent: 41px; }
+  #files .date {
+    display: none !important;
+  }
+  #files .name {
+    float: none;
+    display: inline-block;
+    width: 100%;
+    text-indent: 0;
+    background-position: 0 0;
+  }
+  #files .icon .name {
+    text-indent: 41px;
+  }
 }

From 0e4ca2087f2b4b74878c93da32fba2c49623a8bd Mon Sep 17 00:00:00 2001
From: simov <simeonvelichkov@gmail.com>
Date: Tue, 3 Dec 2013 16:00:21 +0200
Subject: [PATCH 3/3] Put the css styles into one place

---
 lib/middleware/directory.js | 3 +--
 lib/public/directory.html   | 1 -
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/lib/middleware/directory.js b/lib/middleware/directory.js
index 3a7894329..ac8ea7a5c 100644
--- a/lib/middleware/directory.js
+++ b/lib/middleware/directory.js
@@ -131,8 +131,7 @@ exports.html = function(req, res, files, next, dir, showUp, icons, path, view){
         files.sort(fileSort);
         if (showUp) files.unshift({ name: '..' });
         str = str
-          .replace('{style}', style)
-          .replace('{iconstyle}', iconStyle(files, icons))
+          .replace('{style}', style.concat(iconStyle(files, icons)))
           .replace('{files}', html(files, dir, icons, view))
           .replace('{directory}', dir)
           .replace('{linked-path}', htmlPath(dir));
diff --git a/lib/public/directory.html b/lib/public/directory.html
index 08cb718e6..8ed8b4ae7 100644
--- a/lib/public/directory.html
+++ b/lib/public/directory.html
@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <title>listing directory {directory}</title>
     <style>{style}</style>
-    <style>{iconstyle}</style>
     <script>
       function $(id){
         var el = 'string' == typeof id