@@ -, +, @@ in OPAC - 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. --- 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(-) --- a/koha-tmpl/opac-tmpl/bootstrap/css/datatables.css +++ a/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; +} --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss +++ a/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; } --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ a/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; --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-details.tt +++ a/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 ); }); --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-reserves.tt +++ a/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 ); }); --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt +++ a/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