From bd38175547be8fbf736e6aef7c2da8aa856175f9 Mon Sep 17 00:00:00 2001 From: Hammat Wele Date: Thu, 24 Nov 2022 22:06:43 +0000 Subject: [PATCH] The bibliographic display of a record in the opac on a mobile is not correct Items table columns are too thin This patch fix this problem by making the table responsive To test: 1- Go to the OPAC 2- Open mobile mode 3- Go to a bibliographic record detail page in the OPAC (opac-detail.pl?biblionumber=X) 4- Check the Holdings table --> the information is not presented in a table as it is when viewing on a laptop or PC browser screen. --> we see very narrow columns --> unreadable text 5- Apply the patch and perform previous step (1-4). 6- Confirm that the table are displayed correctly and responsive https://bugs.koha-community.org/show_bug.cgi?id=32341 --- .../opac-tmpl/bootstrap/css/src/_common.scss | 19 +++++++++++++++++++ .../bootstrap/en/includes/datatables.inc | 1 + .../bootstrap/en/includes/doc-head-close.inc | 2 ++ .../bootstrap/en/modules/opac-detail.tt | 3 ++- .../lib/jquery/jquery.dataTables.min.css | 1 + .../lib/jquery/responsive.dataTables.min.css | 1 + .../plugins/dataTables.responsive.min.js | 4 ++++ 7 files changed, 30 insertions(+), 1 deletion(-) create mode 100644 koha-tmpl/opac-tmpl/bootstrap/lib/jquery/jquery.dataTables.min.css create mode 100644 koha-tmpl/opac-tmpl/bootstrap/lib/jquery/responsive.dataTables.min.css create mode 100644 koha-tmpl/opac-tmpl/lib/jquery/plugins/dataTables.responsive.min.js diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss index ec6da81fe1..3650ae25fe 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss @@ -639,6 +639,25 @@ div.dt-button-collection button.dt-button.buttons-print:not( .disabled )::before padding-right: 19px; } + &.dataTable{ + thead{ + .sorting_asc { + background: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi4zODRtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMiAyLjM4NDAzODkiPjxnPjxwYXRoIGZpbGw9IiMwMDZhY2MiIGQ9Ik00LjA1IDEuNzRoLTIuMUwzIC42NHoiLz48L2c+PC9zdmc+" ) no-repeat scroll 100% 80% #E2E8E8; + padding-right: 19px; + } + + .sorting_desc { + background: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi4zODRtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMiAyLjM4NDAzODkiPjxnPjxwYXRoIGZpbGw9IiMwMDZhY2MiIGQ9Ik00LjA1LjY0aC0yLjFMMyAxLjc0eiIvPjwvZz48L3N2Zz4=" ) no-repeat scroll 100% 80% #E2E8E8; + padding-right: 19px; + } + + .sorting { + background: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi41NTFtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMyAyLjU1MDY2MTQiPjxwYXRoIGZpbGw9IiNhY2FjYWMiIGQ9Ik00LjA1IDEuNDVoLTIuMUwzIDIuNTV6Ii8+PHBhdGggZmlsbD0iI2FjYWNhYyIgZD0iTTQuMDUgMS4xaC0yLjFMMyAweiIvPjwvc3ZnPg==" ) no-repeat scroll 100% 75% #E2E8E8; + padding-right: 19px; + } + } + } + .nosort, .nosort.sorting_asc, .nosort.sorting_desc, diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/datatables.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/datatables.inc index c8f18ec072..91a6f1ccb1 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/datatables.inc +++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/datatables.inc @@ -1,6 +1,7 @@ [% USE raw %] [% USE Asset %] [% Asset.js("lib/jquery/plugins/jquery.dataTables.min.js") | $raw %] +[% Asset.js("lib/jquery/plugins/dataTables.responsive.min.js") | $raw %]