From b21925d5eb9b27c6869a44285ec36a804e347758 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Mon, 28 Apr 2025 18:23:13 +0000 Subject: [PATCH] Bug 39761: OPAC DataTables responsive table controls style broken by Bug 39600 This patch copies and adapts some CSS from the default DataTables CSS in order to add to the OPAC the required styles for new features added by the updated ILL request page: Paging, table information, and the "Processing" message shown while the table loads. To test, apply the patch and rebuild the OPAC CSS. You should have ILL enabled and configured. - Log in to the OPAC as a user who has submitted multiple ILL requests. - From the user summary page, click "Interlibrary loan requests" in the left-hand sidebar. - The table of ILL requests should look correct with legible information and controls. - All the DataTable features should work: Paging, showing different numbers of entries per page, sorting. - Go to the user summary page and confirm that the tables on that page still display correctly: Checkouts, overdues, holds, etc. Sponsored-by: Athens County Public Libraries Signed-off-by: David Nind Signed-off-by: Jonathan Druart --- .../opac-tmpl/bootstrap/css/src/_common.scss | 307 +++++++++++++++++- .../bootstrap/en/includes/doc-head-close.inc | 1 - .../bootstrap/en/modules/opac-illrequests.tt | 2 +- 3 files changed, 307 insertions(+), 3 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss index b290d8c7880..0782aa0ad25 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss @@ -544,8 +544,313 @@ div.dt-button-collection button.dt-button.buttons-print:not( .disabled )::before } } +/* div.dt-container .dt-paging .dt-paging-button { + background: transparent; + border: 1px solid transparent; + border-radius: 2px; + box-sizing: border-box; + cursor: pointer; + display: inline-block; + margin-left: 2px; + min-width: 1.5em; + padding: .5em 1em; + text-align: center; +} + +div.dt-container .dt-paging .dt-paging-button.current +div.dt-container .dt-paging .dt-paging-button.current:hover { + border: 1px solid rgba( 0, 0, 0, .3 ); +} + +div.dt-container .dt-paging .dt-paging-button.disabled, +div.dt-container .dt-paging .dt-paging-button.disabled:hover, +div.dt-container .dt-paging .dt-paging-button.disabled:active { + border: 1px solid transparent; + box-shadow: none; + cursor: default; +} + +div.dt-container .dt-paging .dt-paging-button:hover { + border: 1px solid #111; +} + +div.dt-container .dt-paging .dt-paging-button:active { +} + +div.dt-container .dt-paging .ellipsis { + padding: 0 1em; +} + +div.dt-container .dt-length, +div.dt-container .dt-search, +div.dt-container .dt-info, +div.dt-container .dt-processing, +div.dt-container .dt-paging { + color: inherit; +} */ + +.table_entries { + clear: both; + display: flex; +} + +div.dt-container .dt-length { + display: none; + float: none; + line-height: 1.5em; + padding-right: 1em; +} + +.dt-paging-button { + background: transparent none; + border: 1px solid transparent; + border-radius: .375rem; + color: $link-color; + font-weight: bold; + padding: .2rem 1rem; + + &:hover, + &:active { + background: transparent none; + border: 1px solid rgba( 0, 99, 148, .5 ); + box-shadow: none; + color: darken( $link-color, 5 ); + text-decoration: none; + } + + &.current { + background: transparent none; + border: 1px solid transparent; + color: $black; + + &:hover, + &:active { + background: transparent none; + border: 1px solid transparent; + box-shadow: none; + color: $black; + cursor: default; + text-decoration: none; + } + } + + &.disabled { + color: lighten( desaturate( adjust-hue( $link-color, -1 ), 75 ), 9 ); + + &:hover, + &:active { + background: transparent none; + border: 1px solid transparent; + box-shadow: none; + color: $link-color; + cursor: default; + text-decoration: none; + } + } + + &.first, + &.previous, + &.next, + &.last { + &::before, + &::after { + display: inline-block; + font-family: "Font Awesome 6 Free"; + width: 1em; + } + } + + &.first { + display: none; + + &::before { + content: "\f100"; + padding-right: 1.1rem; + } + } + + &.previous { + &::before { + content: "\f104"; + padding-right: 1rem; + } + } + + &.next { + &::after { + content: "\f105"; + padding-left: .5rem; + } + } + + &.last { + display: none; + + &::after { + content: "\f101"; + padding-left: .5rem; + } + } +} + +.dt-info + .pager { + border-top: 1px solid #BCBCBC; + margin-top: .3em; +} + +.dt-paging + .dt-info { + border-top: 1px solid #BCBCBC; + padding-top: .5rem; +} + +@media ( min-width: 1275px ) { + .dt-button-text { + display: inline; + } + + div { + .dt-container { + .dt-paging { + .dt-paging-button { + &.first, + &.last { + display: inline-block; + } + } + } + } + } +} + +@media only screen and ( min-width: 500px ) { + div { + .dt-container { + .dt-length { + display: block; + } + } + } +} + +@media only screen and ( max-width: 767px ) { + div { + .dt-container { + .dt-info, + .dt-paging { + float: none; + text-align: left; + } + } + } +} + +@media only screen and ( min-width: 950px ) and ( max-width: 1125px ) { + .dt-button-text { + display: none; + } +} + +@media only screen and ( min-width: 950px ) { + .table_entries, + .table_controls { + border-top: 0; + clear: none; + margin: 0; + padding: 0; + } +} + +@media only screen and ( min-width: 1500px ) { + div { + .dt-container { + .dt-paging { + span { + .dt-paging-button, + .ellipsis { + display: inline-block; + } + } + } + } + } +} + +.dt-button.processing { + color: rgba( 0, 0, 0, .2 ); + + &::after { + animation: dtb-spinner 1500ms infinite linear; + border: 2px solid rgb( 40, 40, 40 ); + border-left-color: transparent; + border-radius: 50%; + border-right-color: transparent; + box-sizing: border-box; + content: " "; + display: block; + height: 16px; + left: 50%; + margin: -8px 0 0 -8px; + position: absolute; + top: 50%; + width: 16px; + } +} + +.dt-processing { + background-color: #F4F8F9; + border: 1px solid darken( $base-theme-color, 10% ); + box-shadow: 2px 2px 3px 1px rgba( 0, 0, 0, .2 ); + left: 50%; + margin-left: -100px; + margin-top: -22px; + padding: .7rem; + position: absolute; + text-align: center; + top: 50%; + width: 200px; + z-index: 10; + + > div:last-child { + // background: $base-theme-color; + height: 15px; + margin: 1em auto; + position: relative; + width: 80px; + + > div { + animation-timing-function: cubic-bezier( 0, 1, 1, 0 ); + background: $base-theme-color none; + border-radius: 50%; + height: 13px; + position: absolute; + top: 0; + width: 13px; + + &:nth-child( 1 ) { + animation: datatables-loader-1 .6s infinite; + left: 8px; + } + + &:nth-child( 2 ) { + animation: datatables-loader-2 .6s infinite; + left: 8px; + } + + &:nth-child( 3 ) { + animation: datatables-loader-2 .6s infinite; + left: 32px; + } + + &:nth-child( 4 ) { + animation: datatables-loader-3 .6s infinite; + left: 56px; + } + } + } +} + table { - th + th, td { line-height: 135%; } diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc index 7c85b21f5fa..f63e4f08d70 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc +++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc @@ -87,6 +87,5 @@ [% Asset.css("lib/fontawesome/css/fontawesome.min.css") | $raw %] [% Asset.css("lib/fontawesome/css/brands.min.css") | $raw %] [% Asset.css("lib/fontawesome/css/solid.min.css") | $raw %] -[% Asset.css("lib/datatables/datatables.min.css") | $raw %] [% PROCESS 'html_helpers.inc' %] [% KohaPlugins.get_plugins_opac_head | $raw %] diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-illrequests.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-illrequests.tt index 54b245f9fd7..179794eb799 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-illrequests.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-illrequests.tt @@ -421,7 +421,7 @@ } $("#illrequestlist").kohaTable({ order: [[ 0, "desc" ]], - dom: '<"dt-info"i><"top pager"<"table_entries"lp>>tr<"bottom pager"ip>', + dom: '<"dt-info"i><"top pager"<"table_entries"lp>t<"bottom pager"pi>', paging: true, embed: ['+strings','extended_attributes'], ajax: { url: '/api/v1/public/patrons/[% logged_in_user.borrowernumber | uri %]/ill/requests' }, -- 2.34.1