mirror/Part-DB.Part-DB-server
1
0
Fork 1
mirror of https://github.com/Part-DB/Part-DB-server.git synced 2025-06-20 17:15:51 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make the checkboxes of datatables look like regular bootstrap checkboxes

Browse source
This commit is contained in:
Jan Böhmer 2024-03-02 01:28:15 +01:00
parent b7ce91e2d8
commit f5d53dc305
3 changed files with 74 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

5
assets/controllers/elements/datatables/datatables_controller.js
View file

@ -24,7 +24,10 @@ import 'datatables.net-bs5/css/dataTables.bootstrap5.css'
import 'datatables.net-buttons-bs5/css/buttons.bootstrap5.css'
import 'datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.css'
import 'datatables.net-responsive-bs5/css/responsive.bootstrap5.css';
import 'datatables.net-select-bs5/css/select.bootstrap5.css';
//Use our own styles for the select extension which fit the bootstrap theme better
//import 'datatables.net-select-bs5/css/select.bootstrap5.css';
import '../../../css/components/datatables_select_bs5.css';
//JS
import 'datatables.net-bs5';

51
assets/css/app/tables.css
View file

@ -114,54 +114,3 @@ Classes for Datatables export
.export-helper{
display: none;
}
/******************************************************
* Styling for the select all checkbox in the parts table
* Should match the styling of the select checkbox
******************************************************/
table.dataTable > thead > tr > th.select-checkbox {
position: relative;
}
table.dataTable > thead > tr > th.select-checkbox:before,
table.dataTable > thead > tr > th.select-checkbox:after {
display: block;
position: absolute;
top: 0.9em;
left: 50%;
width: 1em !important;
height: 1em !important;
box-sizing: border-box;
}
table.dataTable > thead > tr > th.select-checkbox:before {
content: " ";
margin-top: -5px;
margin-left: -6px;
border: 2px solid var(--bs-tertiary-color);
border-radius: 3px;
}
table.dataTable > tbody > tr > td.select-checkbox:before, table.dataTable > tbody > tr > th.select-checkbox:before {
border: 2px solid var(--bs-tertiary-color) !important;
font-weight: bold;
}
table.dataTable > tbody > tr > td.select-checkbox:before, table.dataTable > tbody > tr > td.select-checkbox:after, table.dataTable > tbody > tr > th.select-checkbox:before, table.dataTable > tbody > tr > th.select-checkbox:after {
width: 1em !important;
height: 1em !important;
}
table.dataTable > thead > tr.selected > th.select-checkbox:after {
content: "✓";
font-size: 20px;
font-weight: bold;
margin-top: -20px;
margin-left: -6px;
text-align: center;
/*text-shadow: 1px 1px #B0BED9, -1px -1px #B0BED9, 1px -1px #B0BED9, -1px 1px #B0BED9; */
}
table.dataTable.compact > thead > tr > th.select-checkbox:before {
margin-top: -12px;
}
table.dataTable.compact > thead > tr.selected > th.select-checkbox:after {
margin-top: -16px;
}

69
assets/css/components/datatables_select_bs5.css Normal file
View file

@ -0,0 +1,69 @@
/******************************************************************************************
* This styles the checkboxes of the select extension exactly like the ones in bootstrap 5
******************************************************************************************/
table.dataTable > tbody > tr > .selected {
background-color: var(--bs-primary-bg-subtle) !important;
color: white;
}
table.dataTable > tbody > tr > .dt-select {
text-align: center;
vertical-align: middle;
}
table.dataTable > thead > tr > .dt-select {
text-align: center;
}
table.dataTable input.dt-select-checkbox {
--bs-form-check-bg: var(--bs-body-bg);
flex-shrink: 0;
width: 1em;
height: 1em;
margin-top: 0.25em;
vertical-align: top;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: var(--bs-form-check-bg);
background-image: var(--bs-form-check-bg-image);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border: var(--bs-border-width) solid var(--bs-border-color);
-webkit-print-color-adjust: exact;
color-adjust: exact;
print-color-adjust: exact;
border-radius: 0.25em;
}
table.dataTable input.dt-select-checkbox:checked {
background-color: rgb(var(--bs-secondary-rgb));
border-color: rgb(var(--bs-secondary-rgb));
--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
table.dataTable input.dt-select-checkbox:indeterminate {
background-color: rgb(var(--bs-secondary-rgb));
border-color: rgb(var(--bs-secondary-rgb));
--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}
div.dt-container span.select-info,
div.dt-container span.select-item {
margin-left: 0.5em;
}
@media screen and (max-width: 640px) {
div.dt-container span.select-info,
div.dt-container span.select-item {
margin-left: 0;
display: block;
}
}
table.dataTable.table-sm tbody td.select-checkbox::before {
margin-top: -9px;
}