From 52203a13265c9aeab91496d3407815f9a6ffda90 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Wed, 8 Aug 2012 10:38:21 -0400 Subject: [PATCH] Bug 8549 - DataTables upgrade broke display of next/previous buttons in table controls When the DataTables plugin was upgraded the DataTables CSS was not updated at the same time, causing problems in the display due to changes in how the plugin works. The DataTables upgrade added text lables to the image-only buttons in order to improve accessibility. This patch revises the CSS and the four_button pager modification to conform with the upgrade. To test, please view tables which use each of three types of pagers: default two-button (ex: circ/pendingreserves), custom four-button (ex: members/readingrec.pl) and full (ex: tools/quotes.pl). Signed-off-by: Chris Cormack --- koha-tmpl/intranet-tmpl/prog/en/css/datatables.css | 145 ++++++-------------- koha-tmpl/intranet-tmpl/prog/en/js/datatables.js | 12 +- 2 files changed, 46 insertions(+), 111 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/en/css/datatables.css b/koha-tmpl/intranet-tmpl/prog/en/css/datatables.css index a54c612..214e543 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/css/datatables.css +++ b/koha-tmpl/intranet-tmpl/prog/en/css/datatables.css @@ -64,7 +64,6 @@ div.dataTables_filter { } div.dataTables_paginate { background-color : #F4F4F4; - font-size: 110%; padding : 0; } @@ -131,7 +130,7 @@ div.dataTables_paginate.paging_four_button { background-color : transparent; border-right : 1px solid #686868; border-left : 1px solid #FFF; - line-height : 1.8em; + line-height : 2.5em; } .paginate_disabled_first, .paginate_enabled_first, @@ -141,37 +140,64 @@ div.dataTables_paginate.paging_four_button { .paginate_enabled_next, .paginate_disabled_last, .paginate_enabled_last { - float: left; - height: 16px; - margin: .5em; - width: 16px; + 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-image: url("../../img/first-disabled.png"); + background: transparent url("../../img/first-disabled.png") no-repeat 3px top; } .paginate_enabled_first { - background-image: url("../../img/first.png"); + background: transparent url("../../img/first.png") no-repeat 3px top; cursor: pointer; } .paginate_disabled_previous { - background-image: url("../../img/prev-disabled.png"); + background: transparent url("../../img/prev-disabled.png") no-repeat 3px top; } .paginate_enabled_previous { - background-image: url("../../img/prev.png"); + background: transparent url("../../img/prev.png") no-repeat 3px top; cursor: pointer; } .paginate_disabled_next { - background-image: url("../../img/next-disabled.png"); + background: transparent url("../../img/next-disabled.png") no-repeat right top; } .paginate_enabled_next { - background-image: url("../../img/next.png"); + background: transparent url("../../img/next.png") no-repeat right top; cursor: pointer; } .paginate_disabled_last { - background-image: url("../../img/last-disabled.png"); + background: transparent url("../../img/last-disabled.png") no-repeat right top; } .paginate_enabled_last { - background-image: url("../../img/last.png"); + background: transparent url("../../img/last.png") no-repeat right top; cursor: pointer; } @@ -191,10 +217,6 @@ div.dataTables_paginate.paging_four_button { width: 250px; } -input { - border-radius: 5px; -} - tr.odd.selected td { background-color: #D3D3D3; } @@ -203,90 +225,3 @@ tr.even.selected td { background-color: #D3D3D3; } -/* -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; -} - -.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; -} diff --git a/koha-tmpl/intranet-tmpl/prog/en/js/datatables.js b/koha-tmpl/intranet-tmpl/prog/en/js/datatables.js index bbb119e..b43f2f8 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/js/datatables.js +++ b/koha-tmpl/intranet-tmpl/prog/en/js/datatables.js @@ -313,10 +313,10 @@ $.fn.dataTableExt.oPagination.four_button = { nNext = document.createElement( 'span' ); nLast = document.createElement( 'span' ); -/* nFirst.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sFirst ) ); + 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 ) );*/ + nLast.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sLast ) ); nFirst.className = "paginate_button first"; nPrevious.className = "paginate_button previous"; @@ -376,24 +376,24 @@ $.fn.dataTableExt.oPagination.four_button = { var buttons = an[i].getElementsByTagName('span'); if ( oSettings._iDisplayStart === 0 ) { - buttons[0].className = "paginate_disabled_first"; + buttons[0].className = "paginate_disabled_previous"; buttons[1].className = "paginate_disabled_previous"; } else { - buttons[0].className = "paginate_enabled_first"; + buttons[0].className = "paginate_enabled_previous"; buttons[1].className = "paginate_enabled_previous"; } if ( oSettings.fnDisplayEnd() == oSettings.fnRecordsDisplay() ) { buttons[2].className = "paginate_disabled_next"; - buttons[3].className = "paginate_disabled_last"; + buttons[3].className = "paginate_disabled_next"; } else { buttons[2].className = "paginate_enabled_next"; - buttons[3].className = "paginate_enabled_last"; + buttons[3].className = "paginate_enabled_next"; } } } -- 1.7.9.5