fdc06dec2a
Add column visibility menu using DataTables Buttons Add a text filter on top of each column Also extend page width so that the large table is better centered Depends on bug 15285 Test plan 1. Go to Holds queue page (circ/view_holdsqueue.pl) 2. Check that table sorting and filtering work well and that you can hide each column 3. Go to Admin > Configure columns and change the settings for this table (Circulation > view_holdsqueue > holds-table). Verify that the settings work by going again to the Holds queue page 4. Check that filters continue to work after hiding some columns Tested on top of 15285, works as expected. Signed-off-by: Marc Véron <veron@veron.ch> Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com> Signed-off-by: Brendan Gallagher brendan@bywatersolutions.com
265 lines
6.4 KiB
CSS
265 lines
6.4 KiB
CSS
input.search_init {
|
|
color: #999999;
|
|
}
|
|
.sorting_asc {
|
|
padding-right: 19px;
|
|
background: url("../../img/asc.gif") no-repeat scroll right center #EEEEEE;
|
|
}
|
|
.sorting_desc {
|
|
padding-right: 19px;
|
|
background: url("../../img/desc.gif") no-repeat scroll right center #EEEEEE;
|
|
}
|
|
.sorting {
|
|
padding-right: 19px;
|
|
background: url("../../img/ascdesc.gif") no-repeat scroll right center #EEEEEE;
|
|
}
|
|
.sorting_asc_disabled {
|
|
padding-right: 19px;
|
|
background: url("../../img/datatables/sort_asc_disabled.png") no-repeat scroll right center #EEEEEE;
|
|
}
|
|
.sorting_desc_disabled {
|
|
padding-right: 19px;
|
|
background: url("../../img/datatables/sort_desc_disabled.png") no-repeat scroll right center #EEEEEE;
|
|
}
|
|
.sorting_disabled {
|
|
padding-right: 19px;
|
|
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;
|
|
border-right : 1px solid #AAAAAA;
|
|
}
|
|
div.dataTables_filter {
|
|
line-height : 1.9em;
|
|
}
|
|
div.dataTables_paginate {
|
|
padding : 0;
|
|
}
|
|
|
|
.paging_full_numbers a.paginate_button,
|
|
.paging_full_numbers a.paginate_active,
|
|
.paging_full_numbers > span > span {
|
|
border-right : 1px solid #AAA;
|
|
border-left : 1px solid #FFF;
|
|
display : block;
|
|
float : left;
|
|
line-height:1.9em;
|
|
padding : 0.4em 0.7em;
|
|
}
|
|
.paging_full_numbers a.paginate_button,
|
|
.paging_full_numbers a.paginate_active {
|
|
cursor: pointer;
|
|
}
|
|
.paging_full_numbers a.paginate_button,
|
|
.paging_full_numbers > span > span {
|
|
background-color : #FFF;
|
|
background-repeat: no-repeat;
|
|
color : #0000CC;
|
|
}
|
|
.paging_full_numbers a.paginate_button.first {
|
|
background-color: transparent;
|
|
background-image : url('../../img/first.png');
|
|
background-position : 3px center;
|
|
padding-left : 23px;
|
|
}
|
|
.paging_full_numbers a.paginate_button.previous {
|
|
background-color: transparent;
|
|
background-image : url('../../img/prev.png');
|
|
background-position : 3px center;
|
|
padding-left : 23px;
|
|
}
|
|
.paging_full_numbers a.paginate_button.next {
|
|
background-color: transparent;
|
|
background-image : url('../../img/next.png');
|
|
background-position : 93% center;
|
|
padding-right : 25px;
|
|
}
|
|
.paging_full_numbers a.paginate_button.last {
|
|
background-color: transparent;
|
|
background-image : url('../../img/last.png');
|
|
background-position : 93% center;
|
|
border-right : 0;
|
|
padding-right : 25px;
|
|
}
|
|
div.bottom.pager .paging_full_numbers a.paginate_button.last {
|
|
border-right-width : 0;
|
|
}
|
|
|
|
div.bottom.pager div:first-child {
|
|
border-left : 0;
|
|
}
|
|
|
|
.paging_full_numbers a.paginate_active {
|
|
background-color : #FFFFEA;
|
|
color : #000;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.paging_full_numbers a.paginate_button:hover {
|
|
background-color: #FFC;
|
|
}
|
|
|
|
.paging_full_numbers a.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 : 2.5em;
|
|
}
|
|
.paginate_disabled_first,
|
|
.paginate_enabled_first,
|
|
.paginate_disabled_previous,
|
|
.paginate_enabled_previous,
|
|
.paginate_disabled_next,
|
|
.paginate_enabled_next,
|
|
.paginate_disabled_last,
|
|
.paginate_enabled_last {
|
|
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: transparent url("../../img/first-disabled.png") no-repeat 3px top;
|
|
}
|
|
.paginate_enabled_first {
|
|
background: transparent url("../../img/first.png") no-repeat 3px top;
|
|
cursor: pointer;
|
|
}
|
|
.paginate_disabled_previous {
|
|
background: transparent url("../../img/prev-disabled.png") no-repeat 3px top;
|
|
}
|
|
.paginate_enabled_previous {
|
|
background: transparent url("../../img/prev.png") no-repeat 3px top;
|
|
cursor: pointer;
|
|
}
|
|
.paginate_disabled_next {
|
|
background: transparent url("../../img/next-disabled.png") no-repeat right top;
|
|
}
|
|
.paginate_enabled_next {
|
|
background: transparent url("../../img/next.png") no-repeat right top;
|
|
cursor: pointer;
|
|
}
|
|
.paginate_disabled_last {
|
|
background: transparent url("../../img/last-disabled.png") no-repeat right top;
|
|
}
|
|
.paginate_enabled_last {
|
|
background: transparent url("../../img/last.png") no-repeat right top;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dataTables_processing {
|
|
background-color: white;
|
|
border: 1px solid #999;
|
|
-webkit-box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.2);
|
|
box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.2);
|
|
color: #333;
|
|
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;
|
|
}
|
|
|
|
tr.odd.selected td {
|
|
background-color: #D3D3D3;
|
|
}
|
|
|
|
tr.even.selected td {
|
|
background-color: #D3D3D3;
|
|
}
|
|
|
|
/* ColumnFilter */
|
|
span.filter_column > input[type="text"] {
|
|
font-size: 80%;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Row grouping */
|
|
td.group,
|
|
table.group td.group {
|
|
background-color: #D1CFD0;
|
|
border-bottom: 2px solid #A19B9E;
|
|
border-top: 2px solid #A19B9E;
|
|
}
|
|
|
|
table.group tr.odd td {
|
|
background-color : #F3F3F3;
|
|
border : 1px solid #BCBCBC;
|
|
border-right : 1px solid #BCBCBC;
|
|
}
|
|
|
|
table.group tr.even td {
|
|
background-color: #FFF;
|
|
border-right : 1px solid #BCBCBC;
|
|
}
|