yrtria/azerothcore-armory
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Activity Actions

feat(datatables): add styling to paging buttons

Browse source
This commit is contained in:
Axel Cocat 2022-03-05 22:32:02 +01:00
parent 03eb4e2a51
commit 4c051e316c
4 changed files with 22 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "azerothcore-armory", "name": "azerothcore-armory",
"version": "0.9.0", "version": "0.9.1",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "azerothcore-armory", "name": "azerothcore-armory",
"version": "0.9.0", "version": "0.9.1",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@supercharge/promise-pool": "^2.1.0", "@supercharge/promise-pool": "^2.1.0",

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "azerothcore-armory", "name": "azerothcore-armory",
"version": "0.9.0", "version": "0.9.1",
"description": "", "description": "",
"scripts": { "scripts": {
"build": "tsc -p tsconfig.json", "build": "tsc -p tsconfig.json",

21
static/css/datatables.css
View file

@ -17,6 +17,7 @@
.dataTables_wrapper .dataTables_length select { .dataTables_wrapper .dataTables_length select {
color: #ffffff; color: #ffffff;
} }
.dataTables_wrapper .dataTables_length select option { .dataTables_wrapper .dataTables_length select option {
color: #000000; color: #000000;
} }
@ -35,15 +36,17 @@ table.dataTable.display tbody tr:hover {
background-color: #3f3f3f; background-color: #3f3f3f;
} }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .ellipsis {
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, color: #e6e6e6;
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active { line-height: 32px;
color: #a3a3a3 !important;
} }
.dataTables_wrapper .dataTables_paginate .paginate_button, .dataTables_wrapper .dataTables_paginate .button.is-dark.disabled {
.dataTables_wrapper .dataTables_paginate { background-color: #282f2f;
color: #e6e6e6 !important; border-color: transparent;
box-shadow: none;
opacity: 0.5;
cursor: not-allowed;
} }
table.dataTable.row-border tbody th, table.dataTable.row-border tbody th,
@ -52,3 +55,7 @@ table.dataTable.display tbody th,
table.dataTable.display tbody td { table.dataTable.display tbody td {
border-top: 1px solid #222222; border-top: 1px solid #222222;
} }
.dataTables_paginate .button {
margin-right: 2px;
}

5
static/partials/datatables.hbs
View file

@ -3,3 +3,8 @@
<link rel="stylesheet" type="text/css" href="/css/datatables.css"> <link rel="stylesheet" type="text/css" href="/css/datatables.css">
<script type="application/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script> <script type="application/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script> <script type="application/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script type="application/javascript">
$.fn.dataTable.ext.classes.sPageButton = "button is-dark";
$.fn.dataTable.ext.classes.sPageButtonActive = "is-active is-outlined is-inverted";
</script>