From: Seth Woodworth <seth@sethish.com>
Date: Sat, 26 Jan 2013 00:23:58 +0000 (-0500)
Subject: adding initial create course lightbox, loads on click
X-Git-Tag: release-20150131~546^2~1
X-Git-Url: https://git.librecmc.org/?a=commitdiff_plain;h=e6b0b39892a8dcd290e0434c27644b9779bdfce6;p=oweals%2Fkarmaworld.git

adding initial create course lightbox, loads on click
---

diff --git a/karmaworld/assets/css/global.css b/karmaworld/assets/css/global.css
index 0f9e756..fe450ea 100644
--- a/karmaworld/assets/css/global.css
+++ b/karmaworld/assets/css/global.css
@@ -645,3 +645,17 @@ a.white:hover
   font-family: "MuseoSlab-700";
   font-size: 32px;
 }
+
+/* GAAAH, random body p copy should be readable text */
+p.text
+{
+  font-family: "MuseoSlab-500";
+  font-size: 17px;
+  margin: 20px 0 0;
+  line-height: 150%;
+}
+p.text a
+{
+  color: #f05a28;
+  text-decoration: underline;
+}
diff --git a/karmaworld/templates/courses/course_list.html b/karmaworld/templates/courses/course_list.html
index 535fd13..b65e596 100644
--- a/karmaworld/templates/courses/course_list.html
+++ b/karmaworld/templates/courses/course_list.html
@@ -14,6 +14,7 @@
 {% block pagescripts %}
 <script src="stylesheet" href="{{ STATIC_URL }}/js/responsive-tables.js"></script>
 <script src="{{ STATIC_URL }}/js/jquery.tablesorter.min.js"></script>
+<script src="{{ STATIC_URL }}/js/bootstrap-modal.js" ></script>
 <script>
 $(document).ready(function()
     {
@@ -24,8 +25,11 @@ console.log('tablesorter called');
 </script>
 {% endblock %}
 
-{% block content %}
+{% block lightboxen %}
+  {% include 'lightbox/add_course.html' %}
+{% endblock %}
 
+{% block content %}
 <section id="home_content">
   <div id="page_header" class="hero_gradient_bar">
     <div class="row">
@@ -65,7 +69,13 @@ console.log('tablesorter called');
       </table>
     </div><!-- .ten columns -->
   </div> <!-- .row -->
+  <div class="row">
+    <div class="ten columns offset-by-one">
+      <p class="text">Can't find your course? 
+        <a href="#add-course" role="button" class="btn" data-toggle="modal">Add it now</a>
+      </p>
+    </div><!-- .ten columns -->
+  </div> <!-- .row -->
 </section> <!-- #results_content -->
 
 {% endblock %}
-
diff --git a/karmaworld/templates/lightbox/add_course.html b/karmaworld/templates/lightbox/add_course.html
new file mode 100644
index 0000000..290a3e2
--- /dev/null
+++ b/karmaworld/templates/lightbox/add_course.html
@@ -0,0 +1,86 @@
+{% load url from future %}
+
+<section id="add-course" class="modal_content">
+
+  <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">
+          Create a new course
+        </div><!-- /modal_header -->
+      </div>
+
+
+      <div class="row lightbox_row">
+        <div class="seven columns centered">
+          <label class="lightbox_label">
+            Title of Course:
+          </label><!-- lightbox_label -->
+          <div class="lightbox_field">
+            <input id="id_title" class="lightbox_textfield" type="text" name="title" maxlength="255" />
+          </div><!-- .lightbox_filed -->
+        </div><!--  -->
+      </div> <!-- .row .lightbox_row -->
+
+      <div class="row lightbox_row">
+        <div class="seven columns centered">
+          <label class="lightbox_label">
+            Subject:
+          </label><!-- lightbox_label -->
+          <div class="lightbox_field">
+            <input id="id_field" class="lightbox_textfield" type="text" name="field" maxlength="255" />
+          </div><!-- .lightbox_filed -->
+        </div><!--  -->
+      </div> <!-- .row .lightbox_row -->
+
+      <div class="row lightbox_row">
+        <div class="seven columns centered">
+          <label class="lightbox_label">
+            Instructor Name:
+          </label><!-- lightbox_label -->
+          <div class="lightbox_field">
+            <input id="id_instructor_name" class="lightbox_textfield" type="text" name="instructor_name" maxlength="75" />
+          </div><!-- .lightbox_filed -->
+        </div><!--  -->
+      </div> <!-- .row .lightbox_row -->
+
+      <div class="row lightbox_row">
+        <div class="seven columns centered">
+          <label class="lightbox_label">
+            Instructor Email:
+          </label><!-- lightbox_label -->
+          <div class="lightbox_field">
+            <input id="id_instructor_email" class="lightbox_textfield" type="text" name="instructor_email" maxlength="75" />
+          </div><!-- .lightbox_filed -->
+        </div><!--  -->
+      </div> <!-- .row .lightbox_row -->
+
+      <div class="row lightbox_row">
+        <div class="seven columns centered">
+          <label class="lightbox_label">
+            Description:
+          </label><!-- lightbox_label -->
+          <div class="lightbox_field">
+            <textarea id="id_desc" class="lightbox_textfield lightbox_textarea" rows="4" cols="40" name="desc"></textarea>
+          </div><!-- .lightbox_filed -->
+        </div><!--  -->
+      </div> <!-- .row .lightbox_row -->
+
+      <div class="row lightbox_row">
+        <div class="seven columns centered">
+          <label class="lightbox_label">
+          </label><!-- lightbox_label -->
+          <div class="lightbox_field">
+            <a class="button" id="submit-lightbox-create-course" type="submit">CREATE COURSE</a>
+          </div><!-- .lightbox_filed -->
+        </div><!--  -->
+      </div> <!-- .row .lightbox_row -->
+
+      <div class="lightbox_close"></div>
+
+    </div> <!-- .lightbox_modal -->
+  </div> <!-- .row -->
+
+
+</section><!--add_course_content-->
+