From: Bryan Date: Fri, 21 Feb 2014 06:43:34 +0000 (-0500) Subject: for #266 : tablified course detail and note search results, cleaned up DataTable... X-Git-Tag: release-20150131~163^2~12 X-Git-Url: https://git.librecmc.org/?a=commitdiff_plain;h=bd1f369355a2150bcfbbd79138a483b2a6c40546;p=oweals%2Fkarmaworld.git for #266 : tablified course detail and note search results, cleaned up DataTable javascript a bit, then copy pasted it all over, cleaned up CSS. --- diff --git a/karmaworld/assets/css/course_list_table.css b/karmaworld/assets/css/course_list_table.css index 96673d4..f3f9042 100644 --- a/karmaworld/assets/css/course_list_table.css +++ b/karmaworld/assets/css/course_list_table.css @@ -1,4 +1,4 @@ -table#course_list +table#data_table_list { margin:14px auto; } @@ -9,10 +9,16 @@ a:hover { 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; @@ -35,16 +41,16 @@ table.dataTable thead th { *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"; @@ -56,21 +62,7 @@ th.sorting_asc, th.sorting_desc { 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; } @@ -78,7 +70,7 @@ th.instructor-name { /*************** Table Data ***************/ -table#course_list { +table#data_table_list { /*border-collapse: collapse;*/ } @@ -107,25 +99,30 @@ td.slim * { 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; } @@ -135,6 +132,7 @@ td.note-count * { /*width: 400px; [> 100% minus td.date width -- make sure the next line wraps <]*/ } + /*************** Fat Row ***************/ @@ -143,7 +141,7 @@ td.course-name * { font-size: 18px; } -table#course_list td div.upload { +table#data_table_list td div.upload { width: 45px; height: 45px; visibility: hidden; @@ -153,16 +151,16 @@ table#course_list td div.upload { 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; } @@ -172,13 +170,27 @@ table#course_list tr:hover td div.upload { 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; + } +} diff --git a/karmaworld/assets/css/global.css b/karmaworld/assets/css/global.css index 6426f43..6f5f02c 100644 --- a/karmaworld/assets/css/global.css +++ b/karmaworld/assets/css/global.css @@ -527,7 +527,7 @@ a.activity_target:hover .note_preview { - margin-top: 2em; + margin-bottom: 2em; line-height: 125%; font: 14px/1.4em "Georga", Serif; font-style: italic; @@ -753,10 +753,6 @@ ul#course_menu li a padding-bottom: 1px; } -#course_list_filter { - margin: 0; -} - .center { text-align: center; @@ -947,21 +943,4 @@ ul.socialaccount_providers li { #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; - } - - - - - } diff --git a/karmaworld/assets/js/sort-tables.js b/karmaworld/assets/js/sort-tables.js index 51d862a..38a0940 100644 --- a/karmaworld/assets/js/sort-tables.js +++ b/karmaworld/assets/js/sort-tables.js @@ -68,13 +68,13 @@ $(function() // 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'); }); diff --git a/karmaworld/templates/courses/course_detail.html b/karmaworld/templates/courses/course_detail.html index d3d6bd8..049f67e 100644 --- a/karmaworld/templates/courses/course_detail.html +++ b/karmaworld/templates/courses/course_detail.html @@ -7,17 +7,90 @@ + {% endblock %} {% block pagestyle %} + + {% endblock %} @@ -170,37 +243,25 @@
- {% for note in note_set %} - {% include 'notes/note_list_entry.html' with note=note %} - {% endfor %} + + + + + + + + + + + {% for note in note_set %} + {% include 'notes/note_list_entry.html' with note=note %} + {% endfor %} + +
Sort by: Date Popularity Name Tags Preview
- {% comment %} -
-
-
-
- search_arrow_left -
-
-
    -
  • 1
    • -
  • 2
    • -
  • 3
    • -
  • 4
    • -
  • 5
    • -
  • 6
    • -
-
-
- search_arrow_right -
-
-
-
- {% endcomment %} {% endblock %} diff --git a/karmaworld/templates/courses/course_list.html b/karmaworld/templates/courses/course_list.html index 7d6b4f1..8c145d2 100644 --- a/karmaworld/templates/courses/course_list.html +++ b/karmaworld/templates/courses/course_list.html @@ -8,8 +8,8 @@ {% block pagestyle %} - - + + {% endblock %} {% block pagescripts %} @@ -25,9 +25,8 @@ $(document).ready(function() { 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': '', @@ -41,49 +40,53 @@ $(document).ready(function() { // 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=="" ? "" : ""+val+" Notes"; - 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=="" ? "" : ""+val+" Notes"; + 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=="" ? "" : "Updated "+val+""; - 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=="" ? "" : "Updated "+val+""; + 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']] }); @@ -98,7 +101,7 @@ $(document).ready(function() {
- Pieter J. Smits, from The Noun Project + A depiction of books
@@ -109,20 +112,16 @@ $(document).ready(function() {
- - - - - - +
- - - - - - + + + + + + + @@ -156,4 +155,4 @@ $(document).ready(function() { {% endblock %} {% block bodyscripts %} -{% endblock bodyscripts %} \ No newline at end of file +{% endblock bodyscripts %} diff --git a/karmaworld/templates/courses/course_list_entry.html b/karmaworld/templates/courses/course_list_entry.html index d6bfbc1..0f2ac62 100644 --- a/karmaworld/templates/courses/course_list_entry.html +++ b/karmaworld/templates/courses/course_list_entry.html @@ -1,12 +1,12 @@ - + - + - - - - + + diff --git a/karmaworld/templates/notes/note_list_entry.html b/karmaworld/templates/notes/note_list_entry.html index c640386..9a71c24 100644 --- a/karmaworld/templates/notes/note_list_entry.html +++ b/karmaworld/templates/notes/note_list_entry.html @@ -1,35 +1,31 @@ -
-
+
+ + + -
- {{ note.name }} -
- - + + + + - -
- {% if note_preview %} - {{ note_preview|safe }} - {% else %} - {{ note.text|slice:":500" }} … - {% endif %} -
- - - - - -
+ diff --git a/karmaworld/templates/notes/search_results.html b/karmaworld/templates/notes/search_results.html index a9bd52b..3a8b7b0 100644 --- a/karmaworld/templates/notes/search_results.html +++ b/karmaworld/templates/notes/search_results.html @@ -7,6 +7,85 @@ {% block pagestyle %} + + +{% endblock %} + +{% block pagescripts %} + + {% endblock %} {% block content %} @@ -55,9 +134,21 @@
{% if object_list %}
- {% for tuple in object_list %} - {% include 'notes/note_list_entry.html' with note=tuple.0 note_preview=tuple.1 %} - {% endfor %} +
Sort by: Date #Notes Course Name Institution Instructor Sort by: Date #Notes Upload Course Name Institution Instructor
{{ course.updated_at|date:"b d, o"|capfirst }}{{ course.file_count }}{{ course.file_count }} - {% if course.department %}{{course.department.name}}: {% endif %}{{ course.name }} + + {% if course.department %}{{course.department.name}}: {% endif %}{{ course.name }} +
{{ course.school.name }}{{ course.instructor_name }}{{ course.school.name }}{{ course.instructor_name }}
{{ note.uploaded_at|date:"l M d o"|capfirst }}{{ note.thanks }} + {{ note.name }} + {% if note.tags.count > 0 %} -
- Tags: - {% for tag in note.tags.all %} - {{ tag.name }} - {% if not forloop.last %}, {% endif %} - {% endfor %} -
+ Tags: + {% for tag in note.tags.all %} + {{ tag.name }}{% if not forloop.last %}, {% endif %} + {% endfor %} + {% endif %} + 		+ {% if note_preview %} + {{ note_preview|safe }} + {% elif note.text|length <= 500 %} + {{ note.text }} + {% else %} + {{ note.text|slice:":500" }} … + {% endif %} +
+
+ + + + + + + + + + {% for tuple in object_list %} + {% include 'notes/note_list_entry.html' with note=tuple.0 note_preview=tuple.1 %} + {% endfor %} + +
Sort by: Date Popularity Name Tags Preview
{% else %}