@@ -, +, @@ mode 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. --- .../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 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss +++ a/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, --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss +++ a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss @@ -276,6 +276,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 ) { --- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/datatables.inc +++ a/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 %]