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" href="{{ STATIC_URL }}css/table_sort.css">
  12 {% endblock %}
  13
  14 {% block pagescripts %}
  15 <script src="{{ STATIC_URL }}js/jquery.tablesorter.min.js"></script>
  16 <script src="{{ STATIC_URL }}js/jquery.tablesorter.widgets.min.js"></script>
  17 <script src="{{ STATIC_URL }}js/bootstrap-modal.js" ></script>
  18 <script>
  19 $(document).ready(function()
  20 {
  21   $("#course_list").tablesorter(
  22   {
  23     widgets: ["filter", "zebra"],
  24     headers: { 3: { filter: false, sorter: true }, 4: { filter: false, sorter: true } },
  25     widgetOptions :
  26     {
  27       // This isn't working how I hoped. It appears that tablesorter isn't actually changing the
  28       // even odd in accordance with the filter
  29       zebra : [ "odd", "even" ],
  30
  31       //Resizable widget: If this option is set to false, resized column widths will not be saved.
  32       //Previous saved values will be restored on page reload.
  33       resizable: false,
  34
  35       // If there are child rows in the table (rows with class name from "cssChildRow" option)
  36       // and this option is true and a match is found anywhere in the child row, then it will make that row
  37       // visible; default is false
  38       filter_childRows : false,
  39
  40       // if true, a filter will be added to the top of each table column;
  41       // disabled by using -> headers: { 1: { filter: false } } OR add class="filter-false"
  42       // if you set this to false, make sure you perform a search using the second method below
  43       filter_columnFilters : true,
  44
  45       // css class applied to the table row containing the filters & the inputs within that row
  46       //filter_cssFilter : 'tablesorter-filter',
  47
  48       // add custom filter functions using this option
  49       // see the filter widget custom demo for more specifics on how to use this option
  50       filter_functions : null,
  51
  52       // if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
  53       // below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
  54       filter_hideFilters : false,
  55
  56       // Set this option to false to make the searches case sensitive
  57       filter_ignoreCase : true,
  58
  59       // jQuery selector string of an element used to reset the filters
  60       filter_reset : 'button.reset',
  61
  62       // Delay in milliseconds before the filter widget starts searching; This option prevents searching for
  63       // every character while typing and should make searching large tables faster.
  64       filter_searchDelay : 150,
  65
  66       // Set this option to true to use the filter to find text from the start of the column
  67       // So typing in "a" will find "albert" but not "frank", both have a's; default is false
  68       filter_startsWith : false,
  69
  70       // Filter using parsed content for ALL columns
  71       // be careful on using this on date columns as the date is parsed and stored as time in seconds
  72       filter_useParsedData : false
  73     }
  74   });
  75 });
  76
  77 console.log('tablesorter finished');
  78 </script>
  79 {% endblock %}
  80
  81 {% block lightboxen %}
  82   {% include 'lightbox/add_course.html' %}
  83 {% endblock %}
  84
  85 {% block content %}
  86 <section id="home_content">
  87   <div id="page_header" class="hero_gradient_bar">
  88     <div class="row">
  89       <div id="subhead" class="twelve columns">
  90         Welcome to KarmaNotes
  91       </div> <!-- #subhead -->
  92     </div> <!-- .row -->
  93     <div class="row">
  94       <div id="page_instruction" class="twelve columns center">
  95         Choose a course to browse or upload
  96       </div> <!-- #subhead -->
  97     </div> <!-- .row -->
  98   </div> <!-- #page_header -->
  99   <div class="row">
 100     <div class="ten columns offset-by-one">
 101       <table id="course_list" class="tablesorter responsive">
 102         <thead>
 103           <tr>
 104             <th> School </th>
 105             <th> Course Name </th>
 106             <th> Instructor </th>
 107             <th> Notes # </th>
 108             <th> Last Updated </th>
 109           </tr>
 110         </thead>
 111         <tbody>
 112         {% for course in object_list %}
 113           <tr>
 114             <td> {{ course.school.name }} </td>
 115             <td> <a href="{{ course.get_absolute_url }}">{{ course.name }}</a> </td>
 116             <td> {{ course.instructor_name }} </td>
 117             <td> {{ course.file_count }} </td>
 118             <td> {{ course.updated_at|date:"gA // D M d o" }} </td>
 119           </tr>
 120         {% endfor %}
 121         </tbody>
 122       </table>
 123     </div><!-- .ten columns -->
 124   </div> <!-- .row -->
 125   <div class="row">
 126     <div class="ten columns offset-by-one">
 127       <p class="text">Can't find your course?
 128         <a href="#add-course" role="button" class="btn" data-toggle="modal">Add it now</a>
 129       </p>
 130     </div><!-- .ten columns -->
 131   </div> <!-- .row -->
 132 </section> <!-- #results_content -->
 133
 134 {% endblock %}