Note search page, starting on account pages
authorCharles Connell <charles@connells.org>
Sun, 30 Mar 2014 16:33:09 +0000 (12:33 -0400)
committerCharles Connell <charles@connells.org>
Sun, 30 Mar 2014 16:33:09 +0000 (12:33 -0400)
15 files changed:
karmaworld/assets/css/dashboard.css
karmaworld/assets/css/global.css
karmaworld/assets/css/note_course_pages.css
karmaworld/assets/css/search.css [deleted file]
karmaworld/assets/css/search_results.css [deleted file]
karmaworld/assets/js/course-detail.js
karmaworld/assets/js/note-list.js [new file with mode: 0644]
karmaworld/templates/account/base.html
karmaworld/templates/base.html
karmaworld/templates/control_panel.html
karmaworld/templates/courses/course_detail.html
karmaworld/templates/courses/course_list.html
karmaworld/templates/notes/note_list_entry.html
karmaworld/templates/notes/search_results.html
karmaworld/templates/user_profile.html

index 4c856879f659d69b404ece049aa8e96b3f63a3b5..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644 (file)
@@ -1,179 +0,0 @@
-/* DASHBOARD */
-
-#dashboard_content
-{
-  padding-top: 46px;
-}
-
-/* STATS */
-#stats_container
-{
-  height: 210px;
-  margin-bottom: 20px;
-}
-
-.stat_lead_in
-{
-  padding-top: 25px;
-  font-family: "MuseoSlab-900";
-  font-size: 11px;
-  text-transform: uppercase;
-}
-
-.stat_number
-{
-  font-family: "MuseoSlab-900";
-  font-size: 57px;
-  padding-top: 5px;
-}
-
-.stat_object
-{
-  font-family: "MuseoSlab-900";
-  font-size: 13px;
-  text-transform: uppercase;
-}
-
-.stat_earned
-{
-  color: #f05a28;
-}
-
-.stat_uploaded
-{
-  color: #9ccf00;
-}
-
-.stat_downloaded
-{
-  color: #00cf9c;
-}
-
-.stat_liked
-{
-  color: #009ccf;
-}
-
-/* PROFILE */
-#profile_box_container
-{
-  padding-top: 20px;
-  padding-bottom: 20px;
-  background-color: #efefef;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#efefef), to(#d7d7d8)); /* Safari 4+, Chrome */
-  background-image: -webkit-linear-gradient(top, #efefef, #d7d7d8); /* Chrome 10+, Safari 5.1+, iOS 5+ */
-  background-image:    -moz-linear-gradient(top, #efefef, #d7d7d8); /* Firefox 3.6-15 */
-  background-image:      -o-linear-gradient(top, #efefef, #d7d7d8); /* Opera 11.10-12.00 */
-  background-image:         linear-gradient(to bottom, #efefef, #d7d7d8); /* Firefox 16+, IE10, Opera 12.50+ */
-  border: solid 1px #c5c5c5;
-  margin-bottom: 29px;
-}
-
-#profile_box
-{
-  margin: 0 20px;
-}
-
-#profile_name
-{
-  font-family: "MuseoSlab-500";
-  font-size: 20px;
-  padding-left: 0px;
-}
-
-#profile_school
-{
-  font-family: "MuseoSans-700";
-  text-transform: uppercase;
-}
-
-#profile_school_header
-{
-  font-size: 8px;
-  padding-bottom: 5px;
-  border-bottom: solid 1px #3a3426;
-}
-
-#profile_school_list
-{
-  padding-top: 5px;
-  font-size: 12px;
-}
-
-#profile_courses
-{
-  font-family: "MuseoSans-700";
-  text-transform: uppercase;
-}
-
-#profile_courses_header
-{
-  font-size: 8px;
-  padding-bottom: 5px;
-  margin-bottom: 2px;
-  border-bottom: solid 1px #3a3426;
-}
-
-#profile_courses_list ul
-{
-  margin-bottom: 0px;
-}
-
-#profile_courses_list li
-{
-  list-style: none;
-  font-size: 12px;
-}
-
-#profile_courses_links
-{
-  padding-top: 5px;
-  font-size: 9px;
-}
-
-#profile_courses_links a
-{
-  color: #f05a28;
-  font-size: 9px;
-  text-decoration: underline;
-  margin-right: 16px;
-}
-
-#profile_actions
-{
-  padding-right: 20px;
-}
-
-#profile_actions img
-{
-  padding-bottom: 10px;
-}
-
-#profile_actions div, #profile_actions a
-{
-  font-family: "MuseoSlab-700";
-  text-transform: uppercase;
-  font-size: 14px;
-  color: #f05a28;
-}
-
-/* ACTIVITY */
-
-.activity_item
-{
-  margin: 20px 20px;
-}
-
-#activity_more
-{
-  text-align: center;
-  padding: 20px 0;
-}
-
-#no_activity
-{
-  font-family: "MuseoSlab-900";
-  font-size: 10px;
-  color: #8e8e8e;
-  margin-bottom: 20px;
-}
\ No newline at end of file
index c3521f0aadb1766658d50e726aa41f02cf0be303..422329da303def6d731b7110613bcc768898e2fc 100644 (file)
@@ -176,3 +176,18 @@ ul.ui-autocomplete {
   z-index: 1000;
 }
 
+.ui-tabs-panel {
+  border: none;
+  border-top: 1px solid #dfdfdf;
+  padding: 20px 10px 20px 10px;
+}
+
+.ui-tabs-nav li {
+  margin: 0 10px 0 10px;
+  border: 1px solid #dfdfdf;
+}
+
+#tabs {
+  border: none;
+}
+
index 0efa0dad3a09572b941cd0433d972f37bf862c35..be014aa35ebd68d2bf244bf6663fa735b95f9e80 100644 (file)
@@ -73,6 +73,11 @@ div.return-to-course {
   font-size: 0.8em;
 }
 
+#results_header {
+  margin: 20px 0 20px 0;
+  font-size: 1.8em;
+}
+
 div#note_header {
   margin: 20px 0 20px 0;
 }
@@ -93,21 +98,6 @@ div.header-title-row {
   font-size: 0.8em;
 }
 
-.ui-tabs-panel {
-  border: none;
-  border-top: 1px solid #dfdfdf;
-  padding: 20px 10px 20px 10px;
-}
-
-.ui-tabs-nav li {
-  margin: 0 10px 0 10px;
-  border: 1px solid #dfdfdf;
-}
-
-#tabs {
-  border: none;
-}
-
 #outline-btn,
 #minus-btn,
 #plus-btn {
diff --git a/karmaworld/assets/css/search.css b/karmaworld/assets/css/search.css
deleted file mode 100644 (file)
index d7a3755..0000000
+++ /dev/null
@@ -1,21 +0,0 @@
-
-#results_header {
-  padding-bottom: 20px;
-  margin-bottom: 20px;
-}
-
-#no_results
-{
-  font-family: "MuseoSlab-900";
-  font-size: 10px;
-  color: #8e8e8e;
-  margin-bottom: 20px;
-}
-
-#search_nav_buttons
-{
-  font-family: "MuseoSlab-900";
-  font-size: 25px;
-  color: #8e8e8e;
-  margin-bottom: 20px;
-}
\ No newline at end of file
diff --git a/karmaworld/assets/css/search_results.css b/karmaworld/assets/css/search_results.css
deleted file mode 100644 (file)
index 8c851f2..0000000
+++ /dev/null
@@ -1,255 +0,0 @@
-/* DASHBOARD */
-
-#results_content
-{
-  padding-top: 46px;
-}
-
-/* SEARCH HEADER BAR */
-
-#search_header
-{
-  height: 140px;
-  margin-bottom: 50px;
-}
-
-#searched_for_leadin
-{
-  font-family: "MuseoSans-900";
-  font-size: 10px;
-  text-align: center;
-  padding-top: 39px;
-}
-
-#searched_for_term
-{
-  font-family: "MuseoSlab-500";
-  font-size: 24px;  
-  text-align: center;
-  padding-top: 9px;
-}
-
-#search_filters
-{
-  height: 33px;
-  width: 580px;
-  margin: 0 auto;
-  padding-top: 15px;
-  padding-bottom: 10px;
-}
-
-#search_filters ul
-{
-  margin: 0;
-}
-
-#search_filters li
-{
-  list-style: none;
-  float: left;
-  cursor: pointer;
-}
-
-#search_filters .filter_button
-{
-  margin: 1px;
-  padding: 8px 13px 4px;
-  font-family: "MuseoSlab-700";
-  font-size: 12px;
-  text-align: center;
-  color: #000;
-  text-transform: uppercase;
-}
-
-#search_filters .filter_button.button_interior
-{
-  color: #FFF;
-}
-
-/* COLUMNS */
-
-.course_result, .notes_result
-{
-  margin-bottom: 20px!important;
-}
-
-.no_result
-{
-  font-family: "MuseoSlab-500";
-  font-size: 11px;
-  color: #555;
-  line-height: 150%;
-}
-
-/* COURSE COLUMN */
-
-.course_meta_stat
-{
-  font-family: "MuseoSlab-900";
-  font-size: 33px;
-  color: #bababa;
-}
-
-.course_meta_name
-{
-  font-family: "MuseoSlab-900";
-  font-size: 8px;
-  color: #bababa;
-}
-
-/* NOTES COLUMN */
-
-.notes_result_container
-{
-  padding: 0 10px;
-}
-
-.notes_result
-{
-  padding: 10px;
-}
-
-.wide .notes_result
-{
-  padding: 10px 20px;
-}
-
-/* PROF, SCHOOLS, USERS COLUMN */
-
-.prof_result_container, .school_result_container, .user_result_container
-{
-  padding: 0 10px;
-}
-
-.prof_result, .school_result, .user_result
-{
-  margin-bottom: 10px!important;
-  padding: 5px 5px 0px;
-  margin-top: -10px!important;
-}
-
-.user_karma_points
-{
-  color: #FFF;
-  background-color: #f05a28;
-  font-family: "MuseoSlab-900";
-  font-size: 11px;
-  padding: 2px;
-  display: inline-block;
-  margin-top: 2px;
-}
-
-.prof_school
-{
-  font-family: "MuseoSans-700";
-  font-size: 9px;
-  text-transform: uppercase;
-}
-
-.school_result.tall, .user_result.tall
-{
-  padding: 10px!important;
-}
-
-.result_grid_row
-{
-  padding-bottom: 10px;
-}
-
-.prof_name, .user_name, .school_name
-{
-  font-family: "MuseoSlab-700";
-  font-size: 13px;
-}
-
-.school_result_points
-{
-  background-color: #f05a28;
-  color: #FFF;
-  font-family: "MuseoSlab-900";
-  text-align: center;
-  width: 45px;
-  height: 45px;
-  padding: 5px 1px;
-  float: right;
-  margin-bottom: 5px;
-}
-
-.school_result_points_count
-{
-  font-size: 18px;
-}
-
-.school_result_points_caption
-{
-  font-size: 8px;
-  text-transform: uppercase;
-}
-
-.school_result_name
-{
-  font-family: "MuseoSlab-700";
-  font-size: 13px;
-  color: black;
-}
-
-/* PAGINATION */
-
-#search_pagination
-{
-  margin: 45px auto;
-  padding-bottom: 45px;
-}
-
-#search_pagination_left, #search_pagination_right
-{
-  float: left;
-  width: 21px;
-  cursor: pointer;
-}
-
-#search_pagination_left img, #search_pagination_right img
-{
-  padding-bottom: 8px;
-
-}
-
-#search_pagination_numbers ul
-{
-  margin: 0;
-}
-
-#search_pagination_numbers li
-{
-  list-style: none;
-  float: left;
-  font-family: "MuseoSlab-700";
-  font-size: 15px;
-  padding: 0 11px;
-  cursor: pointer;
-}
-
-#search_pagination_numbers li.button_interior
-{
-  color: #FFF;
-}
-
-#search_pagination_right
-{
-  text-align: right;
-}
-
-/* ADD */
-#add_result
-{
-  background-color: #d3d3d3;
-  padding: 25px 45px;
-  font-family: "MuseoSlab-500";
-  font-size: 12px;
-}
-
-#add_result a
-{
-  color: #000;
-  text-decoration: underline;
-}
index 1e9d5e7a64fb84594bee4789b1c8480d004dcf2e..3a5e5b6bd854050d72a2632bca87093f50eeb786 100644 (file)
@@ -94,46 +94,4 @@ $(function() {
   KARMAWORLD.Course.initCourseNameAutocomplete({});
   KARMAWORLD.Course.initInstructorNameAutocomplete({});
 
-  $(function() {
-
-    // load dataTable for course data
-    var dataTable = $('#data_table_list').dataTable({
-      // we will set column widths explicitly
-      'bAutoWidth': false,
-      // don't provide a option for the user to change the table page length
-      'bLengthChange': false,
-      // sepcify the number of rows in a page
-      'iDisplayLength': 20,
-      // Position the filter bar at the top
-      'sDom': '<"top">rt<"bottom"p><"clear">',
-      // Specify options for each column
-      "aoColumnDefs": [
-        {
-          // 2nd element: thanks
-          "aTargets": [ 1 ],
-          "bSortable": true,
-          "bVisible": true
-        },
-        {
-          // 1st element: date
-          "aTargets": [ 0 ],
-          "bSortable": true,
-          "bVisible": true
-        }
-      ],
-      // Initial sorting
-      'aaSorting': [[1,'desc']]
-    });
-
-    // wire up sort chooser
-    $('select.course-sort').change(function() {
-      dataTable.fnSort([[$(this).val(), 'desc']]);
-    });
-
-    // sort by current value of sort chooser, since
-    // the browser may change this from our default
-    dataTable.fnSort([[$('select.note-sort').val(), 'desc']]);
-
-  });
-
 });
diff --git a/karmaworld/assets/js/note-list.js b/karmaworld/assets/js/note-list.js
new file mode 100644 (file)
index 0000000..9022f01
--- /dev/null
@@ -0,0 +1,41 @@
+$(function() {
+  // load dataTable for course data
+  var dataTable = $('#data_table_list').dataTable({
+    // we will set column widths explicitly
+    'bAutoWidth': false,
+    // don't provide a option for the user to change the table page length
+    'bLengthChange': false,
+    // sepcify the number of rows in a page
+    'iDisplayLength': 20,
+    // Position the filter bar at the top
+    'sDom': dataTable_sDom,
+    // Specify options for each column
+    "aoColumnDefs": [
+      {
+        // 2nd element: thanks
+        "aTargets": [ 1 ],
+        "bSortable": true,
+        "bVisible": true
+      },
+      {
+        // 1st element: date
+        "aTargets": [ 0 ],
+        "bSortable": true,
+        "bVisible": true
+      }
+    ],
+    // Initial sorting
+    'aaSorting': [[1,'desc']]
+  });
+
+  if (dataTable.length > 0) {
+    // wire up sort chooser
+    $('select.note-sort').change(function() {
+      dataTable.fnSort([[$(this).val(), 'desc']]);
+    });
+
+    // sort by current value of sort chooser, since
+    // the browser may change this from our default
+    dataTable.fnSort([[$('select.note-sort').val(), 'desc']]);
+  }
+});
index dae2b6b97a6ce5875855101835a67ce8c5fccaea..fee687152682777af929ef0785b2c364bd17237a 100644 (file)
@@ -3,7 +3,7 @@
 {% block raw_content %}
   <section id="account_content">
     <div class="row">
-      <div class="small-12 large-6 columns small-centered center">
+      <div class="small-12 large-8 columns small-centered">
         {% block content %}
         {% endblock %}
       </div>
index b2df969bba7cd6a59354967f2c3c3efc88fea999..01e9ed0cdb17d08f74e47d9e2604f5b7a0219e10 100644 (file)
@@ -9,10 +9,10 @@
   <link rel="shortcut icon" href="{{ STATIC_URL }}img/favicon.ico">
   <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/fontface/fontface.css">
   <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/foundation.min.css">
-  <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/global.css">
   <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/jquery-ui.css">
   <link rel="stylesheet" href="{{ STATIC_URL }}css/vendor/opentip.css">
   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
+  <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/global.css">
 
   <script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
index d98582e6a56a9f3c5b8dda3c743bd48fafdf9a8b..c549ccf536c77782cf88fec7519e783da7a8b7b1 100644 (file)
@@ -3,16 +3,16 @@
 {% load i18n %}
 {% load account %}
 
-{% block head_title %}Control Panel{% endblock %}
+{% block title %}Control Panel{% endblock %}
 
 {% block content %}
-<h1>Hello {% user_display user %}!</h1>
-
-   <h2>Control Panel</h2>
-    
-  <h2><p><a href="{% url 'account_email' %}">Add/Remove Emails</a></p></h2>
-  <h2><p><a href="{% url 'account_change_password' %}">Change Password</a></p></h2>
-  <h2><p><a href="{% url 'socialaccount_connections' %}">Social Accounts</a></p></h2>
+  <h1>Hello {% user_display user %}!</h1>
+  <p>Your account control panel:</p>
+  <ul>
+    <li><a href="{% url 'account_email' %}"><button>Add/Remove Emails</button></a></li>
+    <li><a href="{% url 'account_change_password' %}"><button>Change Password</button></a></li>
+    <li><a href="{% url 'socialaccount_connections' %}"><button>Social Accounts</button></a></li>
+  </ul>
  
 {% endblock %}
 
index 32a71eda941436942eec66a0cf7647f81360a94b..96ff83f9445a7de49a89633ccb3974300bc290df 100644 (file)
@@ -3,16 +3,14 @@
 
 
 {% block pagescripts %}
-  <script src="{{ STATIC_URL }}js/bootstrap-modal.js" ></script>
   <script src="{{ STATIC_URL }}js/setup-ajax.js"></script>
-  <script src="{{ STATIC_URL }}js/course.js"></script>
-  <script src="{{ STATIC_URL }}js/course-detail.js" ></script>
   <script>
     var json_school_course_list = "{% url 'json_school_course_list' %}";
     var json_school_course_instructor_list = "{% url 'json_school_course_instructor_list' %}";
     var csrf_token = "{{ csrf_token }}";
     var course_flag_url = "{% url 'flag_course' course.id %}";
     var course_edit_url = "{% url 'edit_course' course.id %}";
+    var dataTable_sDom = '<"top">rt<"bottom"p><"clear">';
   </script>
 {% endblock %}
 
@@ -23,6 +21,9 @@
 
 {% block bodyscripts %}
   <script src="{{ STATIC_URL }}js/jquery.dataTables.min.js"></script>
+  <script src="{{ STATIC_URL }}js/course.js"></script>
+  <script src="{{ STATIC_URL }}js/course-detail.js" ></script>
+  <script src="{{ STATIC_URL }}js/note-list.js" ></script>
 {% endblock %}
 
 
         {{ file_upload_form.fp_file }}
       </div>
       <div class="small-12 large-6 columns">
-        <form style="display: inline" class="search-notes" action="{% url 'note_search' %}" method="GET">
+        <form class="search-notes" action="{% url 'note_search' %}" method="GET">
           <span>
-          <input style="display: inline;" type="hidden" name="course_id" value="{{ course.id }}" />
+          <input type="hidden" name="course_id" value="{{ course.id }}" />
           <input name="query" class="search-notes" type="text" placeholder="Search Notes" />
           </span>
         </form>
index 515c8deab98eb3690e32556274a540398567a7ed..c161f1b548c9237b1dba2ef28d0571ed8e3f1654 100644 (file)
@@ -18,6 +18,7 @@
     var json_school_course_list = "{% url 'json_school_course_list' %}"
     var json_school_course_instructor_list = "{% url 'json_school_course_instructor_list' %}"
     var csrf_token = "{{ csrf_token }}";
+    var dataTable_sDom = '<"top">rt<"bottom"p><"clear">';
   </script>
   <script src="{{ STATIC_URL }}js/setup-ajax.js"></script>
   <script src="{{ STATIC_URL }}js/course.js"></script>
index f9c89d0fa0443b6fdb856782f17690205c3c7dbf..39efb3c533f1ac995a3999e8ffdccc4f8499e14b 100644 (file)
         <span class="hide-for-large-up"></span>
         <span class="note-thanks"><i class="fa fa-thumbs-up"></i> {{ note.thanks }} thanks</span>
       </div>
-      <div class="note-text show-for-large-up">{{ note.text|slice:":500" }} &hellip;</div>
+      {% if note_preview %}
+        <div class="note-text">{{ note_preview|safe }} &hellip;</div>
+      {% elif note.text|length <= 500 %}
+        <div class="note-text show-for-large-up">{{ note.text }}</div>
+      {% else %}
+        <div class="note-text show-for-large-up">{{ note.text|slice:":500" }} &hellip;</div>
+      {% endif %}
       <div class="note-tags">
         {% if note.tags.count > 0 %}
           <span class="activity_details_context"><strong>Tags:</strong>
index 4b0965bbd1fe7612095ef5b54e2ea2347a661260..ff51b1a8297030308117cbd20a00958e05e7edb8 100644 (file)
 {% endblock %}
 
 {% block pagestyle %}
-  <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/search.css">
   <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/datatables-css/jquery.dataTables.css">
+  <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/note_course_pages.css">
 {% endblock %}
 
-{% block pagescripts %}
-<script src="{{ STATIC_URL }}js/jquery.dataTables.min.js"></script>
-<script>
-  $(document).ready(function() {
-    // load dataTable for course data
-    $('#data_table_list').dataTable({
-      // remove the default filter label
-      'oLanguage': {
-        'sSearch': '',
-      },
-      // we will set column widths explicitly
-      'bAutoWidth': false,
-      // don't provide a option for the user to change the table page length
-      'bLengthChange': false,
-      // sepcify the number of rows in a page
-      'iDisplayLength': 20,
-      // Position the filter bar at the top
-      // DIFF: do now show search bar (f)
-      'sDom': '<"top">rt<"bottom"p><"clear">',
-      // Specify options for each column
-      "aoColumnDefs": [
-        {
-          // 3rd element: notes
-          "aTargets": [ 2 ],
-          "bSortable": true,
-          "bVisible": true,
-          "mData": function ( source, type, val ) {
-            //console.log(source);
-            if (type === 'set') {
-              source.count = val;
-              // Store the computed dislay and filter values for efficiency
-              // DIFF: label name change.
-              source.count_display = val=="" ? "" : "<span>"+val+" Thanks</span>";
-              return;
-            }
-            else if (type === 'display') {
-              return source.count_display;
-            }
-            // 'sort', 'type', 'filter' and undefined all just use the integer
-            return source.count;
-          }
-        },
-        {
-          // 2nd element: date
-          "aTargets": [ 1 ],
-          "bSortable": true,
-          "bVisible": true,
-          "mData": function ( source, type, val ) {
-            //console.log(source);
-            if (type === 'set') {
-              source.date = val;
-              // DIFF: label name change.
-              source.date_display = val=="" ? "" : "<span>Uploaded "+val+"</span>";
-
-              return;
-            }
-            else if (type === 'display') {
-              return source.date_display;
-            }
-            // for types 'sort', 'type', 'filter' and undefined use raw date
-            return source.date;
-          }
-        },
-        {
-          // 1st element: "sort by" label
-          "aTargets": [ 0 ],
-          "bSortable": false,
-          "bVisible": true
-        }
-      ],
-      // Initial sorting
-      'aaSorting': [[2,'desc']]
-    });
-  });
-</script>
+{% block bodyscripts %}
+  <script src="{{ STATIC_URL }}js/jquery.dataTables.min.js"></script>
+  <script src="{{ STATIC_URL }}js/note-list.js"></script>
+  <script>
+    var dataTable_sDom = '<"top">rt<"bottom"><"clear">';
+  </script>
 {% endblock %}
 
 {% block raw_content %}
 <section id="results_content">
-
-  <div id="results_header" class="hero_gradient_bar">
-
-    {% if course %}
+  {% if course %}
+    <div class="return-to-course show-for-large-up">
       <div class="row">
-        <div class="twelve columns header_subhead">
-          <a href="{{ course.get_absolute_url}}">
-            <i class="fa fa-arrow-left"></i>&nbsp;back to {{ course.name }}
+        <div class="small-12 columns">
+          <a href="{{ course.get_absolute_url }}">
+            <i class="fa fa-angle-double-left"></i> See all notes for {{ course.name }}
           </a>
         </div>
       </div>
-    {% endif %}
-
-    <div class="row">
-      <div class="small-12 columns header_subhead">
-        YOU SEARCHED FOR
-      </div>
     </div>
+  {% endif %}
 
+  <div id="results_header">
     <div class="row">
-      <div class="twelve columns header_title">
-        {{ query }}
+      <div class="small-12 columns search-header museo700">
+        You searched for "<strong>{{ query }}</strong>" in
+        {% if course %}
+          <strong>{{ course.name }}</strong>
+        {% else %}
+          all notes
+        {% endif %}
       </div>
     </div>
+  </div>
 
-    {% if course %}
-      <div class="row">
-        <div class="small-12 columns header_subhead">
-          IN COURSE
-        </div>
-      </div>
-
-      <div class="row">
-        <div class="twelve columns header_title">
-          {{ course.name }}
-        </div>
+  <div id="note-search-bar" class="row">
+    <div class="small-12 large-8 columns">
+      <form class="search-notes" action="{% url 'note_search' %}" method="GET">
+        <span>
+        <input type="hidden" name="course_id" value="{{ course.id }}" />
+        {% if course %}
+          <input name="query" class="search-notes" type="text" placeholder="Search Notes in {{ course.name }}" />
+        {% else %}
+          <input name="query" class="search-notes" type="text" placeholder="Search All Notes" />
+        {% endif %}
+        </span>
+      </form>
+    </div>
+    <div class="large-4 columns show-for-large-up">
+      <div id="note-sort-wrapper">
+        Sort By
+        <select class="note-sort">
+          <option value="0">Date</option>
+          <option value="1" selected>Popularity</option>
+        </select>
       </div>
-    {% endif %}
+    </div>
   </div>
 
   <div id="results_container">
     <div class="row">
       {% if object_list %}
-        <div class="small-12 columns large-10 large-offset-1">
+        <div class="small-12 columns">
           <table id="data_table_list">
-            <thead><tr>
-              <th id="data-table-sort-by"> Sort by: </th>
-              <th id="data-table-date"> Date </th>
-              <th id="data-table-thank-count"> Popularity </th>
-              <th class="no-display" id="data-table-note-name"> Name </th>
-              <th class="no-display" id="data-table-tags"> Tags </th>
-              <th class="no-display" id="data-table-note-preview"> Preview </th>
-            </tr></thead>
+            <thead class="hide">
+              <tr>
+                <th id="data-table-date"> Date </th>
+                <th id="data-table-thank-count"> Popularity </th>
+                <th id="data-table-note-preview"> Preview </th>
+              </tr>
+            </thead>
             <tbody>
               {% for tuple in object_list %}
                 {% include 'notes/note_list_entry.html' with note=tuple.0 note_preview=tuple.1 %}
index 71ab51b8621c1b72c6755264c0191c2c8a8a62f9..31c62c0640508702160c0c4463e8d114bc8ad2c7 100644 (file)
@@ -6,6 +6,14 @@
   <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/dashboard.css">
 {% endblock %}
 
+{% block bodyscripts %}
+  <script>
+    $(function() {
+      $("#tabs").tabs();
+    });
+  </script>
+{% endblock %}
+
 {% block title %}
   Your KarmaNotes Profile
 {% endblock %}
     </div>
 
     <div id="activity_container">
+      <div class="row">
+        <div id="tabs" class="small-12 columns">
+          <ul>
+            <li><a href="#activity">Karma Point Activity</a></li>
+          </ul>
+          <div id="activity">
+            {% for item in object_list %}
+
+              <div class="row">
+                <div class="small-10 columns small-centered {% cycle '' 'row_alt_on'%}">
+
+                  <div class="activity_item">
+                    {% if 'KarmaEvent' in item.0 %}
+                      {% with event=item.1 %}
+                        <div class="row">
+                          <div class="small-12 columns activity_timestamp">
+                            <span class="activity_date">{{ event.timestamp|date:"D b j Y" }}</span>
+                          </div>
+                          <div class="small-12 columns activity_details_action">
+                            {% if event.points > 0 %}
+                            <span class="activity_details_points_positive">+{{ event.points }}</span>
+                            {% else %}
+                            <span class="activity_details_points_negative">{{ event.points }}</span>
+                            {% endif %}
+                            {{ event.get_message }}
+                          </div>
+                          {% if item.0 == 'NoteKarmaEvent' %}
+                            <div class="small-12 columns activity_details_action">
+                              <a href="{{ event.note.get_absolute_url }}" class="activity_target">{{ event.note.name }}</a>
+                            </div>
+                            <div class="small-12 columns activity_details_context">
+                              <a href="{{ event.note.course.get_absolute_url }}" class="course_link">{{ event.note.course.name }} // {{ event.note.course.school.name }}</a>
+                            </div>
+                          {% endif %}
+                          {% if item.0 == 'CourseKarmaEvent' %}
+                            <div class="small-12 columns activity_details_action">
+                              <a href="{{ event.course.get_absolute_url }}" class="activity_target">{{ event.course.name }}</a>
+                            </div>
+                            <div class="small-12 columns activity_details_context">
+                              {{ event.course.school.name }}
+                            </div>
+                          {% endif %}
+
+                        </div>
+                      {% endwith %}
+
+                    {% endif %}
+
+
+                  </div>
+
+                </div>
+              </div>
+
+            {% endfor %}
+          </div>
+        </div>
+      </div>
 
       <div class="row">
         <div class="small-10 columns small-centered column_header">
         </div>
       {% endif %}
 
-      {% for item in object_list %}
-
-        <div class="row">
-          <div class="small-10 columns small-centered {% cycle '' 'row_alt_on'%}">
-
-            <div class="activity_item">
-              {% if 'KarmaEvent' in item.0 %}
-                {% with event=item.1 %}
-                  <div class="row">
-                    <div class="small-12 columns activity_timestamp">
-                      <span class="activity_date">{{ event.timestamp|date:"D b j Y" }}</span>
-                    </div>
-                    <div class="small-12 columns activity_details_action">
-                      {% if event.points > 0 %}
-                      <span class="activity_details_points_positive">+{{ event.points }}</span>
-                      {% else %}
-                      <span class="activity_details_points_negative">{{ event.points }}</span>
-                      {% endif %}
-                      {{ event.get_message }}
-                    </div>
-                    {% if item.0 == 'NoteKarmaEvent' %}
-                      <div class="small-12 columns activity_details_action">
-                        <a href="{{ event.note.get_absolute_url }}" class="activity_target">{{ event.note.name }}</a>
-                      </div>
-                      <div class="small-12 columns activity_details_context">
-                        <a href="{{ event.note.course.get_absolute_url }}" class="course_link">{{ event.note.course.name }} // {{ event.note.course.school.name }}</a>
-                      </div>
-                    {% endif %}
-                    {% if item.0 == 'CourseKarmaEvent' %}
-                      <div class="small-12 columns activity_details_action">
-                        <a href="{{ event.course.get_absolute_url }}" class="activity_target">{{ event.course.name }}</a>
-                      </div>
-                      <div class="small-12 columns activity_details_context">
-                        {{ event.course.school.name }}
-                      </div>
-                    {% endif %}
-
-                  </div>
-                {% endwith %}
-
-              {% endif %}
-
-
-            </div>
-
-          </div>
-        </div>
 
-      {% endfor %}
 
     </div>