[Patches] [PATCH] Bug 6836 follow-up: Working on CSS to make more like existing interface

koha-patchbot at kohaaloha.com koha-patchbot at kohaaloha.com
Mon Nov 21 12:45:14 NZDT 2011


From: Owen Leonard <oleonard at myacpl.org>
Date: Mon, 14 Nov 2011 08:25:48 -0500
Subject: [PATCH] Bug 6836 follow-up: Working on CSS to make more like existing interface
Content-Type: text/plain; charset="utf-8"

- Changing default styles for Datatables pager, filter, etc. to
  make it more like the style we have now on table pagers
- Adding another paging style via a plugin function in js/datatables.js
  to give us a "four_button" option (more like the old tablesorter.js
  pager).
- Tweaking configuration on serials-home.tt and adding the same to
  readingrec.tt

I don't have much serials data so I added it to readingrec.tt as well.
---
 koha-tmpl/intranet-tmpl/prog/en/css/datatables.css |  157 +++++++++++++++++++-
 koha-tmpl/intranet-tmpl/prog/en/js/datatables.js   |  101 +++++++++++++
 .../prog/en/modules/members/readingrec.tt          |   26 +--
 .../prog/en/modules/serials/serials-home.tt        |    3 +-
 4 files changed, 266 insertions(+), 21 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/css/datatables.css b/koha-tmpl/intranet-tmpl/prog/en/css/datatables.css
index e069b93..fbd919c 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/css/datatables.css
+++ b/koha-tmpl/intranet-tmpl/prog/en/css/datatables.css
@@ -3,15 +3,15 @@ input.search_init {
 }
 .sorting_asc {
     padding-right: 19px;
-    background: url("../../img/datatables/sort_asc.png") no-repeat scroll right center #EEEEEE;
+    background: url("../../img/asc.gif") no-repeat scroll right center #EEEEEE;
 }
 .sorting_desc {
     padding-right: 19px;
-    background: url("../../img/datatables/sort_desc.png") no-repeat scroll right center #EEEEEE;
+    background: url("../../img/desc.gif") no-repeat scroll right center #EEEEEE;
 }
 .sorting {
     padding-right: 19px;
-    background: url("../../img/datatables/sort_both.png") no-repeat scroll right center #EEEEEE;
+    background: url("../../img/ascdesc.gif") no-repeat scroll right center #EEEEEE;
 }
 .sorting_asc_disabled {
     padding-right: 19px;
@@ -26,6 +26,157 @@ input.search_init {
     background-color: #EEEEEE;
 }
 
+div.top {clear : both; }
+
+div.top.pager,
+div.bottom.pager {
+    background-color : #E5E5E5;
+    padding : 0;
+}
+
+div.bottom.pager div.dataTables_paginate.paging_full_numbers,
+div.bottom.pager div.dataTables_paginate.paging_four_button {
+    border-right-width : 0;
+}
+
+div.dataTables_filter,
+div.dataTables_length,
+div.dataTables_info,
+div.dataTables_paginate {
+    float: left;
+    padding : .3em .5em .3em .5em;
+
+}
+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/arrow-first.png');
+    background-repeat: no-repeat;
+    background-position : 2px center;
+    padding-left : 2em;
+}
+.paging_full_numbers span.paginate_button.previous {
+    background-image : url('../../img/arrow-back.png');
+    background-repeat: no-repeat;
+    background-position : 2px center;
+    padding-left : 2em;
+}
+.paging_full_numbers span.paginate_button.next {
+    background-image : url('../../img/arrow-next.png');
+    background-repeat: no-repeat;
+    background-position : right center;
+    padding-right : 2em;
+}
+.paging_full_numbers span.paginate_button.last {
+    background-image : url('../../img/arrow-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%;
 }
diff --git a/koha-tmpl/intranet-tmpl/prog/en/js/datatables.js b/koha-tmpl/intranet-tmpl/prog/en/js/datatables.js
index 9ae078d..62bf24b 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/js/datatables.js
+++ b/koha-tmpl/intranet-tmpl/prog/en/js/datatables.js
@@ -278,3 +278,104 @@ function replace_html_date( original_node, id, format ) {
     script.text = script_content;
     $(original_node).append( script );
 }
+$.fn.dataTableExt.oPagination.four_button = {
+    /*
+     * Function: oPagination.four_button.fnInit
+     * Purpose:  Initalise dom elements required for pagination with a list of the pages
+     * Returns:  -
+     * Inputs:   object:oSettings - dataTables settings object
+     *           node:nPaging - the DIV which contains this pagination control
+     *           function:fnCallbackDraw - draw function which must be called on update
+     */
+    "fnInit": function ( oSettings, nPaging, fnCallbackDraw )
+    {
+        nFirst = document.createElement( 'span' );
+        nPrevious = document.createElement( 'span' );
+        nNext = document.createElement( 'span' );
+        nLast = document.createElement( 'span' );
+         
+/*        nFirst.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sFirst ) );
+        nPrevious.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sPrevious ) );
+        nNext.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sNext ) );
+        nLast.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sLast ) );*/
+         
+        nFirst.className = "paginate_button first";
+        nPrevious.className = "paginate_button previous";
+        nNext.className="paginate_button next";
+        nLast.className = "paginate_button last";
+         
+        nPaging.appendChild( nFirst );
+        nPaging.appendChild( nPrevious );
+        nPaging.appendChild( nNext );
+        nPaging.appendChild( nLast );
+         
+        $(nFirst).click( function () {
+            oSettings.oApi._fnPageChange( oSettings, "first" );
+            fnCallbackDraw( oSettings );
+        } );
+         
+        $(nPrevious).click( function() {
+            oSettings.oApi._fnPageChange( oSettings, "previous" );
+            fnCallbackDraw( oSettings );
+        } );
+         
+        $(nNext).click( function() {
+            oSettings.oApi._fnPageChange( oSettings, "next" );
+            fnCallbackDraw( oSettings );
+        } );
+         
+        $(nLast).click( function() {
+            oSettings.oApi._fnPageChange( oSettings, "last" );
+            fnCallbackDraw( oSettings );
+        } );
+         
+        /* Disallow text selection */
+        $(nFirst).bind( 'selectstart', function () { return false; } );
+        $(nPrevious).bind( 'selectstart', function () { return false; } );
+        $(nNext).bind( 'selectstart', function () { return false; } );
+        $(nLast).bind( 'selectstart', function () { return false; } );
+    },
+     
+    /*
+     * Function: oPagination.four_button.fnUpdate
+     * Purpose:  Update the list of page buttons shows
+     * Returns:  -
+     * Inputs:   object:oSettings - dataTables settings object
+     *           function:fnCallbackDraw - draw function which must be called on update
+     */
+    "fnUpdate": function ( oSettings, fnCallbackDraw )
+    {
+        if ( !oSettings.aanFeatures.p )
+        {
+            return;
+        }
+         
+        /* Loop over each instance of the pager */
+        var an = oSettings.aanFeatures.p;
+        for ( var i=0, iLen=an.length ; i<iLen ; i++ )
+        {
+            var buttons = an[i].getElementsByTagName('span');
+            if ( oSettings._iDisplayStart === 0 )
+            {
+                buttons[0].className = "paginate_disabled_first";
+                buttons[1].className = "paginate_disabled_previous";
+            }
+            else
+            {
+                buttons[0].className = "paginate_enabled_first";
+                buttons[1].className = "paginate_enabled_previous";
+            }
+             
+            if ( oSettings.fnDisplayEnd() == oSettings.fnRecordsDisplay() )
+            {
+                buttons[2].className = "paginate_disabled_next";
+                buttons[3].className = "paginate_disabled_last";
+            }
+            else
+            {
+                buttons[2].className = "paginate_enabled_next";
+                buttons[3].className = "paginate_enabled_last";
+            }
+        }
+    }
+};
\ No newline at end of file
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/members/readingrec.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/members/readingrec.tt
index 7469096..ff917bb 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/members/readingrec.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/members/readingrec.tt
@@ -1,21 +1,16 @@
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Circulation History for [% firstname %] [% surname %]</title>
 [% INCLUDE 'doc-head-close.inc' %]
-<script type="text/javascript" src="[% themelang %]/lib/jquery/plugins/jquery.tablesorter.min.js"></script>
-<script type="text/javascript" src="[% themelang %]/lib/jquery/plugins/jquery.tablesorter.pager.js"></script>
+<link rel="stylesheet" type="text/css" href="/intranet-tmpl/prog/en/css/datatables.css" />
+<script type="text/javascript" src="/intranet-tmpl/prog/en/lib/jquery/plugins/jquery.dataTables.min.js"></script>
+<script type="text/javascript" src="/intranet-tmpl/prog/en/js/datatables.js"></script>
 <script type="text/javascript" id="js">$(document).ready(function() {
-	$.tablesorter.addParser({
-		id: 'articles',
-		is: function(s) {return false;  },
-		format: function(s) { return s.toLowerCase().replace(/^(the|an|a) /,''); },
-		type: 'text'
-	});
-	$.tablesorter.defaults.widgets = ['zebra'];
-	$("#table_readingrec").tablesorter({[% IF ( dateformat_metric ) %]
-		dateFormat: 'uk',[% END %]
-		sortList: [[8,1]],
-		headers: { 1: { sorter: 'articles' }, 9: { sorter: 'shortDate'} }
-	}).tablesorterPager({container: $("#pagertable_readingrec"),positionFixed: false,size: 20});
+ $(document).ready(function() {
+    $("#table_readingrec").dataTable({
+        "sPaginationType": "four_button",
+        "sDom": '<"top pager"ilpf>t<"bottom pager"ip>'
+    });
+ });
 }); </script>
 </head>
 <body>
@@ -34,9 +29,6 @@
 [% IF ( loop_reading ) %]
 <form action="/cgi-bin/koha/members/readingrec.pl" method="get"><input type="hidden" name="borrowernumber" id="borrowernumber" value="[% borrowernumber %]" /></form>
 
-<div id="pagertable_readingrec">
-[% INCLUDE 'table-pager.inc' perpage='20' %]
-</div>
 <table id="table_readingrec">
 <thead>
     <th>Date</th>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/serials/serials-home.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/serials/serials-home.tt
index 6fbf31f..100a0c7 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/serials/serials-home.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/serials/serials-home.tt
@@ -11,7 +11,8 @@
         "aoColumnDefs": [
             { "aTargets": [ -1, -2, -3 ], "bSortable": false, "bSearchable": false },
         ],
-        "sPaginationType": "full_numbers"
+        "sPaginationType": "full_numbers",
+        "sDom": '<"top pager"ilpf>t<"bottom pager"ip>'
     } ) );
 
     srlt.fnAddFilters("filter", 750);
-- 
1.7.3




More information about the Patches mailing list