From 075a37de2796584e7a37497148b29c31818f8ba0 Mon Sep 17 00:00:00 2001 From: Victoria Wang Date: Fri, 18 Apr 2014 13:58:04 -0700 Subject: [PATCH] More work on dashboard file listing - added support for non-html/image files --- .../css/_project-sass/_project-Main.scss | 62 +++++++++++++++---- views/dashboard.erb | 33 +++++++--- 2 files changed, 73 insertions(+), 22 deletions(-) diff --git a/public/assets/css/_project-sass/_project-Main.scss b/public/assets/css/_project-sass/_project-Main.scss index 3eb524fc..c5250e4e 100644 --- a/public/assets/css/_project-sass/_project-Main.scss +++ b/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-bottom: 30px; + margin-right: 10px; + 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; } diff --git a/views/dashboard.erb b/views/dashboard.erb index 176e47ef..0de955f8 100644 --- a/views/dashboard.erb +++ b/views/dashboard.erb @@ -41,7 +41,7 @@
-
+

Hello! Welcome to your new site.

To get started, click on the index.html 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 tutorials!
@@ -52,25 +52,38 @@
New Page + Upload
-
+
<% current_site.file_list.each do |file| %>
<% if file.ext.match(/html|htm/) %> -
- -
- -
+
+ +
<% elsif file.ext.match(/jpg|png|bmp|gif/) %> - +
+ +
+
+ <% else %> +
+
<%= file.ext %>
+
+
<% end %> - <%= file.filename %> + + <% if file.filename.length > 15 %> + <%= file.filename.slice(0..15) %>… + <% else %> + <%= file.filename %> + <% end %> +
<% if file.ext.match(/html|htm|txt|js|css|md/) %> Edit @@ -78,7 +91,7 @@ <% if file.filename != 'index.html' %> Delete <% end %> - +
<% end %>