Browse Source

feat: add table sort

main
Inhji Y. 8 months ago
parent
commit
a378af9f13
  1. 33
      assets/css/_tablesort.scss
  2. 1
      assets/css/app.scss
  3. 6
      assets/js/app.js
  4. 13
      assets/package-lock.json
  5. 3
      assets/package.json

33
assets/css/_tablesort.scss

@ -0,0 +1,33 @@
th[role=columnheader]:not(.no-sort) {
cursor: pointer;
}
th[role=columnheader]:not(.no-sort):after {
content: '';
float: right;
margin-top: 7px;
border-width: 0 4px 4px;
border-style: solid;
border-color: #404040 transparent;
visibility: hidden;
opacity: 0;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
th[aria-sort=ascending]:not(.no-sort):after {
border-bottom: none;
border-width: 4px 4px 0;
}
th[aria-sort]:not(.no-sort):after {
visibility: visible;
opacity: 0.4;
}
th[role=columnheader]:not(.no-sort):hover:after {
visibility: visible;
opacity: 1;
}

1
assets/css/app.scss

@ -66,6 +66,7 @@ $border-base: #666;
@import "./markdown";
@import "./navigation";
@import "./forms";
@import "./tablesort";
/* === Base === */

6
assets/js/app.js

@ -17,6 +17,7 @@ import Prism from 'prismjs'
import {Socket} from "phoenix"
import NProgress from "nprogress"
import {LiveSocket} from "phoenix_live_view"
import TableSort from "tablesort"
const handledKeys = ["p"]
@ -57,5 +58,10 @@ if (document.querySelector(element)) {
})
}
const tables = "table"
document.querySelectorAll(tables).forEach(table => {
new TableSort(table)
})
Prism.highlightAll();

13
assets/package-lock.json

@ -13,7 +13,8 @@
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html",
"phoenix_live_view": "file:../deps/phoenix_live_view",
"prismjs": "^1.23.0"
"prismjs": "^1.23.0",
"tablesort": "^5.2.1"
},
"devDependencies": {
"@babel/core": "^7.x",
@ -7146,6 +7147,11 @@
"mkdirp": "bin/cmd.js"
}
},
"node_modules/tablesort": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/tablesort/-/tablesort-5.2.1.tgz",
"integrity": "sha512-AmNSrtzyba5Bd+Fm8oJJj/xS2bj5acoHEsDHxER2/4Tzo+5noPORpEsSLT9dI15X2MIuXlNnj+BBQcpMsoeTXQ=="
},
"node_modules/tapable": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.0.tgz",
@ -13353,6 +13359,11 @@
}
}
},
"tablesort": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/tablesort/-/tablesort-5.2.1.tgz",
"integrity": "sha512-AmNSrtzyba5Bd+Fm8oJJj/xS2bj5acoHEsDHxER2/4Tzo+5noPORpEsSLT9dI15X2MIuXlNnj+BBQcpMsoeTXQ=="
},
"tapable": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.0.tgz",

3
assets/package.json

@ -13,7 +13,8 @@
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html",
"phoenix_live_view": "file:../deps/phoenix_live_view",
"prismjs": "^1.23.0"
"prismjs": "^1.23.0",
"tablesort": "^5.2.1"
},
"devDependencies": {
"@babel/core": "^7.x",

Loading…
Cancel
Save