Bugzilla – Attachment 184928 Details for
Bug 38185
DT - replace dom with layout
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 38185: Try to match current DataTable style using new layout option
Bug-38185-Try-to-match-current-DataTable-style-usi.patch (text/plain), 7.62 KB, created by
Owen Leonard
on 2025-07-31 14:07:09 UTC
(
hide
)
Description:
Bug 38185: Try to match current DataTable style using new layout option
Filename:
MIME Type:
Creator:
Owen Leonard
Created:
2025-07-31 14:07:09 UTC
Size:
7.62 KB
patch
obsolete
>From 39b1f984043624087a462a0373ca203938fb725c Mon Sep 17 00:00:00 2001 >From: Owen Leonard <oleonard@myacpl.org> >Date: Wed, 30 Jul 2025 13:15:07 +0000 >Subject: [PATCH] Bug 38185: Try to match current DataTable style using new > layout option > >--- > .../intranet-tmpl/prog/css/src/_tables.scss | 175 ++++-------------- > koha-tmpl/intranet-tmpl/prog/js/datatables.js | 33 ++-- > 2 files changed, 62 insertions(+), 146 deletions(-) > >diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_tables.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_tables.scss >index 03a4a7edfff..67b991826a5 100644 >--- a/koha-tmpl/intranet-tmpl/prog/css/src/_tables.scss >+++ b/koha-tmpl/intranet-tmpl/prog/css/src/_tables.scss >@@ -180,9 +180,10 @@ table { > td { > padding: .5em; > } >+ > tr.dtrg-group { > td { >- background: #e0e0e0; >+ background: #E0E0E0; > } > } > } >@@ -455,41 +456,17 @@ div { > } > } > >- .dt-info { >- float: none; >- line-height: 1.9em; >- padding-right: 1em; >- padding-top: 0; >- } >- >- .dt-length { >- display: none; >- float: none; >- line-height: 1.5em; >- padding-right: 1em; >- } >- >- .dt-input { >- float: none; >- padding-right: 1em; >- white-space: nowrap; >- >- input { >- border-radius: 0; >- padding: 1px 2px; >- } >- } >- > .dt-buttons { > display: flex; > flex-grow: 1; >- justify-content: flex-end; > > > .dt-button { > background: transparent none; > border: 1px solid transparent; >+ display: unset; > font-size: .9rem; > padding: .3rem .5rem; >+ position: unset; > > &:hover:not( .disabled ) { > background: #EEE none; >@@ -503,23 +480,11 @@ div { > } > > .dt-paging { >- float: none; >- line-height: 1.5em; >- padding: 0; >- padding-right: 1em; >- >- span { >- .dt-paging-button, >- .ellipsis { >- display: none; >- } >- } >- > .dt-paging-button { > border: 1px solid transparent; > border-radius: 0; > color: $green-text-color; >- padding: .2em 1em .5em 1em; >+ padding: .2em .7em .5em .7em; > > &:hover, > &:active { >@@ -595,6 +560,25 @@ div { > } > } > } >+ >+ div.dt-layout-end { >+ &.dt-search-buttons { >+ .dt-buttons { >+ /* Override left margin to keep "Clear" button next to search field */ >+ margin-left: 0; >+ } >+ } >+ } >+ } >+ >+ .dt-info-row { >+ border-bottom: 1px solid $table-border-color; >+ flex-grow: 1; >+ padding: .5rem 0; >+ } >+ >+ .dt-search-buttons { >+ flex-grow: 1; > } > > .dt-button-collection { >@@ -678,7 +662,6 @@ div { > top: unset; > } > } >- > } > > .dt-button-down-arrow { >@@ -687,31 +670,15 @@ div { > padding-left: .3rem; > } > >-.dt-info { >- margin-top: .5em; >- >- & + .pager { >- border-top: 1px solid $table-border-color; >- margin-top: .3em; >- } >-} >- >-.dt-length, .dt-paging, .dt-search { >- display: flex; >+.dt-paging-row { > flex-wrap: wrap; > font-size: 90%; >+ gap: 1rem; >+} > >- &.top { >- padding-top: 1em; >- } >- >- &.bottom { >- border-bottom: 1px solid $table-border-color; >- padding-bottom: 1em; >- } >- >- >- >+.dt-length, >+.dt-paging, >+.dt-search { > input { > &[type="search"] { > border: 1px solid #CCC; >@@ -748,87 +715,27 @@ div { > } > } > >-.table_entries { >- clear: both; >- display: flex; >-} >- >-.table_controls { >- border-top: 1px solid #EEE; >- display: flex; >- flex-grow: 1; >- justify-content: flex-end; >- margin-top: .5em; >- padding-top: .5em; >-} >- >-@media ( min-width: 1275px ) { >+@media only screen and ( min-width: 950px ) and ( max-width: 1525px ) { > .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; >- } >- } >+ display: none; > } > } > >-@media only screen and ( max-width: 767px ) { >- div { >- .dt-container { >- .dt-info, >- .dt-paging { >- float: none; >- text-align: left; >- } >- } >+@media ( min-width: 1390 ) { >+ .dt-layout-row { >+ flex-wrap: wrap; > } >-} > >-@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; >+ display: inline; > } > } > >-@media only screen and ( min-width: 1500px ) { >- div { >- .dt-container { >- .dt-paging { >- span { >- .dt-paging-button, >- .ellipsis { >- display: inline-block; >- } >- } >+@media screen and ( max-width: 767px ) { >+ div.dt-container { >+ div.dt-layout-row:not( .dt-layout-table ) { >+ div.dt-layout-cell { >+ text-align: left; > } > } > } >diff --git a/koha-tmpl/intranet-tmpl/prog/js/datatables.js b/koha-tmpl/intranet-tmpl/prog/js/datatables.js >index 421308e113b..0b0fe20e6b9 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/datatables.js >+++ b/koha-tmpl/intranet-tmpl/prog/js/datatables.js >@@ -36,25 +36,34 @@ var dataTablesDefaults = { > excel: __("Excel"), > }, > }, >- // dom: '<"dt-info"i><"top pager"<"table_entries"lp><"table_controls"fB>>tr<"bottom pager"ip>', >+ > layout: { >- //top3Start: ["info"], >- //top3End: null, >- //top2Start: ["pageLength", "paging"], >- //top2End: null, >- //top: ["search", "buttons"], >- //topStart: null, >- //topEnd: null, >- >- top2Start: ["info"], >+ top2Start: { >+ features: ["info"], >+ rowClass: "dt-layout-row dt-info-row", >+ }, > top2End: null, >- top: ["pageLength", "paging", "search", "buttons"], >+ top1Start: { >+ className: "dt-layout-cell dt-layout-start dt-paging", >+ features: ["pageLength", "paging"], >+ rowClass: "dt-layout-row dt-paging-row", >+ }, >+ top1End: { >+ className: "dt-layout-cell dt-layout-end dt-search-buttons", >+ features: ["search", "buttons"], >+ }, >+ top: null, > topStart: null, > topEnd: null, > >- bottomStart: ["info", "paging"], >+ bottomStart: { >+ className: "dt-layout-cell dt-layout-start dt-paging", >+ features: ["info", "paging"], >+ rowClass: "dt-layout-row dt-info-row dt-paging-row", >+ }, > bottomEnd: null, > }, >+ > buttons: [ > { > fade: 100, >-- >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 38185
:
184796
|
184797
|
184805
|
184889
|
184906
| 184928