From 3f0a5c500fbeee5efdd5a4233b74d0ed3058e952 Mon Sep 17 00:00:00 2001
From: Charles Connell <charles@connells.org>
Date: Tue, 11 Mar 2014 10:36:01 -0400
Subject: [PATCH] Working through course detail page

---
 karmaworld/assets/css/global.css              |  4 ++
 karmaworld/assets/css/note_course_pages.css   | 40 ++++++++++++++++++-
 karmaworld/assets/js/add-course.js            |  2 +-
 karmaworld/assets/js/course-detail.js         |  3 +-
 karmaworld/assets/js/course.js                | 14 ++++---
 .../templates/courses/course_detail.html      | 36 ++++++++++-------
 6 files changed, 75 insertions(+), 24 deletions(-)

diff --git a/karmaworld/assets/css/global.css b/karmaworld/assets/css/global.css
index 66a2de9..f4612bf 100644
--- a/karmaworld/assets/css/global.css
+++ b/karmaworld/assets/css/global.css
@@ -46,3 +46,7 @@
   margin: 20px 0 20px 0;
 }
 
+label.inline-label
+{
+  display: inline;
+}
diff --git a/karmaworld/assets/css/note_course_pages.css b/karmaworld/assets/css/note_course_pages.css
index 8245fdc..115c631 100644
--- a/karmaworld/assets/css/note_course_pages.css
+++ b/karmaworld/assets/css/note_course_pages.css
@@ -19,4 +19,42 @@ span.course-header-school
 {
   margin-top: 20px;
   border-bottom: 1px solid black;
-}
\ No newline at end of file
+}
+
+#edit-button,
+#flag-button
+{
+  cursor: pointer;
+}
+
+button.add-note {
+  background: grey;
+  color: white;
+  border: none;
+  padding: 5px;
+  border-radius: 0.3em;
+  display: inline;
+}
+
+input.search-notes {
+  width: 15em;
+  display: inline;
+  margin-right: 0;
+}
+
+#note-sort-wrapper {
+  float: right;
+  display: inline;
+}
+
+select.note-sort {
+  width: 10em;
+}
+
+#note-search-bar {
+  margin-top: 20px;
+  border: 1px solid grey;
+  padding: 10px 0 0 0;
+}
+
+
diff --git a/karmaworld/assets/js/add-course.js b/karmaworld/assets/js/add-course.js
index 25a4f3f..8a438f0 100644
--- a/karmaworld/assets/js/add-course.js
+++ b/karmaworld/assets/js/add-course.js
@@ -34,7 +34,7 @@ $(function() {
     autoOpen: false,
     modal: true,
     show: { effect: 'fade', duration: 500 },
-    width: dialogWidth
+    width: dialogWidth()
   });
 
   if (jump_to_form) {
diff --git a/karmaworld/assets/js/course-detail.js b/karmaworld/assets/js/course-detail.js
index d119eb2..9c2e15c 100644
--- a/karmaworld/assets/js/course-detail.js
+++ b/karmaworld/assets/js/course-detail.js
@@ -24,7 +24,7 @@ $(function() {
     autoOpen: false,
     modal: true,
     show: { effect: 'fade', duration: 500 },
-    width: dialogWidth
+    width: dialogWidth()
   });
 
   $('#edit-button').click(function(event) {
@@ -44,7 +44,6 @@ $(function() {
 
         // We might want to use a template here instead of rehashing logic
         // on both the client and server side
-        $('#edit-course-form').slideUp();
         $('.validation_error').remove()
         $('#course_form_errors').empty();
         $('#course_name').text(data.fields.name);
diff --git a/karmaworld/assets/js/course.js b/karmaworld/assets/js/course.js
index 26c4338..bb2b9a6 100644
--- a/karmaworld/assets/js/course.js
+++ b/karmaworld/assets/js/course.js
@@ -57,9 +57,11 @@ window.KARMAWORLD.Course = {
   }
 };
 
-var bodyWidth = $('body').width();
-if (bodyWidth < 700) {
-  var dialogWidth = bodyWidth;
-} else {
-  var dialogWidth = 700;
-}
\ No newline at end of file
+function dialogWidth() {
+  var bodyWidth = $('body').width();
+  if (bodyWidth < 700) {
+    return bodyWidth;
+  } else {
+    return 700;
+  }
+}
diff --git a/karmaworld/templates/courses/course_detail.html b/karmaworld/templates/courses/course_detail.html
index 7fd63d3..50e91dc 100644
--- a/karmaworld/templates/courses/course_detail.html
+++ b/karmaworld/templates/courses/course_detail.html
@@ -18,6 +18,12 @@
 
 {% block pagestyle %}
   <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/note_course_pages.css">
+  <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/data_table_list.css">
+  <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/datatables-css/jquery.dataTables.css">
+{% endblock %}
+
+{% block bodyscripts %}
+  <script src="{{ STATIC_URL }}js/jquery.dataTables.min.js"></script>
 {% endblock %}
 
 
@@ -45,13 +51,13 @@
 
           {% if user.is_authenticated %}
             {% if user.get_profile.can_edit_items %}
-              <i id="edit-button" class="fa fa-edit"></i>
+              <span id="edit-button"> <i class="fa fa-edit"></i> Edit this course</span>&nbsp;&nbsp;
             {% endif %}
 
             {% if already_flagged %}
               <i class="fa fa-flag"></i> You have reported this course as inappropriate
             {% else %}
-              <i class="fa fa-flag" id="flag-button"></i> Report course as inappropriate
+              <span id="flag-button"><i class="fa fa-flag"></i> Report course as inappropriate</span>
             {% endif %}
           {% else %}
             <i class="fa fa-flag"></i> Log in to flag a course as inappropraite
@@ -128,20 +134,22 @@
       </section>
     {% endif %}
 
-    <div id="course-search-bar" class="row">
-    <div class="small-12 columns">
-      <button id="add-course-btn" class="add-course">Add a Course</button>
-      <input class="search-courses" type="text" placeholder="Search Courses" />
-      <div id="course-sort-wrapper">
-        Sort By
-        <select class="course-sort">
-          <option value="0">Date</option>
-          <option value="1">Number of Notes</option>
-          <option value="2" selected>Popularity</option>
-        </select>
+    <div id="note-search-bar" class="row">
+      <div class="small-12 columns">
+        <button id="add-note-btn" class="add-note">Add a Note</button>
+        <input class="search-notes" type="text" placeholder="Search Notes" />
+        <input id="quiz-available-filter" type="checkbox" />
+        <label class="inline-label" for="quiz-available-filter">Quiz Available</label>
+        <div id="note-sort-wrapper">
+          Sort By
+          <select class="note-sort">
+            <option value="0">Date</option>
+            <option value="1">Number of Quizzes</option>
+            <option value="2" selected>Popularity</option>
+          </select>
+        </div>
       </div>
     </div>
-  </div>
 
 
     <div class="row">
-- 
2.25.1