Bug 32341: (follow-up) Making the remains OPAC tables responsive
Apply the patch and check for the responsivity of the following tables 1- Go to the OPAC 2- Open mobile mode 3- The following tables are not responsive - Summary - Clubs - Summary - Recalls - Summary - Article requests - Charges - (relative's) - Search history - Authority - Checkout history - All - Checkout history - Checkouts - Checkout history - On-site - Recalls history - Messaging - Subscription (serial) - Course reserves - Courses - Course reserves - Reserves - Authority search results 4- Apply the patch 5- Execute 'yarn build --view opac' 6- Clean your cache or open your navigator on private mode (to load updated css files) 7- Perform previous step (1-3) 8- Confirm that the tables are now displayed correctly and is now responsive. Signed-off-by: David Cook <dcook@prosentient.com.au> Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com> Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io> (cherry picked from commit6caeb1f627
) Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com> (cherry picked from commitd39115e5fd
) Signed-off-by: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com>
This commit is contained in:
parent
5f48c84df4
commit
e8a8c9cf8e
13 changed files with 153 additions and 39 deletions
|
@ -257,11 +257,11 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
#finestable tfoot tr {
|
||||
table.finestable tfoot tr {
|
||||
display: flex !important;
|
||||
width: max-content;
|
||||
}
|
||||
#finestable tfoot td, #finestable tfoot th {
|
||||
table.finestable tfoot td, table.finestable tfoot th {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
[% PROCESS 'accounts.inc' %]
|
||||
<form method="post" action="opac-account-pay.pl" class="form-horizontal">
|
||||
[% IF ( ACCOUNT_LINES ) %]
|
||||
<table class="table table-bordered table-striped" id="finestable">
|
||||
<table class="table table-bordered table-striped finestable" id="finestable">
|
||||
<caption class="sr-only">Your charges</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
|
@ -88,7 +88,7 @@
|
|||
[% FOREACH r IN relatives %]
|
||||
<h3 id="g[% r.patron.id | html %]">[% r.patron.firstname | html %] [% r.patron.surname | html %]'s fines and charges</h3>
|
||||
|
||||
<table class="table table-bordered table-striped" id="finestable-[% r.id | html %]">
|
||||
<table class="table table-bordered table-striped finestable" id="finestable-[% r.id | html %]">
|
||||
<thead>
|
||||
<tr>
|
||||
[% IF ENABLE_OPAC_PAYMENTS %]<th> </th>[% END %]
|
||||
|
|
|
@ -12,6 +12,7 @@
|
|||
<th>Description</th>
|
||||
<th>Date enrolled</th>
|
||||
<th> </th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
|
@ -30,6 +31,7 @@
|
|||
Contact your library to be disenrolled from this club.
|
||||
[% END %]
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
[% END %]
|
||||
</tbody>
|
||||
|
@ -46,6 +48,7 @@
|
|||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th> </th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
|
@ -63,6 +66,7 @@
|
|||
<span class="hint">You must have an email address to enroll</span>
|
||||
[% END %]
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
[% END %]
|
||||
</tbody>
|
||||
|
@ -98,4 +102,19 @@ function cancelEnrollment( id ) {
|
|||
});
|
||||
return false;
|
||||
}
|
||||
var Tables = $("#clubs-table-enrolled,#clubs-table-unenrolled");
|
||||
Tables.each(function(){
|
||||
$(this).dataTable($.extend(true, {}, dataTablesDefaults, {
|
||||
"searching": false,
|
||||
"paging": false,
|
||||
"info": false,
|
||||
"autoWidth": false,
|
||||
"responsive": {
|
||||
"details": { "type": 'column',"target": -1 }
|
||||
},
|
||||
"columnDefs": [
|
||||
{ "className": 'dtr-control', "orderable": false, "targets": -1 }
|
||||
],
|
||||
}));
|
||||
});
|
||||
</script>
|
||||
|
|
|
@ -99,6 +99,10 @@ $( document ).ready(function() {
|
|||
"responsive": true,
|
||||
} ));
|
||||
|
||||
$('table[id^="finestable-"]').dataTable($.extend(true, {}, dataTablesDefaults, {
|
||||
"responsive": true
|
||||
} ));
|
||||
|
||||
$("#filter_p").html('<p><a href="#" id="filter_paid"><i class="fa fa-filter" aria-hidden="true"></i> '+txtActivefilter+'</a>');
|
||||
$('#filter_paid').click(function(e) {
|
||||
e.preventDefault();
|
||||
|
|
|
@ -96,11 +96,13 @@
|
|||
<caption class="sr-only">Authority search results</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">Authorized headings</th>
|
||||
<th>Authorized headings</th>
|
||||
<th></th>
|
||||
<th>Type of heading</th>
|
||||
[% UNLESS ( isEDITORS ) %]
|
||||
<th>Records</th>
|
||||
[% END %]
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
@ -124,6 +126,7 @@
|
|||
[% END %]
|
||||
</td>
|
||||
[% END %]
|
||||
<td></td>
|
||||
</tr>
|
||||
[% END %]
|
||||
</tbody>
|
||||
|
@ -140,4 +143,22 @@
|
|||
</div> <!-- / .main -->
|
||||
|
||||
[% INCLUDE 'opac-bottom.inc' %]
|
||||
[% BLOCK jsinclude %][% END %]
|
||||
[% BLOCK jsinclude %]
|
||||
[% INCLUDE 'datatables.inc' %]
|
||||
<script type="text/JavaScript">
|
||||
$(document).ready(function(){
|
||||
$('.table').dataTable($.extend(true, {}, dataTablesDefaults, {
|
||||
"searching": false,
|
||||
"paging": false,
|
||||
"info": false,
|
||||
"autoWidth": false,
|
||||
"responsive": {
|
||||
"details": { "type": 'column',"target": -1 }
|
||||
},
|
||||
"columnDefs": [
|
||||
{ "className": 'dtr-control', "orderable": false, "targets": -1 }
|
||||
],
|
||||
}));
|
||||
});
|
||||
</script>
|
||||
[% END %]
|
||||
|
|
|
@ -74,6 +74,7 @@
|
|||
<th>Date due</th>
|
||||
<th>Notes</th>
|
||||
<th>Link</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
|
@ -105,6 +106,7 @@
|
|||
<a href="[% cr.biblioitem.url | url %]">Record URL</a>
|
||||
[% END %]
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
[% END %]
|
||||
</tbody>
|
||||
|
@ -134,7 +136,13 @@
|
|||
"language": {
|
||||
"search": "_INPUT_",
|
||||
"searchPlaceholder": _("Search course reserves")
|
||||
}
|
||||
},
|
||||
"responsive": {
|
||||
"details": { "type": 'column',"target": -1 }
|
||||
},
|
||||
"aoColumnDefs": [
|
||||
{ "className": 'dtr-control', "orderable": false, "targets": -1 },
|
||||
],
|
||||
}, columns_settings );
|
||||
});
|
||||
</script>
|
||||
|
|
|
@ -45,6 +45,7 @@
|
|||
<th>[% tp('Semester', 'Term') | html %]</th>
|
||||
<th>Instructors</th>
|
||||
<th>Notes</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
|
@ -62,6 +63,7 @@
|
|||
[% END %]
|
||||
</td>
|
||||
<td>[% c.public_note | $raw %]</td>
|
||||
<td></td>
|
||||
[% END %]
|
||||
</tbody>
|
||||
</table>
|
||||
|
@ -87,7 +89,13 @@
|
|||
"language": {
|
||||
"search": "_INPUT_",
|
||||
"searchPlaceholder": _("Search courses")
|
||||
}
|
||||
},
|
||||
"responsive": {
|
||||
"details": { "type": 'column',"target": -1 }
|
||||
},
|
||||
"aoColumnDefs": [
|
||||
{ "className": 'dtr-control', "orderable": false, "targets": -1 },
|
||||
],
|
||||
}, columns_settings );
|
||||
});
|
||||
</script>
|
||||
|
|
|
@ -756,6 +756,7 @@
|
|||
<th id="serial_planneddate" data-colname="serial_planneddate">Received date</th>
|
||||
<th id="serial_status" data-colname="serial_status">Status</th>
|
||||
<th id="serial_notes" data-colname="serial_notes">Note</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
@ -779,6 +780,7 @@
|
|||
[% IF (latestserial.status8 ) %]<span>Stopped</span>[% END %]
|
||||
</td>
|
||||
<td class="serial_notes">[% latestserial.notes | html %]</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
[% END # / FOREACH latestserials %]
|
||||
</tbody>
|
||||
|
@ -1744,31 +1746,26 @@
|
|||
|
||||
KohaTable("#holdingst", {
|
||||
dom: '<"clearfix">t',
|
||||
"columnDefs": [
|
||||
{ "targets": [ -1 ], "sortable": false, "searchable": false },
|
||||
],
|
||||
"aoColumnDefs": [
|
||||
{ "className": "dtr-control", "orderable": false, "targets": -1 }
|
||||
],
|
||||
"bKohaColumnsUseNames": true,
|
||||
"autoWidth": false,
|
||||
"responsive": {
|
||||
"details": {
|
||||
"type": 'column',
|
||||
"target": -1
|
||||
}
|
||||
},
|
||||
aoColumnDefs: [ {
|
||||
className:"dtr-control",
|
||||
orderable: false,
|
||||
targets: [-1],
|
||||
} ],
|
||||
"details": { "type": 'column', "target": -1 }
|
||||
}
|
||||
}, columns_settings);
|
||||
|
||||
KohaTable("#otherholdingst", {
|
||||
dom: '<"clearfix">t',
|
||||
"columnDefs": [
|
||||
{ "targets": [ -1 ], "sortable": false, "searchable": false },
|
||||
],
|
||||
"aoColumnDefs": [
|
||||
{ "className": "dtr-control", "orderable": false, "targets": -1 }
|
||||
],
|
||||
"bKohaColumnsUseNames": true,
|
||||
"autoWidth": false
|
||||
"autoWidth": false,
|
||||
"responsive": {
|
||||
"details": { "type": 'column', "target": -1 }
|
||||
}
|
||||
}, columns_settings);
|
||||
|
||||
var serial_column_settings = [% TablesSettings.GetColumns( 'opac', 'biblio-detail', 'subscriptionst', 'json' ) | $raw %];
|
||||
|
@ -1777,9 +1774,20 @@
|
|||
dom: '<"clearfix">t',
|
||||
"sorting": [[ 1, "desc" ]],
|
||||
"autoWidth": false,
|
||||
"bKohaColumnsUseNames": true
|
||||
"bKohaColumnsUseNames": true,
|
||||
"responsive": {
|
||||
"details": { "type": 'column', "target": -1 }
|
||||
},
|
||||
"aoColumnDefs": [
|
||||
{ "className": "dtr-control", "orderable": false, "targets": -1 }
|
||||
],
|
||||
}, serial_column_settings);
|
||||
|
||||
var dTables = $("#holdingst,#subscriptionst,#otherholdingst");
|
||||
$('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
|
||||
dTables.DataTable().responsive.recalc();
|
||||
} );
|
||||
|
||||
[% IF ( TagsInputEnabled && loggedinusername ) %]
|
||||
$(".tag_add").click(function(){
|
||||
var thisid = $(this).attr("id");
|
||||
|
|
|
@ -56,6 +56,7 @@
|
|||
[% IF Koha.Preference('PhoneNotification') %]<th>Phone</th>[% END %]
|
||||
<th>Email</th>
|
||||
<th>Digests only <i id="info_digests" data-toggle="tooltip" title="You can ask for a digest to reduce the number of messages. Messages will be saved and sent as a single message." data-placement="right" class="fa fa-info-circle"></i></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
@ -171,6 +172,7 @@
|
|||
[% ELSE %]
|
||||
<td>-</td>
|
||||
[% END %]
|
||||
<td></td>
|
||||
|
||||
</tr>
|
||||
[% END # / FOREACH messaging_preferences%]
|
||||
|
@ -254,6 +256,7 @@
|
|||
|
||||
[% INCLUDE 'opac-bottom.inc' %]
|
||||
[% BLOCK jsinclude %]
|
||||
[% INCLUDE 'datatables.inc' %]
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$("#info_digests").tooltip();
|
||||
|
@ -310,5 +313,16 @@
|
|||
}, 100);
|
||||
});
|
||||
}
|
||||
$('.table').dataTable($.extend(true, {}, dataTablesDefaults, {
|
||||
"searching": false,
|
||||
"paging": false,
|
||||
"info": false,
|
||||
"responsive": {
|
||||
"details": { "type": 'column',"target": -1 }
|
||||
},
|
||||
"columnDefs": [
|
||||
{ "className": 'dtr-control', "orderable": false, "targets": -1 }
|
||||
],
|
||||
}));
|
||||
</script>
|
||||
[% END %]
|
||||
|
|
|
@ -104,6 +104,7 @@
|
|||
[% IF ( OPACMySummaryHTML ) %]
|
||||
<th class="NoSort noExport">Links</th>
|
||||
[% END %]
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
@ -183,6 +184,7 @@
|
|||
[% IF OPACMySummaryHTML %]
|
||||
<td>[% issue.MySummaryHTML | $raw %]</td>
|
||||
[% END %]
|
||||
<td></td>
|
||||
</tr>
|
||||
[% END # / FOREACH issue %]
|
||||
</tbody>
|
||||
|
@ -218,7 +220,15 @@
|
|||
"language": {
|
||||
"search": "_INPUT_",
|
||||
"searchPlaceholder": _("Search")
|
||||
}
|
||||
},
|
||||
"responsive": {
|
||||
"details": {"type": 'column',"target": -1}
|
||||
},
|
||||
"aoColumnDefs": [
|
||||
{ "className": "dtr-control","orderable": false,"targets": [-1] },
|
||||
{ "visible": false, "targets": [0]},
|
||||
{ "orderable": false, "targets": [1]}
|
||||
],
|
||||
}, columns_settings);
|
||||
|
||||
$("#tabs a[data-toggle='tab']").on("shown.bs.tab", function (e) {
|
||||
|
|
|
@ -41,6 +41,7 @@
|
|||
<th>Status</th>
|
||||
<th>Due date</th>
|
||||
<th class="nosort"> </th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
@ -120,6 +121,7 @@
|
|||
[% END %]
|
||||
</td>
|
||||
[% END %]
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
@ -146,10 +148,14 @@
|
|||
return confirmDelete(_("Are you sure you want to remove this recall?"));
|
||||
});
|
||||
$("#recalls-table").dataTable($.extend(true, {}, dataTablesDefaults, {
|
||||
"responsive": {
|
||||
"details": { "type": 'column', "target": -1 }
|
||||
},
|
||||
"aoColumnDefs": [
|
||||
{ "aTargets": [ "nosort" ],"bSortable": false,"bSearchable": false },
|
||||
{ "sType": "anti-the", "aTargets" : [ "anti-the" ] },
|
||||
{ "sType": "title-string", "aTargets" : [ "title-string" ] }
|
||||
{ "sType": "title-string", "aTargets" : [ "title-string" ] },
|
||||
{ "className": "dtr-control", "orderable": false, "targets": -1 }
|
||||
]
|
||||
}));
|
||||
});
|
||||
|
|
|
@ -289,7 +289,7 @@
|
|||
"dom": '<"top"<"table_entries"><"table_controls"fB>>t',
|
||||
"columnDefs": [
|
||||
{ "targets": [ 0 ], "sortable": false, "searchable": false },
|
||||
{"className": 'dtr-control',"orderable": false,"targets": -1}
|
||||
{ "className": 'dtr-control', "orderable": false, "targets": -1 }
|
||||
],
|
||||
"language": {
|
||||
"search": "_INPUT_",
|
||||
|
@ -297,13 +297,13 @@
|
|||
},
|
||||
"autoWidth": false,
|
||||
"responsive": {
|
||||
details: {
|
||||
type: 'column',
|
||||
target: -1
|
||||
}
|
||||
"details": { "type": 'column',"target": -1 }
|
||||
},
|
||||
}));
|
||||
|
||||
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
||||
$(".historyt").DataTable().responsive.recalc();
|
||||
});
|
||||
$(".CheckNone").click(function(e){
|
||||
e.preventDefault();
|
||||
var form = $(this).parents("form").get(0);
|
||||
|
|
|
@ -844,6 +844,7 @@
|
|||
<th>Pickup location</th>
|
||||
<th>Status</th>
|
||||
<th class="nosort"> </th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
@ -899,6 +900,7 @@
|
|||
[% END %]
|
||||
</td>
|
||||
[% END %]
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
@ -927,6 +929,7 @@
|
|||
<th class="article-request-status">Status</th>
|
||||
<th class="article-request-branchcode">Pickup library</th>
|
||||
<th class="nosort article-request-cancel"> </th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
|
@ -1003,6 +1006,7 @@
|
|||
<td class="article-request-cancel">
|
||||
<button data-title="[% ar.biblio.title | html %] [% ar.item.enumchron | html %]" data-article-request_id="[% ar.id | html %]" class="btn btn-sm btn-danger btn-delete-article-request"><i class="fa fa-remove" aria-hidden="true"></i> Cancel</button>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
[% END %]
|
||||
</tbody>
|
||||
|
@ -1199,7 +1203,8 @@
|
|||
"columnDefs": [
|
||||
{ "targets": [ "nosort" ],"sortable": false,"searchable": false },
|
||||
{ "type": "anti-the", "targets" : [ "anti-the" ] },
|
||||
{ "visible": false, "targets" : [ "hidden" ] }
|
||||
{ "visible": false, "targets" : [ "hidden" ] },
|
||||
{ "className": 'dtr-control', "orderable": false, "targets": -1 }
|
||||
],
|
||||
"language": {
|
||||
"search": "_INPUT_",
|
||||
|
@ -1212,11 +1217,6 @@
|
|||
target: -1
|
||||
}
|
||||
},
|
||||
"columnDefs": [ {
|
||||
className: 'dtr-control',
|
||||
orderable: false,
|
||||
targets: -1
|
||||
} ],
|
||||
buttons: [
|
||||
/* Override default button set so that we can extend the options of print and csv */
|
||||
'clearFilter', 'copy',
|
||||
|
@ -1238,8 +1238,24 @@
|
|||
}));
|
||||
});
|
||||
|
||||
var dataTables = $("#recalls-table,#article-requests-table");
|
||||
dataTables.each(function(){
|
||||
$(this).dataTable($.extend(true, {}, dataTablesDefaults, {
|
||||
"searching": false,
|
||||
"paging": false,
|
||||
"info": false,
|
||||
"autoWidth": false,
|
||||
"responsive": {
|
||||
"details": { "type": 'column',"target": -1 }
|
||||
},
|
||||
"columnDefs": [
|
||||
{ "className": 'dtr-control', "orderable": false, "targets": -1 }
|
||||
],
|
||||
}));
|
||||
});
|
||||
$('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
|
||||
dTables.DataTable().responsive.recalc();
|
||||
dataTables.DataTable().responsive.recalc();
|
||||
} );
|
||||
|
||||
$("body").on("click", "#buttons-ics", function(){
|
||||
|
|
Loading…
Reference in a new issue