From 5434882791d7e70f402aedcb4a74eb20496933a4 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 Signed-off-by: Paul Poulain --- .../intranet-tmpl/prog/en/css/datatables.css | 145 +++++------------- .../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 a54c6126a2..214e543c96 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 bbb119ecd5..b43f2f8c17 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"; } } } -- 2.39.5