-table#course_list
+table#data_table_list
{
margin:14px auto;
}
color:#f05a28;
}
+
/***************
Search Bar
***************/
-#course_list_filter input {
+#data_table_list_filter {
+ /* pulled out of global.css */
+ margin: 0;
+}
+
+#data_table_list_filter input {
font: 22px/1em "MuseoSlab-300";
margin-top: 20px;
margin-bottom: 20px;
*cursor: hand;
}
-table.dataTable thead th.sort_by {
+table.dataTable thead th.sort-by {
padding-right: 0px;
}
-table#course_list thead tr
+table#data_table_list thead tr
{
height: 50px;
}
-table#course_list th
+table#data_table_list th
{
float:left;
font-family: "MuseoSlab-300";
text-decoration: underline;
}
-th.date {
-}
-
-th.note-count {
-}
-
-th.school-name {
- display: none;
-}
-
-th.course-name {
- display: none;
-}
-
-th.instructor-name {
+th.no-display {
display: none;
}
/***************
Table Data
***************/
-table#course_list {
+table#data_table_list {
/*border-collapse: collapse;*/
}
height: 20px; /* required for :hover on Table Rows (when floating td elements) */
}
-table#course_list tr:nth-child(even)
+td.no-display {
+ display: none;
+}
+
+table#data_table_list tr:nth-child(even)
{
/*background: url(../img/dashboard_activity_alt_on_bg.gif);*/
}
/* underline all links in the table body */
-table#course_list tbody td a {
+table#data_table_list tbody td a {
text-decoration: underline;
}
/* rows of course data */
-table#course_list tbody tr {
+table#data_table_list tbody tr {
width: 840px;
}
+
/***************
Slim Row
***************/
-table.dataTable td.sort_by {
+table.dataTable td.sort-by {
/* hack - Provide positioning for the "sort by text" */
display:none;
}
/*width: 400px; [> 100% minus td.date width -- make sure the next line wraps <]*/
}
+
/***************
Fat Row
***************/
font-size: 18px;
}
-table#course_list td div.upload {
+table#data_table_list td div.upload {
width: 45px;
height: 45px;
visibility: hidden;
margin-top: -8px;
}
-
-table#course_list td div.upload i {
+table#data_table_list td div.upload i {
display: block;
cursor: pointer;
}
-table#course_list td div.upload a {
+
+table#data_table_list td div.upload a {
text-decoration: none;
}
-table#course_list tr:hover td div.upload {
+table#data_table_list tr:hover td div.upload {
visibility: visible;
}
font-size: 18px;
}
-
/* CSS HACKS */
/* Makes lines look better */
td.columns {
line-height: 1.5em;
}
-table#course_list tr td:last-child {
+table#data_table_list tr td:last-child {
margin-bottom: 20px;
}
+
+@media only screen and (min-width: 768px) {
+ /* pulled out of global.css */
+
+ table#data_table_list .table-font {
+ font-family: "MuseoSlab-300";
+ font-size: 18px;
+ font-style: normal;
+ }
+
+ table#data_table_list tr td:last-child {
+ /* override some vrtial margin spacing for the front page table */
+ margin-bottom: 0;
+ }
+}
.note_preview
{
- margin-top: 2em;
+ margin-bottom: 2em;
line-height: 125%;
font: 14px/1.4em "Georga", Serif;
font-style: italic;
padding-bottom: 1px;
}
-#course_list_filter {
- margin: 0;
-}
-
.center
{
text-align: center;
#subhead span {
font-size: 22px;
}
-
- /* make some fields of the frontpage table a larger font, but only when large */
- table#course_list .table-font {
- font-family: "MuseoSlab-300";
- font-size: 18px;
- font-style: normal;
- }
-
- table#course_list tr td:last-child {
- /* override some vertical margin spacing for the front page table */
- margin-bottom: 0;
- }
-
-
-
-
-
}
// initialise the tablesorter
- $("#course_list").tablesorter(
+ $("#data_table_list").tablesorter(
{
widgets: ["filter", "zebra"],
headers: { 3: { filter: false, sorter: true }, 4: { filter: false, sorter: true } },
widgetOptions: widgetOptions
});
- $("#course_list").tablesorterPager(pagerOptions);
+ $("#data_table_list").tablesorterPager(pagerOptions);
console.log('Finished initing tablesorterPager');
});
<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 src="{{ STATIC_URL }}js/jquery.dataTables.min.js" ></script>
<script>
+ $(document).ready(function () {
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 %}";
+
+ $('#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 not show search bar (f)
+ 'sDom': '<"top">rt<"bottom"p><"clear">',
+ // Specify options for each column
+ "aoColumnDefs": [
+ {
+ // 3rd element: likes
+ "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>
{% endblock %}
{% 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/course_list_table.css">
+ <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/datatables-css/jquery.dataTables.css">
{% endblock %}
<div id="course_container">
<div class="row">
<div class="small-12 columns large-10 large-offset-1">
- {% for note in note_set %}
- {% include 'notes/note_list_entry.html' with note=note %}
- {% endfor %}
+ <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>
+ <tbody>
+ {% for note in note_set %}
+ {% include 'notes/note_list_entry.html' with note=note %}
+ {% endfor %}
+ </tbody>
+ </table>
</div>
</div>
</div><!-- /course_container -->
- {% comment %}
- <div class="row">
- <div class="twelve columns">
- <div id="search_pagination" style="width: 232px"><!-- WIDTH SHOULD BE SET DYNAMICALLY TO ENABLE MARGIN: AUTO -->
- <div id="search_pagination_left">
- <img src="img/search_arrow_left.png" alt="search_arrow_left" width="5" height="10" />
- </div><!-- /search_pagination_left -->
- <div id="search_pagination_numbers">
- <ul>
- <li class="button_interior">1</li>
- <li>2</li>
- <li>3</li>
- <li>4</li>
- <li>5</li>
- <li>6</li>
- </ul>
- </div><!-- /search_pagination_numbers -->
- <div id="search_pagination_right">
- <img src="img/search_arrow_right.png" alt="search_arrow_right" width="5" height="10" />
- </div><!-- /search_pagination_right -->
- </div><!-- /search_pagination -->
- </div>
- </div>
- {% endcomment %}
</section><!--/course_content-->
{% endblock %}
{% block pagestyle %}
<link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/home.css">
<!-- <link rel="stylesheet" href="{{ STATIC_URL }}css/responsive-tables.css"> -->
-<link rel="stylesheet" href="{{ STATIC_URL }}css/course_list_table.css">
-<link rel="stylesheet" href="{{ STATIC_URL }}css/datatables-css/jquery.dataTables.css"> <!-- dataTables -->
+<link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/course_list_table.css">
+<link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/datatables-css/jquery.dataTables.css">
{% endblock %}
{% block pagescripts %}
document.getElementById('add-course-form').scrollIntoView(true);
}
-
// load dataTable for course data
- $('#course_list').dataTable({
+ $('#data_table_list').dataTable({
// remove the default filter label
'oLanguage': {
'sSearch': '',
// Position the filter bar at the top
'sDom': '<"top"f>rt<"bottom"p><"clear">',
// Specify options for each column
- 'aoColumns': [
- { "bSearchable": false, "bSortable":false, },
- { "bSearchable": false },
- { "bSearchable": false },
- null,
- null,
- null,
- null,
- ],
"aoColumnDefs": [
- {
- "aTargets": [ 'note-count' ], // matches a 'th' element class name
- "mData": function ( source, type, val ) {
- //console.log(source);
- if (type === 'set') {
- source.count = val;
- // Store the computed dislay and filter values for efficiency
- source.count_display = val=="" ? "" : "<span>"+val+" Notes</span>";
- return;
- }
- else if (type === 'display') {
- return source.count_display;
+ {
+ // 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
+ source.count_display = val=="" ? "" : "<span>"+val+" Notes</span>";
+ return;
+ }
+ else if (type === 'display') {
+ return source.count_display;
+ }
+ // 'sort', 'type', 'filter' and undefined all just use the integer
+ return source.count;
}
- // 'sort', 'type', 'filter' and undefined all just use the integer
- return source.count;
- }
- },
- {
- "aTargets": [ 'date' ], // matches a 'th' element class name
- "mData": function ( source, type, val ) {
- //console.log(source);
- if (type === 'set') {
- source.date = val;
- source.date_display = val=="" ? "" : "<span>Updated "+val+"</span>";
- return;
- }
- else if (type === 'display') {
- return source.date_display;
+ },
+ {
+ // 2nd element: date
+ "aTargets": [ 1 ],
+ "bSortable": true,
+ "bVisible": true,
+ "mData": function ( source, type, val ) {
+ //console.log(source);
+ if (type === 'set') {
+ source.date = val;
+ source.date_display = val=="" ? "" : "<span>Updated "+val+"</span>";
+ return;
+ }
+ else if (type === 'display') {
+ return source.date_display;
+ }
+ // for types 'sort', 'type', 'filter' and undefined use raw date
+ return source.date;
}
- // 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']]
});
<div id="page_header" class="">
<div id="subhead" class="row">
<div class="small-3 large-2 columns">
- <img src='{{ STATIC_URL }}img/noun_project_6858.svg' alt="Pieter J. Smits, from The Noun Project">
+ <img src='{{ STATIC_URL }}img/noun_project_6858.svg' alt="A depiction of books">
</div>
<div class="small-9 large-10 columns">
<div class="row subhead-spacer hide-for-small"> </div>
<div class="row">
<div class="small-12 columns">
<!-- Main course table -->
- <table id="course_list" class="">
- <!-- specify col widths -->
- <colgroup>
- <col span="1" style="width: 100%">
- <col span="5" style="width: 0%">
- </colgroup>
+ <table id="data_table_list">
<thead>
<tr>
- <th class="sort_by">Sort by:</th>
- <th class="date"> Date </th>
- <th class="note-count"> #Notes </th>
- <th class="course-name"> Course Name </th>
- <th class="school-name"> Institution </th>
- <th class="instructor-name"> Instructor </th>
+ <th id="data-table-sort-by"> Sort by: </th>
+ <th id="data-table-date"> Date </th>
+ <th id="data-table-note-count"> #Notes </th>
+ <th class="no-display" id="data-table-upload"> Upload </th>
+ <th class="no-display" id="data-table-course-name"> Course Name </th>
+ <th class="no-display" id="data-table-school-name"> Institution </th>
+ <th class="no-display" id="data-table-instructor-name"> Instructor </th>
</tr>
</thead>
<tbody>
{% endblock %}
{% block bodyscripts %}
-{% endblock bodyscripts %}
\ No newline at end of file
+{% endblock bodyscripts %}
<tr>
- <td class="sort_by"></td>
+ <td class="no-display"><!-- this spot solely for the Sort By header --></td>
<td class="small-8 columns large-4 slim">{{ course.updated_at|date:"b d, o"|capfirst }}</td>
- <td class="note-count small-4 columns large-2 large-offset-2 slim">{{ course.file_count }}</td>
+ <td class="small-4 columns large-2 large-offset-2 slim">{{ course.file_count }}</td>
- <td class="course-name small-12 large-5 columns">
- <a class="" href="{{ course.get_absolute_url }}">{% if course.department %}{{course.department.name}}: {% endif %}{{ course.name }}</a>
+ <td class="small-12 large-5 columns">
+ <a href="{{ course.get_absolute_url }}">{% if course.department %}{{course.department.name}}: {% endif %}{{ course.name }}</a>
</td>
- <td class="upload hide-for-small large-1 column">
+ <td class="hide-for-small large-1 column">
<div class="upload">
<a href="{{ course.get_absolute_url }}#upload-note">
<i
</a>
</div>
</td>
- <td class="school-name small-6 large-3 columns"><span class="table-font">{{ course.school.name }}</span></td>
- <td class="instructor-name small-6 large-3 columns"><span class="table-font">{{ course.instructor_name }}</span></td>
+ <td class="small-6 large-3 columns"><span class="table-font">{{ course.school.name }}</span></td>
+ <td class="small-6 large-3 columns"><span class="table-font">{{ course.instructor_name }}</span></td>
</tr>
-<div class="row notes_result_container wide">
- <div class="twelve columns notes_result">
+<tr>
+ <td class="no-display"><!-- this spot solely for the Sort By header --></td>
+ <td class="small-8 columns large-4 slim">{{ note.uploaded_at|date:"l M d o"|capfirst }}</td>
+ <td class="small-4 columns large-2 large-offset-2 slim">{{ note.thanks }}</td>
- <div class="note_name">
- <a href="{{ note.get_absolute_url }}" class="activity_target">{{ note.name }}</a>
- </div>
-
- <time datetime="{{ note.uploaded_at }}">
- {{ note.uploaded_at|date:"l M d o" }}
- </time>
+ <td class="small-12 large-5 columns">
+ <a href="{{ note.get_absolute_url }}">{{ note.name }}</a>
+ </td>
+ <td class="twelve columns">
{% if note.tags.count > 0 %}
- <div class="activity_details_context">
- Tags:
- {% for tag in note.tags.all %}
- {{ tag.name }}
- {% if not forloop.last %}, {% endif %}
- {% endfor %}
- </div>
+ <span class="activity_details_context">Tags:
+ {% for tag in note.tags.all %}
+ {{ tag.name }}{% if not forloop.last %}, {% endif %}
+ {% endfor %}
+ </span>
{% endif %}
+ </td>
+
+ <td class="twelve columns note_preview">
+ {% if note_preview %}
+ {{ note_preview|safe }}
+ {% elif note.text|length <= 500 %}
+ {{ note.text }}
+ {% else %}
+ {{ note.text|slice:":500" }} …
+ {% endif %}
+ <hr class="midrule"></hr>
+ </td>
-
- <div class="note_preview">
- {% if note_preview %}
- {{ note_preview|safe }}
- {% else %}
- {{ note.text|slice:":500" }} …
- {% endif %}
- </div>
-
-
- </div><!-- /notes_result -->
-</div><!-- /notes_result_container -->
-
-<hr class=midrule>
+</tr>
{% 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/course_list_table.css">
+ <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/datatables-css/jquery.dataTables.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>
{% endblock %}
{% block content %}
<div class="row">
{% if object_list %}
<div class="small-12 columns large-10 large-offset-1">
- {% for tuple in object_list %}
- {% include 'notes/note_list_entry.html' with note=tuple.0 note_preview=tuple.1 %}
- {% endfor %}
+ <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>
+ <tbody>
+ {% for tuple in object_list %}
+ {% include 'notes/note_list_entry.html' with note=tuple.0 note_preview=tuple.1 %}
+ {% endfor %}
+ </tbody>
+ </table>
</div>
{% else %}
<div id="no_results" class="small-12 columns center column">
projects / oweals / karmaworld.git / commitdiff