From 7bfd83d21bce38238d5b032a390821f338f398cb Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Wed, 9 Sep 2020 18:23:38 +0000 Subject: [PATCH] Bug 25775: Add DataTables controls to user's checkouts table in OPAC This patch updates the "your summary" page in the OPAC so that tables on the logged-in user's page have DataTables controls. The patch also tweaks the DataTable configuration of some other pages to make them all more consistent. To test, apply the patch and rebuild the OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client). - Log in to the OPAC as a user who has checkouts, overdues, and holds. - On the "your summary" page, confirm that the checkouts table has controls at the top: A search form and link-style buttons: Clear filter, Copy, CSV, Print, iCal, Renew selected, and Renew all. - Confirm that each work correctly. - At the bottom of the page, the style of the "Renew selected" and "Renew all" buttons should now be side by side. - Confirm that both buttons work correctly. - If necessary, enable the UseCourseReserves system preference. - Go to the OPAC course reserves page. - Confirm that there is a working "Search courses" field at the top of the table. - View the contents of a course reserve. - There should be a "Search course reserves" field at the top of the table. Signed-off-by: Lucas Gass Signed-off-by: Katrin Fischer Signed-off-by: Jonathan Druart --- .../opac-tmpl/bootstrap/css/datatables.css | 22 + .../opac-tmpl/bootstrap/css/src/_common.scss | 289 +++++++++++++ .../opac-tmpl/bootstrap/css/src/opac.scss | 31 +- .../en/modules/opac-course-details.tt | 6 +- .../en/modules/opac-course-reserves.tt | 2 +- .../bootstrap/en/modules/opac-user.tt | 48 ++- .../opac-tmpl/bootstrap/js/datatables.js | 407 ++---------------- 7 files changed, 380 insertions(+), 425 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/datatables.css b/koha-tmpl/opac-tmpl/bootstrap/css/datatables.css index 5546a58eb1..b9361b7acd 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/datatables.css +++ b/koha-tmpl/opac-tmpl/bootstrap/css/datatables.css @@ -19,6 +19,10 @@ div.dataTables_filter { margin : 0; } +.dt-buttons { + padding: .3em 0 0 0; +} + .dataTables_filter input { background-color: #fff; border-radius: 0.2rem; @@ -26,6 +30,7 @@ div.dataTables_filter { color: #495057; height: calc(1.5em + 0.5rem + 2px); line-height: 1.5; + margin-left: 3px; padding: 0.25rem 0.5rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; } @@ -34,3 +39,20 @@ div.dataTables_filter { border-color: #85ca11; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(194, 228, 136, 0.6); } + +div.dt-button-collection { + background-color: white; + border-radius: 5px; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.4); + box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); + column-gap: 8px; + left: 0; + margin-top: 3px; + overflow: hidden; + padding: 8px 8px 4px 8px; + position: absolute; + top: 0; + width: 150px; + z-index: 2002; +} diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss index f0a0fd2be3..93a0c66712 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss @@ -34,6 +34,10 @@ $sci-heading-color: #727272; border-radius: $radius; } +@mixin input-focus { + border-color: #85CA11; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(194, 228, 136, .6); +} /* Bootstrap imports */ @import "../../../../../node_modules/bootstrap/scss/functions"; @@ -295,6 +299,291 @@ textarea, } } +.dt-button { + background-color: transparent; + border: 0; + color: #0088cc; + display: inline-block; + line-height: 20px; + padding: 4px 12px; + text-align: center; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + vertical-align: middle; + + &:hover { + color: #005580; + + &::before { + color: #44AE89; + } + } + + &::before { + color: #4466AE; + font-family: FontAwesome; + display: inline-block; + padding-right: .5em; + } + + &.disabled { + color: #333; + opacity: .65; + pointer-events: none; + + &:hover { + color: #333; + filter: alpha(opacity=65); + opacity: 0.65; + } + + i { + + &.fa, + &.fa:hover { + color: #333; + filter: alpha(opacity=65); + opacity: 0.65; + } + } + } +} + +div.dt-button-collection button.dt-button, +div.dt-button-collection div.dt-button, +div.dt-button-collection a.dt-button { + position: relative; + left: 0; + right: 0; + width: 100%; + display: block; + float: none; + margin-bottom: 4px; + margin-right: 0; +} + +div.dt-button-collection { + width: auto +} + +div.dt-button-collection button.dt-button { + border-radius: 2px; + text-align: left +} + +div.dt-button-collection button.dt-button.buttons-collection { + border: 0 +} + +div.dt-button-collection button.dt-button.buttons-columnVisibility { + background: #fff none; + border: 1px solid #eee; + box-shadow: none; + font-size: 1em; + margin: 0 0 4px; + padding: .3em .7em; + text-shadow: none +} + +div.dt-button-collection button.dt-button.buttons-columnVisibility:before { + color: #c00; + content: "\f00d"; + display: inline-block; + font-family: FontAwesome; + margin-right: .5em; + width: 1em +} + +div.dt-button-collection button.dt-button.buttons-columnVisibility:hover { + background: #ffc none; + border: 1px solid #999; + box-shadow: none +} + +div.dt-button-collection button.dt-button.buttons-columnVisibility:hover:before { + color: #538200; + content: "\f00c"; + display: inline-block; + font-family: FontAwesome; + margin-right: .5em; + width: 1em +} + +div.dt-button-collection button.dt-button.buttons-columnVisibility:active:not(.disabled):hover:not(.disabled) { + background: transparent none; + box-shadow: none +} + +div.dt-button-collection button.dt-button.buttons-columnVisibility.active { + background: #e6f0f2 none; + border-color: #999; + box-shadow: none +} + +div.dt-button-collection button.dt-button.buttons-columnVisibility.active:hover { + background: #ffc none +} + +div.dt-button-collection button.dt-button.buttons-columnVisibility.active:hover:before { + color: #c00; + content: "\f00d"; + display: inline-block; + font-family: FontAwesome; + margin-right: .5em; + width: 1em +} + +div.dt-button-collection button.dt-button.buttons-columnVisibility.active:not(.disabled):hover:not(.disabled) { + background: transparent none; + box-shadow: none +} + +div.dt-button-collection button.dt-button.buttons-columnVisibility.active:before { + color: #538200; + content: "\f00c"; + display: inline-block; + font-family: FontAwesome; + margin-right: .5em; + width: 1em; +} + +div.dt-button-collection button.dt-button.buttons-html5, +div.dt-button-collection button.dt-button.buttons-print { + background: #fff none; + border: 1px solid #eee; + box-shadow: none; + font-size: 1.2em; + margin: 0 0 4px; + padding: .3em .7em; + text-shadow: none +} + +div.dt-button-collection button.dt-button.buttons-html5:hover, +div.dt-button-collection button.dt-button.buttons-print:hover { + background: #ffc none +} + +div.dt-button-collection button.dt-button.buttons-html5:not(.disabled):before { + color: #222bac; + display: inline-block; + font-family: FontAwesome; + margin-right: .5em; + width: 1em +} + +div.dt-button-collection button.dt-button.buttons-excel:not(.disabled):before { + content: "\f1c3" +} + +div.dt-button-collection button.dt-button.buttons-csv:not(.disabled):before { + content: "\f0ce" +} + +div.dt-button-collection button.dt-button.buttons-copy:not(.disabled):before { + content: "\f0c5" +} + +div.dt-button-collection button.dt-button.buttons-print:not(.disabled):before { + color: #222bac; + content: "\f02f"; + display: inline-block; + font-family: FontAwesome; + margin-right: .5em; + width: 1em +} + +.dt-button-info { + position: fixed; + top: 50%; + left: 50%; + width: 400px; + margin-top: -100px; + margin-left: -200px; + background-color: #FFF; + border: 2px solid #005580; + box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3); + border-radius: 3px; + text-align: center; + z-index: 21; + + h2 { + padding: 0.5em; + margin: 0; + font-weight: normal; + border-bottom: 1px solid #ddd; + background-color: #f3f3f3; + } + + &>div { + padding: 1em; + } +} + +.buttons-print { + &::before { + content: "\f02f"; + } +} + +.buttons-csv { + &::before { + content: "\f0ce"; + } +} + +.buttons-copy { + &::before { + content: "\f0c5"; + } +} + +.buttons-ical { + &::before { + content: "\f073"; + } + + &:hover { + text-decoration: none; + } +} + +.buttons-renew, +.buttons-renewall { + &:hover { + i.fa { + color: #44AE89; + } + } +} + +.buttons-colvis { + &::before { + content: "\f013"; + } +} + +.table_controls { + display: flex; + + .dataTables_filter { + label { + input { + margin-left: 5px; + } + } + + input { + @extend .form-control; + @extend .form-control-sm; + display: inline-block; + width: auto; + + &:focus { + @include input-focus; + } + } + } +} + [class^="icon-"] { vertical-align: 0; } diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index f8159086fd..a33ba13211 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -10,7 +10,8 @@ padding: 0; } - .selections-toolbar { + .selections-toolbar, + #renewall_js { display: none; } @@ -542,7 +543,6 @@ th { } } - .breadcrumb { background-color: #F0F3F3; font-size: 85%; @@ -552,33 +552,6 @@ th { border-radius: 0px; } -.buttons-print { - background-color: transparent; - border: 0; - color: #0088cc; - display: inline-block; - line-height: 20px; - padding: 4px 12px; - text-align: center; - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); - vertical-align: middle; - - &:hover { - color: #005580; - &::before { - color: #44AE89; - } - } - - &::before { - color: #4466AE; - content: "\f02f"; - font-family: FontAwesome; - display: inline-block; - padding-right: .5em; - } -} - #opac-main-search { background: #f0f3f3; margin: 7px 0; diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-details.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-details.tt index ffd3367aa1..d90c1fa2e8 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-details.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-details.tt @@ -122,9 +122,13 @@ $(document).ready(function() { columns_settings = [% TablesSettings.GetColumns( 'opac', 'biblio-detail', 'course-items-table', 'json' ) | $raw %]; KohaTable("#course-items-table", { - "dom": '<"top"f>rt<"clear">', + "dom": '<"top"<"table_controls"f>>t', "sorting": [[ 1, "asc" ]], "autoWidth": false, + "language": { + "search": "_INPUT_", + "searchPlaceholder": _("Search course reserves") + } }, columns_settings ); }); diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-reserves.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-reserves.tt index bc6a9814e8..6856d1e3bd 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-reserves.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-reserves.tt @@ -84,7 +84,7 @@ ], "language": { "search": "_INPUT_", - "searchPlaceholder": "Search courses" + "searchPlaceholder": _("Search courses") } }, columns_settings ); }); diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt index bb2cc72410..0f5e696cf7 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt @@ -452,22 +452,22 @@ [% IF ( canrenew && !userdebarred && OpacRenewalAllowed && !( logged_in_user.is_expired && logged_in_user.category.effective_BlockExpiredPatronOpacActions ) ) %] + [% END %] [% IF ( canrenew && !userdebarred && OpacRenewalAllowed && !( logged_in_user.is_expired && logged_in_user.category.effective_BlockExpiredPatronOpacActions ) ) %] -
- - - [% FOREACH ISSUE IN ISSUES %] - [% IF ISSUE.status %] - + + + + [% FOREACH ISSUE IN ISSUES %] + [% IF ISSUE.status %] + + [% END %] [% END %] - [% END %] - -
+ + [% END %] -

Download as iCal/.ics file

[% ELSE %] @@ -834,7 +834,14 @@ [% INCLUDE 'calendar.inc' %] [% INCLUDE 'datatables.inc' %]
You have nothing checked out