implements #38 html and scss for uploader

- 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)

core/admin/assets/lib/showdown/extensions/ghostdown.js

@@ -5,8 +5,15 @@
             {
                 type: 'lang',
                 filter: function (source) {
-                    return source.replace(/\n+!image\[([\d\w\s]*)\]/gi, function (match, alt, a) {
+                    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 '<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>';
                     });
                 }
             }

core/admin/assets/sass/modules/global.scss

@@ -302,11 +302,11 @@ table {
 
     th,
     td {
-      padding: 8px;
+        padding: 8px;
-      line-height: 20px;
+        line-height: 20px;
-      text-align: left;
+        text-align: left;
-      vertical-align: top;
+        vertical-align: top;
-      border-top: 1px solid $lightbrown;
+        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 {