From 9a4148f55438f3b8e1ca38e1cc8df7b9352908a2 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 --- koha-tmpl/opac-tmpl/bootstrap/css/datatables.css | 22 ++ koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss | 289 +++++++++++++++ koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss | 31 +- .../bootstrap/en/modules/opac-course-details.tt | 6 +- .../bootstrap/en/modules/opac-course-reserves.tt | 2 +- .../opac-tmpl/bootstrap/en/modules/opac-user.tt | 48 ++- koha-tmpl/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 3df3488625..bc7f43499a 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 24f095c819..d74076fd5b 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 c25db59397..cc7c59f202 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt @@ -449,22 +449,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 %] @@ -831,7 +831,14 @@ [% INCLUDE 'calendar.inc' %] [% INCLUDE 'datatables.inc' %]
You have nothing checked out