made new add-note-form and connected buttons to it, and rewrote css to match

diff --git a/karmaworld/assets/css/global.css b/karmaworld/assets/css/global.css
index 382dca567718d2ec5f8ee6f4e10c9bbc90e03851..2dba1d69d484590285719aa029abf907e51fec1d 100644 (file)
--- a/karmaworld/assets/css/global.css
+++ b/karmaworld/assets/css/global.css
@@ -392,7 +392,14 @@ a.course_link, a.course_link:hover, a.school_link, a.school_link:hover, a.prof_l
 {
   font-family: "MuseoSlab-300";
   font-size: 22px;
-  line-height: .4em;
+  line-height: 1.4em;
+}
+
+.note_name, .note_name a
+{
+  font-family: "MuseoSlab-300";
+  font-size: 22px;
+  line-height: 1.4em;
 }
 
 a.activity_actor, a.activity_actor:hover
@@ -487,14 +494,20 @@ a.activity_target:hover
   text-transform: uppercase;
 }
 
-#upload_button, #add-course
+#add-note-btn, #add-course-btn
 {
+  color: #f05a28;
+  cursor: pointer;
+  font: 30px/1.2em "MuseoSlab-300", serif;
   margin: 1px;
-  font-family: "MuseoSlab-300";
-  font-size: 30px;
   text-align: center;
-  color: #f05a28;
   text-transform: uppercase;
+  /* transition: ease-out ? ? ? */
+}
+
+#add-note-form, #add-course
+{
+  display: none;
 }
 
 /* COPY */
@@ -702,3 +715,9 @@ hr.midrule
   width: 140px;
   margin: 2em auto;
 }
+
+legend
+{
+  font: 12px/2em "MuseoSlab-300";
+}
+

diff --git a/karmaworld/assets/js/lightboxupload.js b/karmaworld/assets/js/lightboxupload.js
index eda19ace47acbae327d734e4b56d64fdfa35da4c..3243d66ff228e8c1380d186fc556786748f5829e 100644 (file)
--- a/karmaworld/assets/js/lightboxupload.js
+++ b/karmaworld/assets/js/lightboxupload.js
@@ -1,7 +1,13 @@
 $(function(){
+
+  // Show the 'add note' form
+  // first, instantiate the fileuploader on page load
+  // TODO: connect it to the '^ save' form submit
   // Show the upload lightbox on upload button click
-  $('#upload_button_container').click(function(){
-    $('#lightbox_upload').show()
+
+  $('#add-note-btn').click(function(){
+    // TODO: rewrite to .show the form with a slide transition
+    $('#add-note-form').show();
   });
 
   // Dismiss x click
@@ -14,15 +20,17 @@ $(function(){
       element: $('#file-uploader')[0],
       multiple: true,
       onComplete: function( id, fileName, responseJSON ) {
-        if( responseJSON.success )
-          console.log( "success!" ) ;
+        if( responseJSON.success ) {
+          //console.log( "success!" ) ;
           $('form#upload_form').attr('action', responseJSON.note_url);
           $('input.submit_upload').show();
+        }
       },
       onAllComplete: function( uploads ) {
         // uploads is an array of maps
         // the maps look like this: { file: FileObject, response: JSONServerResponse }
         console.log( "All complete!" ) ;
+        // TODO: set a success state
       },
       params: {
         'csrf_token': csrf_token,

diff --git a/karmaworld/templates/courses/course_detail.html b/karmaworld/templates/courses/course_detail.html
index 631a6dc8f009dbe6f98ebac8b9bc1db104e4ea31..f0e18ebca034176be777fa6eb8661c4bf952128d 100644 (file)
--- a/karmaworld/templates/courses/course_detail.html
+++ b/karmaworld/templates/courses/course_detail.html
@@ -57,14 +57,17 @@
         <div class="ten columns offset-by-one"> <hr/> </div>
       </div>
 
+      {% include 'partial/add_note.html' %}
+
       <div class="row">
         <div class="three columns centered">
-          <div id="upload_button" data-id="{{ course.id }}">
+          <div id="add-note-btn" data-id="{{ course.id }}">
             <i class=icon-upload></i> add a note
           </div>
         </div>
       </div>
 
+
       <div class="row">
         <div class="ten columns offset-by-one"> <hr/> </div>
       </div>
@@ -103,7 +106,7 @@
           <div class="row notes_result_container wide">
             <div class="twelve columns notes_result">
 
-              <div class="activity_details_action">
+              <div class="note_name">
                 <a href="{{ note.get_absolute_url }}" class="activity_target">{{ note.name }}</a>
               </div>
 

diff --git a/karmaworld/templates/courses/course_list.html b/karmaworld/templates/courses/course_list.html
index b71fafe4968e65a81ba374147f2cccf25e7ecab3..f641e9aaff06a1be5afa6b9125bec9ddd63dd643 100644 (file)
--- a/karmaworld/templates/courses/course_list.html
+++ b/karmaworld/templates/courses/course_list.html
@@ -122,7 +122,7 @@ $(document).ready(function() {
 
   <div class="row">
     <div class="ten columns offset-by-one">
-      <div id="add-course">
+      <div id="add-course-btn">
         <i class=icon-upload></i> add a course
       </div>
     </div><!-- .ten columns -->

diff --git a/karmaworld/templates/partial/add_note.html b/karmaworld/templates/partial/add_note.html
new file mode 100644 (file)
index 0000000..35f198c
--- /dev/null
+++ b/karmaworld/templates/partial/add_note.html
@@ -0,0 +1,39 @@
+{% load url from future %}
+<section id=add-note-form class="extend-form">
+  <script>
+    var ajax_upload_url = "{% url 'ajax_upload' %}";
+    var csrf_token = "{{ csrf_token }}";
+  </script>
+
+  <form id=upload_form method="POST">
+    {% csrf_token %}
+    <div class="row">
+      <div class="eight columns offset-by-one">
+        <legend>Title of Note</legend>
+        <input type="text" class="" id="id_name" name="name">
+      </div>
+      <div class="two columns end">
+        <legend>Academic Year</legend>
+        <input type="text" class="" id="id_year" name="year">
+      </div>
+    </div>
+    <div class="row">
+      <div class="ten columns offset-by-one end">
+        <legend>Tags (comma seperated)</legend>
+        <input type="text" id="id_tags" name="tags" class="taggit-tags">
+      </div>
+    </div>
+
+
+    <div class="row">
+      <div class="three columns centered">
+        <div id="upload_button" data-id="{{ course.id }}">
+          <i class=icon-upload></i> add a note
+          <input class="submit_upload" type="submit" value="save">
+        </div>
+      </div>
+    </div>
+
+
+    </form> <!-- #upload_form -->
+</section>