upload note styling

diff --git a/karmaworld/assets/css/global.css b/karmaworld/assets/css/global.css
index c343f48dc9902ed2bda7dd7a46f5ae54443eb6f6..0716e35158876a233db21cd3edcb6a91e082ce9c 100644 (file)
--- a/karmaworld/assets/css/global.css
+++ b/karmaworld/assets/css/global.css
@@ -762,3 +762,7 @@ legend
   font: 12px/2em "MuseoSlab-300";
 }
 
+.qq-upload-button {
+  margin-bottom:12px;
+}
+

diff --git a/karmaworld/assets/js/lightboxupload.js b/karmaworld/assets/js/lightboxupload.js
index 5f012d40752c2e51bc3e8f2569daf3319713985d..a49f996d1100adf854c155b60bbb318a3cffa4d7 100644 (file)
--- a/karmaworld/assets/js/lightboxupload.js
+++ b/karmaworld/assets/js/lightboxupload.js
@@ -11,14 +11,15 @@ $(function(){
     // Get the first hasgh, remove the # character
     var hash = window.location.hash.substring(1);
     if (hash === 'add-note'){
-
       $('#add-note-form').show();
-      $('#file-uploader').show();
       $('div.upload-status').hide();
+      $('#add-note-btn').hide();
     }
   }
 
   $('#add-note-btn').click(function(){
+    // hide the button added by qq
+    $('#file-uploader').hide();
     // show the add note form
     // TODO: rewrite to .show the form with a slide transition
     $('#add-note-form').show();

diff --git a/karmaworld/templates/partial/add_note.html b/karmaworld/templates/partial/add_note.html
index 63a1f8d5ba7a6e143bb174dc13df8a0ebdee72d1..58c025eecd6403c565eccd60ef136e90f43cf8a4 100644 (file)
--- a/karmaworld/templates/partial/add_note.html
+++ b/karmaworld/templates/partial/add_note.html
@@ -5,7 +5,7 @@
     //var csrf_token = "{{ csrf_token }}";
   </script>
 
-  <div id=file-uploader style="display:none"></div>
+
   <form id=add-note method="POST">
     {% csrf_token %}
     <div class="row">
@@ -13,6 +13,9 @@
         <legend><span id=add-note-status>Uploading</span> <span id=filename>note</span>...</legend>
         <div class=progress> <div id="progress-fill"></div> </div>
       </div>
+      <div id=file-uploader class="four columns offset-by-one">
+        <!-- the upload button gets attached here -->
+      </div> 
       <div class="one columns offset-by-five end">
         <i class="icon-remove-circle"></i>
       </div>