mirror of
https://github.com/getrebuild/rebuild.git
synced 2024-09-21 07:55:56 +08:00
feat: fixed headers and first-cell of datalist
This commit is contained in:
parent
c55d4c52f8
commit
618900c009
|
@ -1068,7 +1068,7 @@ a {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dataTables_wrapper .rb-datatable-header.pin {
|
.dataTables_wrapper .rb-datatable-header.header-fixed {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 60px;
|
top: 60px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
@ -1094,15 +1094,10 @@ a {
|
||||||
padding: 9px 10px;
|
padding: 9px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.data-list .table thead.pin tr>th {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.data-list .table thead th {
|
.data-list .table thead th {
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
padding-bottom: 8px;
|
padding-bottom: 8px;
|
||||||
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.data-list .table thead th.column-checkbox>div>.custom-control.custom-control-sm {
|
.data-list .table thead th.column-checkbox>div>.custom-control.custom-control-sm {
|
||||||
|
@ -1319,6 +1314,22 @@ i.split.ui-draggable-dragging {
|
||||||
overflow: unset !important;
|
overflow: unset !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.column-fixed::before,
|
||||||
|
.table.table-header-fixed thead>tr>th::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
bottom: -1px;
|
||||||
|
border-bottom: 1px solid #dee2e6;
|
||||||
|
}
|
||||||
|
|
||||||
|
th.column-fixed::before,
|
||||||
|
.table.table-header-fixed thead>tr>th::before {
|
||||||
|
bottom: -2px;
|
||||||
|
border-bottom: 2px solid #dee2e6;
|
||||||
|
}
|
||||||
|
|
||||||
th.column-fixed {
|
th.column-fixed {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
@ -1332,7 +1343,7 @@ th.column-fixed {
|
||||||
content: '';
|
content: '';
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
transform: translateX(100%);
|
transform: translateX(100%);
|
||||||
box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.15);
|
box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.1);
|
||||||
transition: box-shadow 0.3s;
|
transition: box-shadow 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1345,7 +1356,12 @@ th.column-fixed {
|
||||||
}
|
}
|
||||||
|
|
||||||
.data-list .table tbody tr.active td.column-fixed {
|
.data-list .table tbody tr.active td.column-fixed {
|
||||||
background-color: #dee2e6;
|
background-color: #dee2e6
|
||||||
|
}
|
||||||
|
|
||||||
|
.table.table-header-fixed thead>tr>th {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form.batch-form {
|
.form.batch-form {
|
||||||
|
|
|
@ -114,7 +114,8 @@ class RbList extends React.Component {
|
||||||
// enable pins
|
// enable pins
|
||||||
if ($(window).height() > 666 && $(window).width() >= 1280) {
|
if ($(window).height() > 666 && $(window).width() >= 1280) {
|
||||||
$('.main-content').addClass('pb-0')
|
$('.main-content').addClass('pb-0')
|
||||||
$('.main-content .rb-datatable-header').addClass('pin')
|
$('.main-content .rb-datatable-header').addClass('header-fixed')
|
||||||
|
if (!rb.ie) $scroller.find('.table').addClass('table-header-fixed')
|
||||||
|
|
||||||
$addResizeHandler(() => {
|
$addResizeHandler(() => {
|
||||||
let mh = $(window).height() - 215
|
let mh = $(window).height() - 215
|
||||||
|
@ -124,14 +125,16 @@ class RbList extends React.Component {
|
||||||
})()
|
})()
|
||||||
}
|
}
|
||||||
|
|
||||||
let slLast = 0
|
if (!rb.ie) {
|
||||||
$scroller.on('ps-scroll-x', () => {
|
let slLast = 0
|
||||||
const sl = $scroller[0].scrollLeft
|
$scroller.on('ps-scroll-x', () => {
|
||||||
if (sl === slLast) return
|
const sl = $scroller[0].scrollLeft
|
||||||
slLast = sl
|
if (sl === slLast) return
|
||||||
if (sl > 0) $scroller.addClass('column-fixed-pin')
|
slLast = sl
|
||||||
else $scroller.removeClass('column-fixed-pin')
|
if (sl > 0) $scroller.addClass('column-fixed-pin')
|
||||||
})
|
else $scroller.removeClass('column-fixed-pin')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
const that = this
|
const that = this
|
||||||
$scroller.find('th .split').draggable({
|
$scroller.find('th .split').draggable({
|
||||||
|
|
Loading…
Reference in a new issue