Update the icon mode in CryptDrive

www/drive/file.css

@@ -7,7 +7,7 @@ body {
   padding: 0;
   margin: 0;
   position: relative;
-  font-size: 20px;
+  font-size: 16px;
   overflow: auto;
 }
 body {
@@ -305,6 +305,9 @@ span.fa-folder-open {
   width: 50px;
   font-size: 40px;
 }
+#content .element .truncated {
+  display: none;
+}
 #content div.grid {
   padding: 20px;
 }
@@ -312,19 +315,35 @@ span.fa-folder-open {
   display: inline-block;
   margin: 10px 10px;
   width: 140px;
+  height: 140px;
   text-align: center;
   vertical-align: top;
   overflow: hidden;
   text-overflow: ellipsis;
-  padding-top: 10px;
+  padding-top: 5px;
   padding-bottom: 5px;
-  max-height: 145px;
 }
 #content div.grid li:not(.selected):not(.selectedTmp) {
-  border: 1px solid transparent;
+  border: 1px solid #CCC;
 }
 #content div.grid li .name {
   width: 100%;
+  height: 48px;
+  margin: 8px 0;
+  display: inline-flex;
+  justify-content: center;
+  overflow: hidden;
+}
+#content div.grid li.element {
+  position: relative;
+}
+#content div.grid li .truncated {
+  display: block;
+  position: absolute;
+  bottom: 0px;
+  left: 0;
+  right: 0;
+  text-align: center;
 }
 #content div.grid li input {
   width: 100%;
@@ -333,7 +352,8 @@ span.fa-folder-open {
 #content div.grid li .fa {
   display: block;
   margin: auto;
-  font-size: 40px;
+  font-size: 48px;
+  margin: 8px 0;
   text-align: center;
 }
 #content div.grid li .fa.listonly {

www/drive/file.less

@@ -32,7 +32,7 @@ html, body {
     padding: 0;
     margin: 0;
     position: relative;
-    font-size: 20px;
+    font-size: 16px;
     overflow: auto;
 }
 
@@ -359,25 +359,45 @@ span {
             }
         }
     }
+    .element {
+        .truncated { display: none; }
+    }
     div.grid {
         padding: 20px;
         li {
             display: inline-block;
             margin: 10px 10px;
             width: 140px;
+            height: 140px;
             text-align: center;
             vertical-align: top;
             overflow: hidden;
             text-overflow: ellipsis;
-            padding-top: 10px;
+            padding-top: 5px;
             padding-bottom: 5px;
-            max-height: 145px;
 
             &:not(.selected):not(.selectedTmp) {
-                border: 1px solid transparent;
+                border: 1px solid #CCC;
             }
             .name {
                 width: 100%;
+                height: 48px;
+                margin: 8px 0;
+                display: inline-flex;
+                //align-items: center;
+                justify-content: center;
+                overflow: hidden;
+                //text-overflow: ellipsis;
+            }
+            &.element {
+                position: relative;
+            }
+            .truncated {
+                display: block;
+                position: absolute;
+                bottom: 0px;
+                left: 0; right: 0;
+                text-align: center;
             }
             input {
                 width: 100%;
@@ -386,7 +406,8 @@ span {
             .fa {
                 display: block;
                 margin: auto;
-                font-size: 40px;
+                font-size: 48px;
+                margin: 8px 0;
                 text-align: center;
                 &.listonly {
                     display: none;

www/drive/main.js

@@ -1760,6 +1760,17 @@ define([
             }
             //$content.append($toolbar).append($title).append($info).append($dirContent);
             $content.append($info).append($dirContent);
+
+            var $truncated = $('<span>', {'class': 'truncated'}).text('...');
+            $content.find('.element').each(function (idx, el) {
+                var $name = $(el).find('.name');
+                if ($name[0].scrollHeight > $name[0].clientHeight) {
+                    var $tr = $truncated.clone();
+                    $tr.attr('title', $name.attr('title'));
+                    $(el).append($tr);
+                }
+            });
+
             $content.scrollTop(s);
             appStatus.ready(true);
         };