[Koha-patches] [PATCH] Bug 6836 follow-up: Working on CSS to make more like existing interface
Owen Leonard
oleonard at myacpl.org
Fri Nov 18 18:28:21 CET 2011
- 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 Koha-patches
mailing list