From e3de75585d9f325a4a05b5ddc3dbbad8c2dfb777 Mon Sep 17 00:00:00 2001 From: Hammat Wele Date: Mon, 12 Dec 2022 22:58:28 +0000 Subject: [PATCH] Bug 32341: Some OPAC tables are not displayed well in mobile mode Some OPAC tables are not displayed well in mobile mode, it is absolutely necessary to scroll to the right to read the content properly This patch fix this problem by making the tables 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- Go to to the page 'Summary' (opac-user.pl) 6- Check the 'Checked out' table --> the information is not presented in a table as it is when viewing on a laptop or PC browser screen. --> The columns are overflowing to the right 7- Check the 'Overdue' table --> the information is not presented in a table as it is when viewing on a laptop or PC browser screen. --> The columns are overflowing to the right 8- Go to the page 'Charges' (opac-account.pl) 9- Click on 'Show all transactions' --> the information is not presented in a table as it is when viewing on a laptop or PC browser screen. --> The columns are overflowing to the right 10- Go to the page 'Search history' (opac-search-history.pl) --> the information is not presented in a table as it is when viewing on a laptop or PC browser screen. --> The columns are overflowing to the right 11- Apply the patch 12- Execute 'yarn build --view opac' 13- Clean your cache or open your navigator on private mode (to load updated css files) 14- Perform previous step (1-10) 15- Confirm that the tables are now displayed correctly and is now responsive. Signed-off-by: Paul Derscheid Signed-off-by: David Cook Signed-off-by: Martin Renvoize Signed-off-by: Tomas Cohen Arazi (cherry picked from commit eb2e0c2efd52f7553cd0035e79c74e6f15a7a21d) Signed-off-by: Martin Renvoize --- .../opac-tmpl/bootstrap/css/src/_common.scss | 19 +++++++++++++++++++ .../bootstrap/css/src/_responsive.scss | 8 ++++++++ .../bootstrap/en/includes/datatables.inc | 1 + .../bootstrap/en/includes/doc-head-close.inc | 2 ++ .../bootstrap/en/modules/opac-account.tt | 2 ++ .../bootstrap/en/modules/opac-detail.tt | 3 ++- .../en/modules/opac-search-history.tt | 4 +++- .../bootstrap/en/modules/opac-user.tt | 5 +++++ .../lib/jquery/jquery.dataTables.min.css | 1 + .../lib/jquery/responsive.dataTables.min.css | 1 + .../plugins/dataTables.responsive.min.js | 4 ++++ 11 files changed, 48 insertions(+), 2 deletions(-) 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 83320dfc15..06d6d7f95d 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/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss index d9d630feee..791a4d71f0 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss @@ -256,6 +256,14 @@ #checkouts_filter { display: block; } + + #finestable tfoot tr { + display: flex !important; + width: max-content; + } + #finestable tfoot td, #finestable tfoot th { + display: flex !important; + } } @media only screen and ( max-width: 700px ) { 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 %]