adding upload lightbox template and adding include to the course_detail page

diff --git a/karmaworld/templates/courses/course_detail.html b/karmaworld/templates/courses/course_detail.html
index 668585ee5e815c102849f17dc5bdeb45c28ee6bf..d9014cbed859c6e6911519a2c302a8dd990d8f55 100644 (file)
--- a/karmaworld/templates/courses/course_detail.html
+++ b/karmaworld/templates/courses/course_detail.html
@@ -1,21 +1,31 @@
 {% extends "base.html" %}
 {% load url from future %}
 
+
 {% block pagescripts %}
-<script>
-var course_pk = {{ course.id }};
-var course_name = "{{ course.name }}";
-</script>
+    <script>
+        var course_pk = {{ course.id }};
+        var course_name = "{{ course.name }}";
+    </script>
+    <script src="{{ STATIC_URL }}/js/bootstrap-modal.js" ></script>
 {% endblock %}
 
+
 {% block pagestyle %}
   <link rel="stylesheet" type="text/css" media="all" href="/static/css/note_course_pages.css">
 {% endblock %}
 
+
+{% block lightboxen %}
+  {% include 'lightbox/upload.html' %}
+{% endblock %}
+
+
 {% block title %}
   Share Notes for {{ course.name }} | {{ course.school.name }}
 {% endblock %}
 
+
 {% block content %}
   <section id="course_content">
 
@@ -77,6 +87,16 @@ var course_name = "{{ course.name }}";
         </div><!-- /course_description -->
       </div>
 
+      <div class="row">
+        <div class="three columns centered">
+          <div id=upload_button_container class=button_bevel >
+            <div id=upload_button course=button_interior data-id="{{ course.id }}">
+              upload
+            </div>
+          </div>
+        </div>
+      </div>
+
     </div><!-- /course_header -->
 
     <div class="row">

diff --git a/karmaworld/templates/lightbox/upload.html b/karmaworld/templates/lightbox/upload.html
new file mode 100644 (file)
index 0000000..acdc66e
--- /dev/null
+++ b/karmaworld/templates/lightbox/upload.html
@@ -0,0 +1,150 @@
+{% load url from future %}
+
+
+<section id="lightbox_upload" class="modal_content">
+
+  <script>
+    var ajax_upload_url = "{% url 'ajax_upload' %}";
+    var csrf_token = "{{ csrf_token }}";
+  </script>
+  <div class="row">
+    <div class="eight columns centered lightbox_modal" style="margin-top: 121px;">
+      <div class="row">
+        <div class="lightbox_header modal_header twelve columns">
+          Add Notes
+        </div><!-- /modal_header -->
+      </div>
+
+      <div class="row lightbox_row">
+        <div class="three columns offset-by-one">
+          <label class="lightbox_label">
+            Your School
+          </label><!-- lightbox_label -->
+        </div>
+        <div class="eight columns">
+          <div class="lightbox_copy">
+            {{ user.get_profile.school.name }}
+          </div><!-- /lightbox_copy -->
+          <div class="lightbox_instruction">
+            {# Not your school? <a href="#">Edit it now.</a> #}
+          </div>
+        </div>
+      </div><!-- /lightbox_row -->
+
+      <div class="row lightbox_row">
+        <div class="three columns offset-by-one">
+          <label class="lightbox_label">
+            Which course would you like to add notes to?
+          </label><!-- lightbox_label -->
+        </div>
+        <div class="four columns">
+          <div id="button_my_course" class="inverted_button show_select" data-target="#upload_course_select_box">
+            My Courses <img class="button_arrow" src="/static/img/global_button_orange_arrow.png" alt="global_button_orange_arrow" width="8" height="5" />
+          </div><!-- /inverted_button -->
+          <div id="upload_course_select_box" class="select_box">
+          {% for course in user.get_profile.courses.all %}
+            <div class="course-select lightbox_instruction" data-id="{{ course.id }}" style="cursor: pointer;">{{ course.title }} </div>
+          {% endfor %}
+          </div>
+        </div>
+        <div class="three columns end">
+          <div id="lightbox_upload_course_sidebar" class="lightbox_instruction">
+            Don't see the course you want to add to?<br><a href="#">Join it now.</a>
+          </div><!-- /lightbox_instruction -->
+        </div>
+      </div><!-- /lightbox_row -->
+
+      <div class="row lightbox_row">
+        <div class="three columns offset-by-one">
+          <label class="lightbox_label">
+            Upload File
+          </label><!-- lightbox_label -->
+        </div>
+        <div class="four columns browse_file_button">
+          {% comment %}
+          <div class="inverted_button">
+            Browse
+          </div><!-- /inverted_button -->
+          <input type="file" id="browse_for_file" name="file">
+          {% endcomment %}
+          <div> <!-- this allows the _parent insert -->
+            <div style="text-align:center;" id="file-uploader">
+              <noscript>
+                <p>Please enable JavaScript to use file uploader.</p>
+              </noscript>
+            </div> <!-- #file-uploader -->
+          </div>
+        </div>
+        <div class="three columns end">
+          <div id="lightbox_instruction_file_info" class="lightbox_instruction">
+            <!-- Don't see the course you want to add to?<br><a href="#">Join it now.</a> -->
+          </div><!-- /lightbox_instruction -->
+        </div>
+      </div><!-- /lightbox_row -->
+
+      <div class="row lightbox_row">
+        <div class="three columns offset-by-one">
+          <label class="lightbox_label">
+            Title of Notes
+          </label><!-- lightbox_label -->
+        </div>
+        <div class="seven columns end">
+          <input type="text" class="lightbox_textfield" id="add_note_title_txt">
+        </div>
+      </div><!-- /lightbox_row -->
+
+      <div class="row lightbox_row">
+        <div class="three columns offset-by-one">
+          <label class="lightbox_label">
+            Date Created
+          </label><!-- lightbox_label -->
+        </div>
+        <div class="seven columns end">
+          <input type="text" class="lightbox_textfield" id="datepicker" name="date" placeholder="{{ today }}">
+          <div class="lightbox_copy">
+          </div><!-- /lightbox_copy -->
+
+        </div>
+      </div><!-- /lightbox_row -->
+
+      {% comment %}
+      <div class="row lightbox_row">
+        <div class="three columns offset-by-one">
+          <label class="lightbox_label">
+            What type of notes are you adding?
+          </label><!-- lightbox_label -->
+        </div>
+        <div class="seven columns end">
+          <input type="text" class="lightbox_textfield" id="add_note_type_txt" placeholder="Syllabus, Notes, Study Guide…">
+        </div>
+      </div><!-- /lightbox_row -->
+      {% endcomment %}
+
+      <div class="row lightbox_row">
+        <div class="three columns offset-by-one">
+          <label class="lightbox_label">
+            Describe your notes
+          </label><!-- lightbox_label -->
+        </div>
+        <div class="seven columns end">
+          <textarea class="lightbox_textfield lightbox_textarea" id="add_note_description_txt" placeholder="These notes are the bomb because…"></textarea>
+        </div>
+      </div><!-- /lightbox_row -->
+      {# TODO: This is not the right styling, fixme #}
+      <div class="row lightbox_row">
+        <div class="three columns offset-by-one">
+          <label class="lightbox_label">
+          </label><!-- lightbox_label -->
+        </div>
+        <div class="seven columns end">
+          <a class="button white" id="submit-lightbox-upload" type="submit">FINISH UPLOAD</a>
+        </div>
+      </div><!-- /lightbox_row -->
+
+
+      <div class="lightbox_close"></div>
+
+    </div><!-- /lightbox_modal -->
+  </div>
+
+</section><!-- /modal_content -->