Koha-community/Koha
13
7
Fork 0
Code Issues Releases Wiki Activity

Bug 32341: (follow-up) Making the remains OPAC tables responsive

Browse source 
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>
This commit is contained in:
Hammat Wele 2023-02-06 18:06:26 +00:00 committed by Tomas Cohen Arazi
parent 9f277e625e
commit 6caeb1f627
Signed by: tomascohen
GPG key ID: 0A272EA1B2F3C15F
13 changed files with 153 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
View file

@ -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;
}
}

4
koha-tmpl/opac-tmpl/bootstrap/en/includes/account-table.inc
View file

@ -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>&nbsp;</th>[% END %]

19
koha-tmpl/opac-tmpl/bootstrap/en/modules/clubs/clubs-tab.tt
View file

@ -12,6 +12,7 @@
<th>Description</th>
<th>Date enrolled</th>
<th>&nbsp;</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>&nbsp;</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>

4
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-account.tt
View file

@ -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();

25
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-authoritiessearchresultlist.tt
View file

@ -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 %]

10
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-details.tt
View file

@ -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>

10
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-reserves.tt
View file

@ -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>

44
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
View file

@ -758,6 +758,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>
@ -770,6 +771,7 @@
[% INCLUDE 'serial-status.inc' serial = latestserial %]
</td>
<td class="serial_notes">[% latestserial.notes | html %]</td>
<td></td>
</tr>
[% END # / FOREACH latestserials %]
</tbody>
@ -1740,31 +1742,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 %];
@ -1773,9 +1770,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");

14
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-messaging.tt
View file

@ -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 %]

12
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-readingrecord.tt
View file

@ -112,6 +112,7 @@
[% IF ( OPACMySummaryHTML ) %]
<th class="NoSort noExport">Links</th>
[% END %]
<th></th>
</tr>
</thead>
<tbody>
@ -189,6 +190,7 @@
[% IF OPACMySummaryHTML %]
<td>[% issue.MySummaryHTML | $raw %]</td>
[% END %]
<td></td>
</tr>
[% END # / FOREACH issue %]
</tbody>
@ -224,7 +226,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) {

8
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-recalls.tt
View file

@ -41,6 +41,7 @@
<th>Status</th>
<th>Due date</th>
<th class="nosort">&nbsp;</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 }
]
}));
});

10
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-search-history.tt
View file

@ -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);

28
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
View file

@ -852,6 +852,7 @@
<th>Pickup location</th>
<th>Status</th>
<th class="nosort">&nbsp;</th>
<th></th>
</tr>
</thead>
<tbody>
@ -907,6 +908,7 @@
[% END %]
</td>
[% END %]
<td></td>
</tr>
</tbody>
</table>
@ -935,6 +937,7 @@
<th class="article-request-status">Status</th>
<th class="article-request-branchcode">Pickup library</th>
<th class="nosort article-request-cancel">&nbsp;</th>
<th></th>
</tr>
</thead>
@ -1011,6 +1014,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>
@ -1207,7 +1211,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_",
@ -1220,11 +1225,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',
@ -1246,8 +1246,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(){