More work on dashboard file listing - added support for non-html/image files

public/assets/css/_project-sass/_project-Main.scss

@@ -43,7 +43,7 @@
 .interior .header-Outro ul li {
   list-style: none;
   font-size: 80%;
-  margin-bottom: 7px;
+  margin-bottom: 2px;
 }
 .interior .signup-Form fieldset {
   padding: 20px;
@@ -61,7 +61,7 @@
   font-size: 1.2em;
   margin-bottom: 4px;
 }
-.welcome .close {
+.welcome .close-button {
   float: right;
   background: url(../img/welcome-close.png) no-repeat;
   width: 19px;
@@ -102,6 +102,10 @@
   background-image: url(../img/new-folder.png);
   padding-left: 26px;
 }
+.btn-Action.upload span {
+  background-image: url(../img/upload.png);
+  padding-left: 26px;
+}
 .files .list {
   padding: 20px;
 }
@@ -114,14 +118,17 @@
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
-  background: url(../img/drag-drop.png) no-repeat center center;
   min-height: 300px;
 }
+.files .list .upload-Boundary.with-instruction {
+  background: url(../img/drag-drop.png) no-repeat center center;
+}
 .file {
   float: left;
   padding: 5px;
-  margin-right: 20px;
+  margin-right: 10px;
-  margin-bottom: 30px;
+  margin-bottom: 10px;
+  width: 125px;
   text-align: center;
   display:block;
   position:relative;
@@ -131,21 +138,55 @@
   font-size: 12px;
   color: #666;
   text-decoration: none;
-  z-index: 5;
 }
 .html-thumbnail {
-  -webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3);
-  -moz-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3);
-  box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3);
   font-size: 11px;
   margin-top: 5px;
   margin-left: 10px;
   display:block;
   position:relative;
+  width:105px;
+  height:63px;
+}
+.html-thumbnail.html img {
+  width: 105px;
+  height:63px;
+  -webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3);
+  -moz-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3);
+  box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3);
+}
+.html-thumbnail.image img {
+  max-width:105px;
+  max-height:63px;
+  width: auto;
+  height: auto;
+}
+.html-thumbnail.misc {
+  width: 63px;
+  height: 63px;
+  margin-left: auto;
+  margin-right: auto;
+}
+.misc-icon {
+  background: url(../img/misc-file.png) no-repeat -1px -1px;
+  width: 67px;
+  height: 67px;
+  display: block;
+  padding-top: 35px;
+  font-size: 14px;
+  color: #bbb;
+  font-weight: bold;
+  margin-left: auto;
+  margin-right: auto;
 }
 .overlay a {
   color: white;
   text-decoration: none;
+  font-size: 14px;
+  display: block;
+}
+.overlay i {
+  font-weight: bold;
 }
 .overlay {
   position:absolute;
@@ -171,9 +212,6 @@
   padding-top: 15px;
   background-color:rgba(0, 0, 0, 0.15);
 }
-.overlay i {
-  font-weight: bold;
-}
 .filehover:hover .overlay, .fileimagehover:hover .overlay {
     display:block;
 }

views/dashboard.erb

@@ -41,7 +41,7 @@
 <div class="content">
     
 <div class="welcome">
-  <a href=""><div class="close"></div></a>
+  <div class="close-button"></div>
   <h4>Hello! Welcome to your new site.</h4>
   To get started, click on the <strong>index.html</strong> file below to edit it. It's your home page! You can add more files (such as images) from your computer by dragging them into the box below. Need help building web sites? Check out these <a href="/tutorials">tutorials</a>!
 </div>
@@ -52,25 +52,38 @@
     <div class="actions">
       <a href="/site_files/new_page" class="btn-Action new-Page"><span>New Page</span></a>
       <!--<a href="" class="btn-Action new-Folder"><span>New Folder</span></a>-->
+      <a href="/site_files/upload" class="btn-Action upload"><span>Upload</span></a>
     </div>
   </div>
   <div class="list">
-    <div class="upload-Boundary">
+    <div class="upload-Boundary with-instruction"> <!--should remove instruction after at least one new file have been uploaded-->
       
       <% current_site.file_list.each do |file| %>
         <div class="file filehover">
           <% if file.ext.match(/html|htm/) %>
-            <div class="html-thumbnail fileimagehover" style="width:105px;height:63px;">
+            <div class="html-thumbnail html fileimagehover">
-              <img src="https://neocities.org//site_screenshots/bigpig.jpg" style="width: 105px;height:63px">
+              <img src="https://neocities.org//site_screenshots/bigpig.jpg">
-              <div class="overlay">
+              <div class="overlay"></div>
-
-              </div>
             </div>
           <% elsif file.ext.match(/jpg|png|bmp|gif/) %>
-          
+            <div class="html-thumbnail image fileimagehover">
+              <img src="https://neocities.org/assets/img/cat-larger.png" style="">
+              <div class="overlay"></div>
+            </div>
+          <% else %>
+            <div class="html-thumbnail misc fileimagehover">
+              <div class="misc-icon"><%= file.ext %></div>
+              <div class="overlay"></div>
+            </div>
           <% end %>
           
-          <a class="title"><%= file.filename %></a>
+          <a class="title">
+            <% if file.filename.length > 15 %>
+              <%= file.filename.slice(0..15) %>&hellip;
+            <% else %>
+              <%= file.filename %>
+            <% end %>
+          </a>
           <div class="overlay">
             <% if file.ext.match(/html|htm|txt|js|css|md/) %>
               <a href="/site_files/text_editor/<%= file.filename %>"><i class="icon-edit" style="margin-right: 10px" title="Edit"> Edit</i></a>
@@ -78,7 +91,7 @@
             <% if file.filename != 'index.html' %>
               <a href="#" onclick="confirmFileDelete('<%= file.filename %>')"><i class="icon-trash" style="margin-right: 10px" title="Delete"> Delete</i></a>
             <% end %>
-            <a class="link-overlay" href="http://<%= current_site.username %>.neocities.org/<%= file.filename %>" title="Visit <%= file.filename %>" target="_blank"></a>
+            <a class="link-overlay" href="http://<%= current_site.username %>.neocities.org/<%= file.filename %>" title="View <%= file.filename %>" target="_blank"></a>
           </div>
         </div>
       <% end %>