Merge pull request #123 from cobbspur/uploadercss

HTML and CSS for image uploader, fixes #38.
This commit is contained in:
John O'Nolan 2013-06-10 22:59:24 -07:00
commit 98b4b700ea
3 changed files with 56 additions and 15 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

View File

@ -5,8 +5,15 @@
{
type: 'lang',
filter: function (source) {
return source.replace(/\n+!image\[([\d\w\s]*)\]/gi, function (match, alt, a) {
return '<section class="image-uploader"><span class="media"><span class="hidden">Image Upload</span></span><div class="description">Add image of <strong>' + alt + '</strong></div><a class="image-url" title="Add image from URL"><span class="hidden">URL</a><a class="image-webcam" title="Add image from webcam"><span class="hidden">Webcam</a></section>';
return source.replace(/\n?!image\[([\d\w\s]*)\]/gi, function (match, alt, a) {
return '<section class="js-drop-zone image-uploader">' +
'<span class="media"><span class="hidden">Image Upload</span></span>' +
'<div class="description">Add image of <strong>' + alt + '</strong></div>' +
'<input data-url="upload" class="js-fileupload fileupload" type="file" name="uploadimage">' +
'<a class="image-url" title="Add image from URL"><span class="hidden">URL</span></a>' +
'<a class="image-webcam" title="Add image from webcam">' +
'<span class="hidden">Webcam</span></a>' +
'</section>';
});
}
}

View File

@ -988,6 +988,7 @@ main {
@include box-sizing(border-box);
@include baseline;
position: relative;
overflow:hidden;
padding: 55px 60px 65px 60px;
border: $lightbrown 3px dashed;
width: 100%;
@ -996,11 +997,6 @@ main {
color: $brown;
background: #F9F8F5;
&:hover { //HAHA THIS IS A HACK
//TODO: REMOVE THIS FUCKING HACK
cursor: pointer;
}
a {
color: $brown;
text-decoration: none;
@ -1040,6 +1036,44 @@ main {
color: $brown;
text-decoration: none;
}
.fileupload {
position: absolute;
right: 0;
margin: 0;
opacity: 0;
@include transform-origin(right);
@include transform( scale(14));
font-size: 23px;
direction: ltr;
cursor: pointer;
}
.progress {
position: relative;
top: -39px;
margin: auto;
margin-bottom: -12px;
display: block;
overflow: hidden;
@include linear-gradient(to bottom, #f5f5f5, #f9f9f9);
border-radius: 12px;
box-shadow: (rgba(0,0,0,0.1) 0 1px 2px inset);
}
.fileupload-loading {
display: block;
top: 50%;
width: 35px;
height: 28px;
margin: -28px auto 0;
background-size: contain;
}
.bar {
height: 12px;
background: $blue;
}
}