OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implements #38 html and scss for uploader

Browse Source 
- Fixed broken html
- Added file input to html
- Styling for hidden file input button
- Styling for progress bar and loading
- Added javascript classes for hooking file upload
- Added loading image (cat)
This commit is contained in:
cobbspur 2013-06-09 19:04:34 +01:00
parent 4a630af54a
commit 40d8b0321c
3 changed files with 56 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
core/admin/assets/img/loadingcat.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

11
core/admin/assets/lib/showdown/extensions/ghostdown.js
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>';
});
}
}

60
core/admin/assets/sass/modules/global.scss
View File

@ -302,11 +302,11 @@ table {
th,
td {
padding: 8px;
line-height: 20px;
text-align: left;
vertical-align: top;
border-top: 1px solid $lightbrown;
padding: 8px;
line-height: 20px;
text-align: left;
vertical-align: top;
border-top: 1px solid $lightbrown;
}
th { color: $brown; }
@ -317,7 +317,7 @@ table {
colgroup + thead tr:first-child td,
thead:first-child tr:first-child th,
thead:first-child tr:first-child td {
border-top: 0;
border-top: 0;
}
tbody + tbody { border-top: 2px solid $lightbrown; }
@ -391,7 +391,7 @@ nav {
.navbar {
height: 40px;
height: 40px;
font-size: 0.85em;
background: $darkgrey;
@include breakpoint($netbook) {font-weight:normal}
@ -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;
}
}
@ -1049,7 +1083,7 @@ main {
//Simple
.wrapper {
position:relative;
position:relative;
}
.palette {