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 <paul.derscheid@lmscloud.de> 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 commiteb2e0c2efd
) Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com> (cherry picked from commite3de75585d
) Signed-off-by: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com>
This commit is contained in:
parent
4ea1bda1ed
commit
55ff485b8c
11 changed files with 48 additions and 2 deletions
|
@ -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,
|
||||
|
|
|
@ -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 ) {
|
||||
|
|
|
@ -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 %]
|
||||
<script>
|
||||
var MSG_DT_FIRST = _("First");
|
||||
var MSG_DT_LAST = _("Last");
|
||||
|
|
|
@ -5,6 +5,8 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="generator" content="Koha [% Version | html %]" /> <!-- leave this for stats -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
[% Asset.css("lib/jquery/jquery.dataTables.min.css") | $raw %]
|
||||
[% Asset.css("lib/jquery/responsive.dataTables.min.css") | $raw %]
|
||||
[% IF ( Koha.Preference('OpacMetaDescription') ) %]
|
||||
<meta name="description" content="[% Koha.Preference('OpacMetaDescription') | html %]" />
|
||||
[% END %]
|
||||
|
|
|
@ -95,6 +95,8 @@ $( document ).ready(function() {
|
|||
"order": [[ 0, "desc" ]],
|
||||
[% END %]
|
||||
"dom": '<"#filter_p">',
|
||||
"autoWidth": false,
|
||||
"responsive": true,
|
||||
} ));
|
||||
|
||||
$("#filter_p").html('<p><a href="#" id="filter_paid"><i class="fa fa-filter" aria-hidden="true"></i> '+txtActivefilter+'</a>');
|
||||
|
|
|
@ -1746,7 +1746,8 @@
|
|||
{ "targets": [ -1 ], "sortable": false, "searchable": false },
|
||||
],
|
||||
"bKohaColumnsUseNames": true,
|
||||
"autoWidth": false
|
||||
"autoWidth": false,
|
||||
"responsive": true
|
||||
}, columns_settings);
|
||||
|
||||
KohaTable("#otherholdingst", {
|
||||
|
|
|
@ -285,7 +285,9 @@
|
|||
"language": {
|
||||
"search": "_INPUT_",
|
||||
"searchPlaceholder": _("Search")
|
||||
}
|
||||
},
|
||||
"autoWidth": false,
|
||||
"responsive": true,
|
||||
}));
|
||||
|
||||
$(".CheckNone").click(function(e){
|
||||
|
|
|
@ -1200,6 +1200,7 @@
|
|||
"searchPlaceholder": _("Search")
|
||||
},
|
||||
"autoWidth": false,
|
||||
"responsive": true,
|
||||
buttons: [
|
||||
/* Override default button set so that we can extend the options of print and csv */
|
||||
'clearFilter', 'copy',
|
||||
|
@ -1221,6 +1222,10 @@
|
|||
}));
|
||||
});
|
||||
|
||||
$('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
|
||||
dTables.DataTable().responsive.recalc();
|
||||
} );
|
||||
|
||||
$("body").on("click", "#buttons-ics", function(){
|
||||
location.href="/cgi-bin/koha/opac-ics.pl";
|
||||
});
|
||||
|
|
1
koha-tmpl/opac-tmpl/bootstrap/lib/jquery/jquery.dataTables.min.css
vendored
Normal file
1
koha-tmpl/opac-tmpl/bootstrap/lib/jquery/jquery.dataTables.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
koha-tmpl/opac-tmpl/bootstrap/lib/jquery/responsive.dataTables.min.css
vendored
Normal file
1
koha-tmpl/opac-tmpl/bootstrap/lib/jquery/responsive.dataTables.min.css
vendored
Normal file
|
@ -0,0 +1 @@
|
|||
table.dataTable.dtr-inline.collapsed>tbody>tr>td.child,table.dataTable.dtr-inline.collapsed>tbody>tr>th.child,table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty{cursor:default !important}table.dataTable.dtr-inline.collapsed>tbody>tr>td.child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>th.child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty:before{display:none !important}table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control,table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control{position:relative;padding-left:30px;cursor:pointer}table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before{top:50%;left:5px;height:1em;width:1em;margin-top:-9px;display:block;position:absolute;color:white;border:.15em solid white;border-radius:1em;box-shadow:0 0 .2em #444;box-sizing:content-box;text-align:center;text-indent:0 !important;font-family:"Courier New",Courier,monospace;line-height:1em;content:"+";background-color:#31b131}table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before,table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before{content:"-";background-color:#d33333}table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td.dtr-control,table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th.dtr-control{padding-left:27px}table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td.dtr-control:before,table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th.dtr-control:before{left:4px;height:14px;width:14px;border-radius:14px;line-height:14px;text-indent:3px}table.dataTable.dtr-column>tbody>tr>td.dtr-control,table.dataTable.dtr-column>tbody>tr>th.dtr-control,table.dataTable.dtr-column>tbody>tr>td.control,table.dataTable.dtr-column>tbody>tr>th.control{position:relative;cursor:pointer}table.dataTable.dtr-column>tbody>tr>td.dtr-control:before,table.dataTable.dtr-column>tbody>tr>th.dtr-control:before,table.dataTable.dtr-column>tbody>tr>td.control:before,table.dataTable.dtr-column>tbody>tr>th.control:before{top:50%;left:50%;height:.8em;width:.8em;margin-top:-0.5em;margin-left:-0.5em;display:block;position:absolute;color:white;border:.15em solid white;border-radius:1em;box-shadow:0 0 .2em #444;box-sizing:content-box;text-align:center;text-indent:0 !important;font-family:"Courier New",Courier,monospace;line-height:1em;content:"+";background-color:#31b131}table.dataTable.dtr-column>tbody>tr.parent td.dtr-control:before,table.dataTable.dtr-column>tbody>tr.parent th.dtr-control:before,table.dataTable.dtr-column>tbody>tr.parent td.control:before,table.dataTable.dtr-column>tbody>tr.parent th.control:before{content:"-";background-color:#d33333}table.dataTable>tbody>tr.child{padding:.5em 1em}table.dataTable>tbody>tr.child:hover{background:transparent !important}table.dataTable>tbody>tr.child ul.dtr-details{display:inline-block;list-style-type:none;margin:0;padding:0}table.dataTable>tbody>tr.child ul.dtr-details>li{border-bottom:1px solid #efefef;padding:.5em 0}table.dataTable>tbody>tr.child ul.dtr-details>li:first-child{padding-top:0}table.dataTable>tbody>tr.child ul.dtr-details>li:last-child{border-bottom:none}table.dataTable>tbody>tr.child span.dtr-title{display:inline-block;min-width:75px;font-weight:bold}div.dtr-modal{position:fixed;box-sizing:border-box;top:0;left:0;height:100%;width:100%;z-index:100;padding:10em 1em}div.dtr-modal div.dtr-modal-display{position:absolute;top:0;left:0;bottom:0;right:0;width:50%;height:50%;overflow:auto;margin:auto;z-index:102;overflow:auto;background-color:#f5f5f7;border:1px solid black;border-radius:.5em;box-shadow:0 12px 30px rgba(0, 0, 0, 0.6)}div.dtr-modal div.dtr-modal-content{position:relative;padding:1em}div.dtr-modal div.dtr-modal-close{position:absolute;top:6px;right:6px;width:22px;height:22px;border:1px solid #eaeaea;background-color:#f9f9f9;text-align:center;border-radius:3px;cursor:pointer;z-index:12}div.dtr-modal div.dtr-modal-close:hover{background-color:#eaeaea}div.dtr-modal div.dtr-modal-background{position:fixed;top:0;left:0;right:0;bottom:0;z-index:101;background:rgba(0, 0, 0, 0.6)}@media screen and (max-width: 767px){div.dtr-modal div.dtr-modal-display{width:95%}}
|
4
koha-tmpl/opac-tmpl/lib/jquery/plugins/dataTables.responsive.min.js
vendored
Normal file
4
koha-tmpl/opac-tmpl/lib/jquery/plugins/dataTables.responsive.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue