Switch to filepicker Drag & Drop widget

diff --git a/karmaworld/assets/css/global.css b/karmaworld/assets/css/global.css
index 2cced79a47960ab05b436ced7d746e95e3afea4e..b5d5dceb4f1c6352244017589fbc0e616c58d8dc 100644 (file)
--- a/karmaworld/assets/css/global.css
+++ b/karmaworld/assets/css/global.css
@@ -823,6 +823,9 @@ legend
   border-radius: 6px;
   padding: 20px;
 }
+.dragdrop {
+  text-align: center;
+}
 
 .inline-form {
   border-bottom: 1px dashed #666;

diff --git a/karmaworld/templates/partial/filepicker.html b/karmaworld/templates/partial/filepicker.html
index 1c3618e91dd897a36abf8d5829f901ea57280e7c..371469f654128805a23ac1ecf980932c49ab1c77 100644 (file)
--- a/karmaworld/templates/partial/filepicker.html
+++ b/karmaworld/templates/partial/filepicker.html
@@ -4,13 +4,15 @@
 <!-- Javascript -->
 <script type="text/javascript" src="//api.filepicker.io/v1/filepicker.js"></script>
   <div class="row" id="">
-    <div class="small-8 small-offset-1 columns large-4">
+    <div class="small-8 small-offset-1 columns large-10">
         <input id="filepicker-file-upload"
-          type="filepicker"
+          type="filepicker-dragdrop"
           data-fp-apikey="A5pg98pDjQk6k3lBZ8VDVz"
           data-fp-multiple="true"
-          data-fp-button-class="add-note-btn"
+          data-fp-button-class="add-note-btn small-10 columns large-4"
           data-fp-button-text="<i class=icon-upload></i> add notes"
+          data-fp-drag-text="Drop Some Knowledge"
+          data-fp-drag-class="dragdrop show-for-medium-up large-7 columns"
           data-fp-extensions=".pdf,.doc,.docx,.txt,.rtf,.odt,.png,.jpg,.jpeg,.ppt,.pptx"
           data-fp-store-path="{{ course.school.slug }}/ {{ course.slug }}/"
           data-fp-services="COMPUTER,DROPBOX,URL,GOOGLE_DRIVE,GMAIL,EVERNOTE,BOX,FACEBOOK,FLICKR,GITHUB,SKYDRIVE,PICASA,IMAGE_SEARCH,WEBCAM,FTP"