Bug 10632 [Follow-up] Enable datatables for courses and course details in the OPAC

This follow-up adds some style improvements and corrects some errors in
the previous patch:

- The path to datatables.css has been corrected
- Unused CSS has been removed from datatables.css (particularly related
  to pagination controls, which are currently unused in the OPAC).
- Style has been added to datatables.css to make the table search form
  look better.
- The configuration of the course details table has been enhanced to
  include a title sort which ignores articles and date sorting according
  to the "title-string" method for date format agnostic sorting.
- Unrelated: A message <div> has been modified to have the correct style
  for the Bootstrap theme.

To test you should have multiple courses and at least one course with
multiple reserves. Clear your browser cache if necessary and view the
list of courses in the OPAC. All table sorting should work correctly, as
should the table search form.

View the details of a course which has multiple reserves. All sorting
should work correctly, including title sort excluding articles. Sorting
by date due should work correctly for any dateformat system preference
setting.

View the details of a course which has no reserves. You should see a "No
reserves" message box with a style consistent with similar messages in
the Bootstrap OPAC.

View other sorted tables in the OPAC to confirm that the CSS changes
have not negatively affected their appearance: opac-user.pl for
instance, or opac-detail.pl.

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Signed-off-by: Jonathan Druart <jonathan.druart@biblibre.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@gmail.com>

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/datatables.css b/koha-tmpl/opac-tmpl/bootstrap/css/datatables.css
index 5669543..e74fa58 100644 (file)
--- a/koha-tmpl/opac-tmpl/bootstrap/css/datatables.css
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/datatables.css
@@ -1,259 +1,28 @@
-input.search_init {
-    color: #999999;
-}
-.sorting_asc {
-    padding-right: 19px;
-    background: url("../../images/asc.gif") no-repeat scroll right center #EEEEEE;
-}
-.sorting_desc {
-    padding-right: 19px;
-    background: url("../../images/desc.gif") no-repeat scroll right center #EEEEEE;
-}
-.sorting {
-    padding-right: 19px;
-    background: url("../../images/ascdesc.gif") no-repeat scroll right center #EEEEEE;
+.dataTables_filter label {
+    font-size: 12px;
 }
-.sorting_asc_disabled {
-    padding-right: 19px;
-    background: url("../../images/datatables/sort_asc_disabled.png") no-repeat scroll right center #EEEEEE;
-}
-.sorting_desc_disabled {
-    padding-right: 19px;
-    background: url("../../images/datatables/sort_desc_disabled.png") no-repeat scroll right center #EEEEEE;
-}
-.sorting_disabled {
-    padding-right: 19px;
-    background-color: #EEEEEE;
-}
-
-div.top {clear : both; }
 
-div.top.pager,
-div.bottom.pager {
-    background-color : #E5E5E5;
-    padding : 0;
+.dataTables_filter input {
+    font-size : 12px;
+    height : auto;
+    margin : 0;
+    padding: 0 4px;
 }
 
-div.bottom.pager div.dataTables_paginate.paging_full_numbers,
-div.bottom.pager div.dataTables_paginate.paging_four_button {
-    border-right-width : 0;
+input.search_init {
+    color: #999999;
 }
 
-div.dataTables_filter,
-div.dataTables_length,
-div.dataTables_info,
-div.dataTables_paginate {
-    float: left;
-    padding : .3em .5em .3em .5em;
+div.top {clear : both; }
 
-}
-div.dataTables_length {
-    border-right : 1px solid #686868;
-    line-height:1.9em;
-}
-div.dataTables_info {
-    border-right : 1px solid #AAA;
-    line-height:1.9em;
-}
-div.dataTables_length,
 div.dataTables_filter {
-    border-left : 1px solid #FFF;
-}
-div.dataTables_filter {
-    line-height : 1.9em;
-}
-div.dataTables_paginate {
-    background-color : #F4F4F4;
-    padding : 0;
-}
-
-.paging_full_numbers a.paginate_button,
-.paging_full_numbers a.paginate_active {
-    border-right : 1px solid #AAA;
-    border-left : 1px solid #FFF;
-    display : block;
-    float : left;
-    line-height:1.6em;
-    padding: .3em .7em;
-    cursor: pointer;
-}
-
-.paging_full_numbers a.paginate_button {
-    color : #0000CC;
-}
-.paging_full_numbers a.paginate_button.first {
-    background-image : url('../../images/first.png');
-    background-repeat: no-repeat;
-    background-position : 1% center;
-    padding-left : 2em;
-}
-.paging_full_numbers a.paginate_button.previous {
-    background-image : url('../../images/prev.png');
-    background-repeat: no-repeat;
-    background-position : 1% center;
-    padding-left : 2em;
-}
-.paging_full_numbers a.paginate_button.next {
-    background-image : url('../../images/next.png');
-    background-repeat: no-repeat;
-    background-position : 96% center;
-    padding-right : 2em;
-}
-.paging_full_numbers a.paginate_button.last {
-    background-image : url('../../images/last.png');
-    background-repeat: no-repeat;
-    background-position : 96% center;
-    border-right : 1px solid #686868;
-    padding-right : 2em;
-}
-div.bottom.pager .paging_full_numbers a.paginate_button.last {
-    border-right-width : 0;
-}
-.paging_full_numbers a.paginate_active {
-    background-color : #FFFFEA;
-    color : #000;
-    font-weight: bold;
-}
-
-.paging_full_numbers a.paginate_button:hover {
-    background-color: #FFC;
-}
+    float: left;
+    padding : .3em 0 0 0;
+    margin : 0;
 
-.paging_full_numbers a.paginate_button.paginate_button_disabled {
-    color : #666;
 }
 
-/* Two-button version */
-
-div.dataTables_paginate.paging_two_button,
-div.dataTables_paginate.paging_four_button {
-    background-color : transparent;
-    border-right : 1px solid #686868;
+div.dataTables_length,
+div.dataTables_filter {
     border-left : 1px solid #FFF;
-    line-height : 2.5em;
-}
-.paginate_disabled_first,
-.paginate_enabled_first,
-.paginate_disabled_previous,
-.paginate_enabled_previous,
-.paginate_disabled_next,
-.paginate_enabled_next,
-.paginate_disabled_last,
-.paginate_enabled_last {
-    cursor: pointer;
-    *cursor: hand;
-    padding: .1em 0;
-}
-
-.paginate_disabled_previous,
-.paginate_enabled_previous,
-.paginate_disabled_next,
-.paginate_enabled_next {
-    color: #111 !important;
-}
-
-.paginate_disabled_previous,
-.paginate_enabled_previous {
-    padding-left: 23px;
-}
-.paginate_disabled_next,
-.paginate_enabled_next,
-.paginate_disabled_last,
-.paginate_enabled_last {
-    padding-right: 23px;
-    margin-left: 10px;
-    margin-right : .3em;
-}
-
-.paging_four_button .paginate_disabled_first,
-.paging_four_button .paginate_disabled_previous,
-.paging_four_button .paginate_enabled_first,
-.paging_four_button .paginate_enabled_previous  {
-    margin-left : .3em;
-}
-
-.paginate_disabled_first {
-    background: transparent url("../../images/first-disabled.png") no-repeat 3px top;
-}
-.paginate_enabled_first {
-    background: transparent url("../../images/first.png") no-repeat 3px top;
-    cursor: pointer;
-}
-.paginate_disabled_previous {
-    background: transparent url("../../images/prev-disabled.png") no-repeat 3px top;
-}
-.paginate_enabled_previous {
-    background: transparent url("../../images/prev.png") no-repeat 3px top;
-    cursor: pointer;
-}
-.paginate_disabled_next {
-    background: transparent url("../../images/next-disabled.png") no-repeat right top;
-}
-.paginate_enabled_next {
-    background: transparent url("../../images/next.png") no-repeat right top;
-    cursor: pointer;
-}
-.paginate_disabled_last {
-    background: transparent url("../../images/last-disabled.png") no-repeat right top;
-}
-.paginate_enabled_last {
-    background: transparent url("../../images/last.png") no-repeat right top;
-    cursor: pointer;
-}
-
-.dataTables_processing {
-    background-color: white;
-    border: 1px solid #DDDDDD;
-    color: #999999;
-    font-size: 14px;
-    height: 30px;
-    left: 50%;
-    margin-left: -125px;
-    margin-top: -15px;
-    padding: 14px 0 2px;
-    position: fixed;
-    text-align: center;
-    top: 50%;
-    width: 250px;
-}
-
-tr.odd.selected td {
-    background-color: #D3D3D3;
-}
-
-tr.even.selected td {
-    background-color: #D3D3D3;
-}
-
-/* ColumnFilter */
-span.filter_column > input.text_filter {
-    font-size: 80%;
-    width: 100%;
-}
-
-div.pager {
-    background-color : #E8E8E8;
-    border : 1px solid #BCBCBC;
-    -moz-border-radius : 5px;
-    border-radius : 5px;
-    display : inline-block;
-    font-size : 85%;
-    padding : .3em .5em .3em .5em;
-    margin : .4em 0;
-}
-div.pager img {
-    vertical-align : middle;
-}
-
-div.pager img.last {
-    padding-right: 5px;
-}
-div.pager input.pagedisplay {
-    border : 0;
-    background-color : transparent;
-    font-weight: bold;
-    text-align : center;
-}
-div.pager p {
-    margin: 0;
 }

diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-details.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-details.tt
index 6608394..a313598 100644 (file)
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-details.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-details.tt
@@ -7,7 +7,7 @@
 [% IF ( LibraryNameTitle ) %][% LibraryNameTitle %][% ELSE %]Koha online[% END %] catalog › Course reserves for [% course.course_name %]
 [% INCLUDE 'doc-head-close.inc' %]
 [% BLOCK cssinclude %]
-    <link rel="stylesheet" type="text/css" href="[% themelang %]/css/datatables.css" />
+    <link rel="stylesheet" type="text/css" href="[% interface %]/[% theme %]/css/datatables.css" />
 [% END %]
 
 </head>
@@ -49,14 +49,14 @@
                     <table id="course-items-table" class="table table-bordered table-striped table-condensed">
                         <thead>
                             <tr>
-                                <th>Title</th>
+                                <th class="anti-the">Title</th>
                                 <th>Item type</th>
                                 <th>Location</th>
                                 <th>Collection</th>
                                 <th>Call number</th>
                                 <th>Copy number</th>
                                 <th>Status</th>
-                                <th>Date due</th>
+                                <th class="title-string">Date due</th>
                                 <th>Notes</th>
                             </tr>
                         </thead>
@@ -71,7 +71,7 @@
                                     <td>[% cr.item.itemcallnumber %]</td>
                                     <td>[% cr.item.copynumber %]</td>
                                     <td>[% INCLUDE 'item-status.inc' item=cr.item issue=cr.issue %]</td>
-                                    <td>[% cr.issue.date_due | $KohaDates as_due_date => 1 %]</td>
+                                    <td><span title="[% cr.issue.date_due %]">[% cr.issue.date_due | $KohaDates as_due_date => 1 %]</span></td>
                                     <td>[% cr.public_note %]</td>
                                 </tr>
                             [% END %]
@@ -79,7 +79,7 @@
                     </table>
                 [% ELSE %]
                     <br style="clear:both;" />
-                    <div class="dialog message">
+                    <div class="alert alert-info">
                         <p>No reserves have been selected for this course.</p>
                     </div>
                 [% END %]
@@ -93,7 +93,11 @@
     <script type="text/javascript">
     $(document).ready(function() {
         $("#course-items-table").dataTable($.extend(true, {}, dataTablesDefaults, {
-            "sDom": '<"bottom"flp>rt<"clear">',
+            "sDom": '<"top"flp>rt<"clear">',
+            "aoColumnDefs": [
+                { "sType": "anti-the", "aTargets" : [ "anti-the" ] },
+                { "sType": "title-string", "aTargets" : [ "title-string" ] }
+            ]
         }));
     });
     </script>

diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-reserves.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-reserves.tt
index 0fe898c..db33aac 100644 (file)
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-reserves.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-reserves.tt
@@ -5,7 +5,7 @@
 [% IF ( LibraryNameTitle ) %][% LibraryNameTitle %][% ELSE %]Koha online[% END %] catalog › Courses
 [% INCLUDE 'doc-head-close.inc' %]
 [% BLOCK cssinclude %]
-    <link rel="stylesheet" type="text/css" href="[% themelang %]/css/datatables.css" />
+    <link rel="stylesheet" type="text/css" href="[% interface %]/[% theme %]/css/datatables.css" />
 [% END %]
 
 </head>
@@ -64,7 +64,7 @@
     <script type="text/javascript">
     $(document).ready(function() {
         $("#course_reserves_table").dataTable($.extend(true, {}, dataTablesDefaults, {
-            "sDom": '<"bottom"flp>rt<"clear">',
+            "sDom": '<"top"flp>rt<"clear">',
         }));
     });
     </script>