zydronium/neocities
1
0
Fork 0
mirror of https://github.com/neocities/neocities.git synced 2025-04-25 01:32:36 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Victoria Wang 2014-04-18 13:58:04 -07:00
parent 6d1d1e31b4
commit 075a37de27
2 changed files with 73 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
public/assets/css/_project-sass/_project-Main.scss
View file

@ -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;
}

33
views/dashboard.erb
View file

@ -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;">
<img src="https://neocities.org//site_screenshots/bigpig.jpg" style="width: 105px;height:63px">
<div class="overlay">
</div>
<div class="html-thumbnail html fileimagehover">
<img src="https://neocities.org//site_screenshots/bigpig.jpg">
<div class="overlay"></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 %>