Bugzilla – Attachment 181659 Details for
Bug 39761
OPAC DataTables responsive table controls style broken by Bug 39600
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 39761: OPAC DataTables responsive table controls style broken by Bug 39600
Bug-39761-OPAC-DataTables-responsive-table-control.patch (text/plain), 9.93 KB, created by
David Nind
on 2025-04-29 13:34:51 UTC
(
hide
)
Description:
Bug 39761: OPAC DataTables responsive table controls style broken by Bug 39600
Filename:
MIME Type:
Creator:
David Nind
Created:
2025-04-29 13:34:51 UTC
Size:
9.93 KB
patch
obsolete
>From 1b37e7980c65030bad8f08fc10e2c29884e8d365 Mon Sep 17 00:00:00 2001 >From: Owen Leonard <oleonard@myacpl.org> >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 <david@davidnind.com> >--- > .../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 b290d8c788..0782aa0ad2 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 7c85b21f5f..f63e4f08d7 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 54b245f9fd..179794eb79 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.39.5
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 39761
:
181647
|
181659
|
181662