From b15128a679a7e5b26ea3f8f7ec71b6585bb3fd18 Mon Sep 17 00:00:00 2001 From: Owen Leonard 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 | 34 ++-- 2 files changed, 63 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..6e14463762c 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/datatables.js +++ b/koha-tmpl/intranet-tmpl/prog/js/datatables.js @@ -36,25 +36,35 @@ 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: { + className: "dt-info-row", + features: ["info"], + rowClass: "dt-layout-row 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-paging-row", + }, bottomEnd: null, }, + buttons: [ { fade: 100, -- 2.39.5