[Koha-patches] [PATCH 2/4] Bug 6836: followup CSS work
Julian Maurice
julian.maurice at biblibre.com
Fri Dec 2 12:40:08 CET 2011
From: Owen Leonard <oleonard at myacpl.org>
---
koha-tmpl/intranet-tmpl/prog/en/css/datatables.css | 157 +++++++++++++++++++-
koha-tmpl/intranet-tmpl/prog/en/js/datatables.js | 105 +++++++++++++-
koha-tmpl/opac-tmpl/prog/en/css/datatables.css | 157 +++++++++++++++++++-
koha-tmpl/opac-tmpl/prog/en/js/datatables.js | 105 +++++++++++++-
4 files changed, 516 insertions(+), 8 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..e7b11bd 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/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%;
}
diff --git a/koha-tmpl/intranet-tmpl/prog/en/js/datatables.js b/koha-tmpl/intranet-tmpl/prog/en/js/datatables.js
index 38dd1d5..e0cc888 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/js/datatables.js
+++ b/koha-tmpl/intranet-tmpl/prog/en/js/datatables.js
@@ -22,7 +22,8 @@ var dataTablesDefaults = {
"sProcessing" : window.MSG_DT_PROCESSING || "Processing...",
"sSearch" : window.MSG_DT_SEARCH || "Search:",
"sZeroRecords" : window.MSG_DT_ZERO_RECORDS || "No matching records found"
- }
+ },
+ "sDom": '<"top pager"ilpf>t<"bottom pager"ip>'
};
@@ -279,3 +280,105 @@ 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";
+ }
+ }
+ }
+};
diff --git a/koha-tmpl/opac-tmpl/prog/en/css/datatables.css b/koha-tmpl/opac-tmpl/prog/en/css/datatables.css
index e069b93..e7b11bd 100644
--- a/koha-tmpl/opac-tmpl/prog/en/css/datatables.css
+++ b/koha-tmpl/opac-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/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%;
}
diff --git a/koha-tmpl/opac-tmpl/prog/en/js/datatables.js b/koha-tmpl/opac-tmpl/prog/en/js/datatables.js
index 38dd1d5..e0cc888 100644
--- a/koha-tmpl/opac-tmpl/prog/en/js/datatables.js
+++ b/koha-tmpl/opac-tmpl/prog/en/js/datatables.js
@@ -22,7 +22,8 @@ var dataTablesDefaults = {
"sProcessing" : window.MSG_DT_PROCESSING || "Processing...",
"sSearch" : window.MSG_DT_SEARCH || "Search:",
"sZeroRecords" : window.MSG_DT_ZERO_RECORDS || "No matching records found"
- }
+ },
+ "sDom": '<"top pager"ilpf>t<"bottom pager"ip>'
};
@@ -279,3 +280,105 @@ 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";
+ }
+ }
+ }
+};
--
1.7.7.3
More information about the Koha-patches
mailing list