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

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

Bug-10632-Follow-up-Enable-datatables-for-courses-.patch (text/plain), 13.20 KB, created by Jonathan Druart on 2014-10-11 15:32:42 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Jonathan Druart

Created: 2014-10-11 15:32:42 UTC

Size: 13.20 KB

patch

obsolete

>From fb17089c12e14bf64f8ce863fb109f2001021c1d Mon Sep 17 00:00:00 2001
>From: Owen Leonard <oleonard@myacpl.org>
>Date: Fri, 10 Oct 2014 07:56:11 -0400
>Subject: [PATCH] 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>
>---
> koha-tmpl/opac-tmpl/bootstrap/css/datatables.css   | 267 ++-------------------
> .../bootstrap/en/modules/opac-course-details.tt    |  16 +-
> .../bootstrap/en/modules/opac-course-reserves.tt   |   4 +-
> 3 files changed, 27 insertions(+), 260 deletions(-)
>
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/datatables.css b/koha-tmpl/opac-tmpl/bootstrap/css/datatables.css
>index e7b11bd..e74fa58 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/css/datatables.css
>+++ b/koha-tmpl/opac-tmpl/bootstrap/css/datatables.css
>@@ -1,265 +1,28 @@
>-input.search_init {
>-    color: #999999;
>-}
>-.sorting_asc {
>-    padding-right: 19px;
>-    background: url("../../img/asc.gif") no-repeat scroll right center #EEEEEE;
>-}
>-.sorting_desc {
>-    padding-right: 19px;
>-    background: url("../../img/desc.gif") no-repeat scroll right center #EEEEEE;
>-}
>-.sorting {
>-    padding-right: 19px;
>-    background: url("../../img/ascdesc.gif") no-repeat scroll right center #EEEEEE;
>+.dataTables_filter label {
>+    font-size: 12px;
> }
>-.sorting_asc_disabled {
>-    padding-right: 19px;
>-    background: url("../../img/datatables/sort_asc_disabled.png") no-repeat scroll right center #EEEEEE;
>-}
>-.sorting_desc_disabled {
>-    padding-right: 19px;
>-    background: url("../../img/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;
>-    font-size: 110%;
>-    padding : 0;
>-}
>-
>-.paging_full_numbers span.paginate_button,
>-.paging_full_numbers span.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 span.paginate_button {
>-    color : #0000CC;
>-}
>-.paging_full_numbers span.paginate_button.first {
>-    background-image : url('../../img/first.png');
>-    background-repeat: no-repeat;
>-    background-position : 2px center;
>-    padding-left : 2em;
>-}
>-.paging_full_numbers span.paginate_button.previous {
>-    background-image : url('../../img/prev.png');
>-    background-repeat: no-repeat;
>-    background-position : 2px center;
>-    padding-left : 2em;
>-}
>-.paging_full_numbers span.paginate_button.next {
>-    background-image : url('../../img/next.png');
>-    background-repeat: no-repeat;
>-    background-position : right center;
>-    padding-right : 2em;
>-}
>-.paging_full_numbers span.paginate_button.last {
>-    background-image : url('../../img/last.png');
>-    background-repeat: no-repeat;
>-    background-position : right center;
>-    border-right : 1px solid #686868;
>-    padding-right : 2em;
>-}
>-div.bottom.pager .paging_full_numbers span.paginate_button.last {
>-    border-right-width : 0;
>-}
>-.paging_full_numbers span.paginate_active {
>-    background-color : #FFFFEA;
>-    color : #000;
>-    font-weight: bold;
>-}
>-
>-.paging_full_numbers span.paginate_button:hover {
>-    background-color: #FFC;
>-}
>-
>-.paging_full_numbers span.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;
>-    border-left : 1px solid #FFF;
>-    line-height : 1.8em;
>-}
>-.paginate_disabled_first,
>-.paginate_enabled_first,
>-.paginate_disabled_previous,
>-.paginate_enabled_previous,
>-.paginate_disabled_next,
>-.paginate_enabled_next,
>-.paginate_disabled_last,
>-.paginate_enabled_last {
>-    float: left;
>-    height: 16px;
>-    margin: .5em;
>-    width: 16px;
>-}
>-.paginate_disabled_first {
>-    background-image: url("../../img/first-disabled.png");
>-}
>-.paginate_enabled_first {
>-    background-image: url("../../img/first.png");
>-    cursor: pointer;
>-}
>-.paginate_disabled_previous {
>-    background-image: url("../../img/prev-disabled.png");
>-}
>-.paginate_enabled_previous {
>-    background-image: url("../../img/prev.png");
>-    cursor: pointer;
>-}
>-.paginate_disabled_next {
>-    background-image: url("../../img/next-disabled.png");
>-}
>-.paginate_enabled_next {
>-    background-image: url("../../img/next.png");
>-    cursor: pointer;
>-}
>-.paginate_disabled_last {
>-    background-image: url("../../img/last-disabled.png");
>-}
>-.paginate_enabled_last {
>-    background-image: url("../../img/last.png");
>-    cursor: pointer;
>-}
>-
>-
>-/*
>-table.display {
>-    width: 100%;
>-}
>-table.display thead th {
>-    border-bottom: 1px solid black;
>-    cursor: pointer;
>-    font-weight: bold;
>-    padding: 3px 18px 3px 10px;
>-}
>-.dataTables_wrapper {
>-    clear: both;
>-    position: relative;
>-}
>-.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;
>-}
>-.dataTables_info {
>     float: left;
>-    width: 60%;
>-}
>-.dataTables_paginate {
>-    float: right;
>-    text-align: right;
>-    width: 44px;
>-}
>-.paging_full_numbers {
>-    height: 22px;
>-    line-height: 22px;
>-    width: 400px;
>-}
>-.paging_full_numbers span.paginate_button,
>-     .paging_full_numbers span.paginate_active {
>-    border: 1px solid #aaa;
>-    -webkit-border-radius: 5px;
>-    -moz-border-radius: 5px;
>-    padding: 2px 5px;
>-    margin: 0 3px;
>-    cursor: pointer;
>-    *cursor: hand;
>-}
>+    padding : .3em 0 0 0;
>+    margin : 0;
> 
>-.paging_full_numbers span.paginate_button {
>-    background-color: #ddd;
> }
> 
>-.paging_full_numbers span.paginate_button:hover {
>-    background-color: #ccc;
>-}
>-
>-.paging_full_numbers span.paginate_active {
>-    background-color: #99B3FF;
>-}
>-.paginate_disabled_previous, .paginate_enabled_previous, .paginate_disabled_next, .paginate_enabled_next {
>-    float: left;
>-    height: 19px;
>-    margin-left: 3px;
>-    width: 19px;
>-}
>-.paginate_disabled_previous {
>-    background-image: url("../../img/datatables/back_disabled.jpg");
>-}
>-.paginate_enabled_previous {
>-    background-image: url("../../img/datatables/back_enabled.jpg");
>-}
>-.paginate_disabled_next {
>-    background-image: url("../../img/datatables/forward_disabled.jpg");
>-}
>-.paginate_enabled_next {
>-    background-image: url("../../img/datatables/forward_enabled.jpg");
>-}
>-.spacer {
>-    clear: both;
>-    height: 20px;
>+div.dataTables_length,
>+div.dataTables_filter {
>+    border-left : 1px solid #FFF;
> }
>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
>--- 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 &rsaquo; 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
>--- 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 &rsaquo; 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>
>-- 
>2.1.0

Actions: View | Diff | Splinter Review

Attachments on bug 10632: 19876 | 32103 | 32131 | 32132 | 32134 | 32250 | 32251 | 33465