karmaworld/templates/courses/course_list.html

   1 {% extends "base.html" %}
   2 {% load url from future %}
   3
   4 {% block title %}
   5   Share College Course Notes
   6 {% endblock %}
   7
   8 {% block pagestyle %}
   9 <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/home.css">
  10 <!-- <link rel="stylesheet" href="{{ STATIC_URL }}css/responsive-tables.css"> -->
  11 <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/data_table_list.css">
  12 <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/datatables-css/jquery.dataTables.css">
  13 {% endblock %}
  14
  15 {% block pagescripts %}
  16 <script src="{{ STATIC_URL }}js/jquery.dataTables.min.js"></script>
  17
  18 <script>
  19 $(document).ready(function() {
  20   // If there were form errors, open the form and jump to it
  21   var jump_to_form = {% if jump_to_form %}true{% else%}false{% endif %};
  22   if (jump_to_form) {
  23     $("#add-course-form").show();
  24     $('#add-course-btn').hide();
  25     document.getElementById('add-course-form').scrollIntoView(true);
  26   }
  27
  28   // load dataTable for course data
  29   $('#data_table_list').dataTable({
  30     // remove the default filter label
  31     'oLanguage': {
  32       'sSearch': '',
  33     },
  34     // we will set column widths explicitly
  35     'bAutoWidth': false,
  36     // don't provide a option for the user to change the table page length
  37     'bLengthChange': false,
  38     // sepcify the number of rows in a page
  39     'iDisplayLength': 20,
  40     // Position the filter bar at the top
  41     'sDom': '<"top"f>rt<"bottom"p><"clear">',
  42     // Specify options for each column
  43     "aoColumnDefs": [
  44       {
  45         // 4th element: thanks
  46         "aTargets": [ 6 ],
  47         "bSortable": true,
  48         "bVisible": true,
  49         "aDataSort": [ 3 ]
  50       },
  51       {
  52         // 3rd element: notes
  53         "aTargets": [ 5 ],
  54         "bSortable": true,
  55         "bVisible": true,
  56         "aDataSort": [ 2 ]
  57       },
  58       {
  59         // 2nd element: date
  60         "aTargets": [ 4 ],
  61         "bSortable": true,
  62         "bVisible": true,
  63         "aDataSort": [ 1 ]
  64       },
  65       {
  66         // 1st element: "sort by" label
  67         "aTargets": [ 0 ],
  68         "bSortable": false,
  69         "bVisible": true
  70       }
  71     ],
  72     // Initial sorting
  73     'aaSorting': [[6,'desc']]
  74   });
  75   $('.dataTables_filter input').attr("placeholder", "search courses");
  76   // TODO: can't prepend html to .dataTables_filter input html for fontawesome search icon
  77 });
  78 </script>
  79 {% endblock %}
  80
  81 {% block content %}
  82 <section id="home_content">
  83   <div id="page_header" class="">
  84     <div id="subhead" class="row">
  85       <div class="small-3 large-2 columns">
  86         <img src='{{ STATIC_URL }}img/noun_project_6858.svg' alt="A depiction of books">
  87       </div>
  88       <div class="small-9 large-10 columns">
  89         <div class="row subhead-spacer hide-for-small"> </div>
  90         <span>Access a growing database of <span style="color: #f05a28;">{{ note_count }}</span> college lecture notes</span>
  91       </div>
  92     </div>
  93   </div>
  94   <div class="row">
  95     <div class="small-12 columns">
  96       <!-- Main course table -->
  97       <table id="data_table_list">
  98         <thead>
  99           <tr>
 100             <th id="data-table-sort-by"> Sort by: </th>
 101             <th class="no-display" id="data-table-date-hidden"> Date </th>
 102             <th class="no-display" id="data-table-note-count-hidden"> # Notes </th>
 103             <th class="no-display" id="data-table-thanks-hidden"> Popularity </th>
 104             <th id="data-table-date"> Date </th>
 105             <th id="data-table-note-count"> # Notes </th>
 106             <th id="data-table-thanks"> Popularity </th>
 107             <th class="no-display" id="data-table-upload"> Upload </th>
 108             <th class="no-display" id="data-table-course-name"> Course Name </th>
 109             <th class="no-display" id="data-table-school-name"> Institution </th>
 110             <th class="no-display" id="data-table-instructor-name"> Instructor </th>
 111           </tr>
 112         </thead>
 113         <tbody>
 114         {% for course in object_list %}
 115           {% include 'courses/course_list_entry.html' %}
 116         {% endfor %}
 117         </tbody>
 118       </table>
 119     </div><!-- .ten columns -->
 120   </div> <!-- .row -->
 121
 122   <div class="row">
 123     <div id="add-course-divider" class="small-10 columns small-offset-1"> <hr/> </div>
 124   </div>
 125
 126   <div class="row">
 127     <div class="small-12 columns large-10 large-offset-1">
 128       <div id="add-course-btn">
 129         <i class="fa fa-arrow-circle-o-up"></i> add a course
 130       </div>
 131         {% include 'partial/add_course.html' %}
 132     </div><!-- .ten columns -->
 133   </div> <!-- .row -->
 134
 135   <div class="row">
 136     <div class="small-10 columns small-offset-1"> <hr/> </div>
 137   </div>
 138
 139 </section> <!-- #results_content -->
 140
 141 {% endblock %}
 142
 143 {% block bodyscripts %}
 144 {% endblock bodyscripts %}