[Koha-patches] [PATCH] Bug 8549 - DataTables upgrade broke display of next/previous buttons in table controls
Owen Leonard
oleonard at myacpl.org
Wed Aug 8 20:20:57 CEST 2012
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).
---
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
More information about the Koha-patches
mailing list