devel #221
6 changed files with 64 additions and 26 deletions
|
@ -5,6 +5,7 @@
|
||||||
@import "./reset.css";
|
@import "./reset.css";
|
||||||
@import "./gruvbox.css";
|
@import "./gruvbox.css";
|
||||||
@import "./lightbox.css";
|
@import "./lightbox.css";
|
||||||
|
@import "./tablesort.css";
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
:root {
|
:root {
|
||||||
|
@ -78,8 +79,8 @@
|
||||||
@apply prose-invert;
|
@apply prose-invert;
|
||||||
}
|
}
|
||||||
|
|
||||||
.prose a {
|
.prose a, a.underline-link {
|
||||||
@apply underline decoration-2 decoration-theme-primary hover:bg-theme-primary hover:text-theme-background transition;
|
@apply underline decoration-1 decoration-theme-primary hover:decoration-theme-base transition;
|
||||||
}
|
}
|
||||||
|
|
||||||
.prose a[href^="http://"], .prose a[href^="https://"] {
|
.prose a[href^="http://"], .prose a[href^="https://"] {
|
||||||
|
@ -115,7 +116,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.prose img {
|
.prose img {
|
||||||
@apply rounded;
|
@apply rounded-lg;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -143,9 +144,3 @@
|
||||||
@apply inline-block text-theme-base px-3 py-2.5 border border-theme-background1 hover:bg-theme-background1 rounded transition font-semibold;
|
@apply inline-block text-theme-base px-3 py-2.5 border border-theme-background1 hover:bg-theme-background1 rounded transition font-semibold;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@layer utilities {
|
|
||||||
a.underline-link {
|
|
||||||
@apply underline decoration-2 decoration-theme-primary hover:decoration-theme-secondary transition;
|
|
||||||
}
|
|
||||||
}
|
|
33
assets/css/tablesort.css
Normal file
33
assets/css/tablesort.css
Normal file
|
@ -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: rgb(var(--color-primary)) 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,29 +1,32 @@
|
||||||
// Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
|
// Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
|
||||||
import "phoenix_html"
|
import 'phoenix_html'
|
||||||
|
|
||||||
import hljs from "highlight.js"
|
import hljs from 'highlight.js'
|
||||||
import GLightbox from 'glightbox'
|
import GLightbox from 'glightbox'
|
||||||
|
import Tablesort from 'tablesort'
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', (event) => {
|
document.addEventListener('DOMContentLoaded', (event) => {
|
||||||
document.querySelectorAll('pre code').forEach((el) => {
|
document.querySelectorAll('.prose pre code').forEach((el) =>
|
||||||
hljs.highlightElement(el);
|
hljs.highlightElement(el))
|
||||||
});
|
|
||||||
|
document.querySelectorAll('.prose table').forEach(el =>
|
||||||
|
new Tablesort(el))
|
||||||
});
|
});
|
||||||
|
|
||||||
document
|
document
|
||||||
.querySelector("#dark-mode-toggle")
|
.querySelector('#dark-mode-toggle')
|
||||||
.addEventListener("click", (e) => {
|
.addEventListener('click', (e) => {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
const data = document.documentElement.dataset
|
const data = document.documentElement.dataset
|
||||||
if (data["mode"] && data["mode"] == "dark") {
|
if (data['mode'] && data['mode'] == 'dark') {
|
||||||
delete data["mode"]
|
delete data['mode']
|
||||||
window.localStorage.removeItem("theme")
|
window.localStorage.removeItem('theme')
|
||||||
} else {
|
} else {
|
||||||
data["mode"] = "dark"
|
data['mode'] = 'dark'
|
||||||
window.localStorage.setItem("theme", "dark")
|
window.localStorage.setItem('theme', 'dark')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
GLightbox({ selector: ".lightbox" })
|
GLightbox({ selector: '.lightbox' })
|
||||||
|
|
||||||
window.hljs = hljs
|
window.hljs = hljs
|
8
assets/package-lock.json
generated
8
assets/package-lock.json
generated
|
@ -11,7 +11,8 @@
|
||||||
"kbar": "^0.1.0-beta.40",
|
"kbar": "^0.1.0-beta.40",
|
||||||
"phoenix": "file:../deps/phoenix",
|
"phoenix": "file:../deps/phoenix",
|
||||||
"phoenix_html": "file:../deps/phoenix_html",
|
"phoenix_html": "file:../deps/phoenix_html",
|
||||||
"phoenix_live_view": "file:../deps/phoenix_live_view"
|
"phoenix_live_view": "file:../deps/phoenix_live_view",
|
||||||
|
"tablesort": "^5.3.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"esbuild": "^0.18.0"
|
"esbuild": "^0.18.0"
|
||||||
|
@ -645,6 +646,11 @@
|
||||||
"loose-envify": "^1.1.0"
|
"loose-envify": "^1.1.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/tablesort": {
|
||||||
|
"version": "5.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/tablesort/-/tablesort-5.3.0.tgz",
|
||||||
|
"integrity": "sha512-WkfcZBHsp47gVH9CBHG0ZXopriG01IA87arGrchvIe868d4RiXVvoYPS1zMq9IdW05kBs5iGsqxTABqLyWonbg=="
|
||||||
|
},
|
||||||
"node_modules/tiny-invariant": {
|
"node_modules/tiny-invariant": {
|
||||||
"version": "1.3.1",
|
"version": "1.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
|
||||||
|
|
|
@ -9,7 +9,8 @@
|
||||||
"kbar": "^0.1.0-beta.40",
|
"kbar": "^0.1.0-beta.40",
|
||||||
"phoenix": "file:../deps/phoenix",
|
"phoenix": "file:../deps/phoenix",
|
||||||
"phoenix_html": "file:../deps/phoenix_html",
|
"phoenix_html": "file:../deps/phoenix_html",
|
||||||
"phoenix_live_view": "file:../deps/phoenix_live_view"
|
"phoenix_live_view": "file:../deps/phoenix_live_view",
|
||||||
|
"tablesort": "^5.3.0"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": "^18.0",
|
"react": "^18.0",
|
||||||
|
|
|
@ -131,8 +131,8 @@ defmodule ChiyaWeb.PublicComponents do
|
||||||
href={~p"/note/#{note.slug}"}
|
href={~p"/note/#{note.slug}"}
|
||||||
class="rounded-lg px-6 pt-4 pb-5 border border-theme-background1 hover:bg-theme-background1 transition"
|
class="rounded-lg px-6 pt-4 pb-5 border border-theme-background1 hover:bg-theme-background1 transition"
|
||||||
>
|
>
|
||||||
<header>
|
<header class="flex flex-row items-center">
|
||||||
<span class="text-theme-secondary text-lg font-semibold leading-8">
|
<span class="text-theme-primary text-lg font-semibold leading-8 flex-1">
|
||||||
<%= note.name %>
|
<%= note.name %>
|
||||||
</span>
|
</span>
|
||||||
<span class="text-theme-base/75 text-sm">
|
<span class="text-theme-base/75 text-sm">
|
||||||
|
|
Loading…
Reference in a new issue