From 4495993c4eda30c4ac4170adad4a91269fbdc052 Mon Sep 17 00:00:00 2001
From: Seth Woodworth <seth@sethish.com>
Date: Tue, 19 Mar 2013 22:38:25 -0400
Subject: [PATCH] made new add-note-form and connected buttons to it, and
 rewrote css to match

---
 karmaworld/assets/css/global.css              | 29 +++++++++++---
 karmaworld/assets/js/lightboxupload.js        | 16 ++++++--
 .../templates/courses/course_detail.html      |  7 +++-
 karmaworld/templates/courses/course_list.html |  2 +-
 karmaworld/templates/partial/add_note.html    | 39 +++++++++++++++++++
 5 files changed, 81 insertions(+), 12 deletions(-)
 create mode 100644 karmaworld/templates/partial/add_note.html

diff --git a/karmaworld/assets/css/global.css b/karmaworld/assets/css/global.css
index 382dca5..2dba1d6 100644
--- 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 eda19ac..3243d66 100644
--- 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 631a6dc..f0e18eb 100644
--- 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 b71fafe..f641e9a 100644
--- 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
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>
-- 
2.25.1