diff --git a/cli/build.zsh b/cli/build.zsh index 8f5a94f..531a9e2 100644 --- a/cli/build.zsh +++ b/cli/build.zsh @@ -14,6 +14,7 @@ deno bundle ui/cast/bind.ts ../ui/cast/bind.js mkdir ../ui/index cp ui/ismism.css ../ui/ cp ui/index/index.html ../ui/index/index.html +deno bundle ui/index/bind.ts ../ui/index/bind.js cd .. mkdir ui/json diff --git a/ismism.ts/ui/index/bind.ts b/ismism.ts/ui/index/bind.ts new file mode 100644 index 0000000..a990488 --- /dev/null +++ b/ismism.ts/ui/index/bind.ts @@ -0,0 +1,25 @@ +function template( + id: string +): DocumentFragment { + const temp = document.getElementById(id) as HTMLTemplateElement + return temp.content.cloneNode(true) as DocumentFragment +} + +function etag( + el: HTMLElement, + tags: string[], + count = false +) { + el.innerHTML = "" + const a = template("tag") + const n = a.querySelector(".tag-name") as HTMLSpanElement + const c = a.querySelector(".tag-count") as HTMLSpanElement + if (!count) c.parentNode?.removeChild(c) + for (const t of tags) { + n.innerText = t + if (count) c.innerText = `${99}` + el.appendChild(a.cloneNode(true)) + } +} + +etag(document.querySelector("div.title>.tag")!, ["全部", "1232", "然后"], true) diff --git a/ismism.ts/ui/index/index.html b/ismism.ts/ui/index/index.html index e14da5f..6fbd532 100644 --- a/ismism.ts/ui/index/index.html +++ b/ismism.ts/ui/index/index.html @@ -9,12 +9,16 @@ + + -
-

h1 is here

-

h2 is here

-

h3 is here

-
+
+ +

主义主义 活动公示

+ +
+
+
main is here

@@ -56,3 +60,7 @@ footer is here + + + + diff --git a/ismism.ts/ui/ismism.css b/ismism.ts/ui/ismism.css index e07ebc2..97678f0 100644 --- a/ismism.ts/ui/ismism.css +++ b/ismism.ts/ui/ismism.css @@ -81,11 +81,14 @@ code { font-size: 1em; } -header { +div.title { padding-top: 32px; padding-bottom: 16px; min-width: var(--w-min); max-width: var(--w-max); + text-align: center; + margin-left: auto; + margin-right: auto; } div.main { @@ -97,19 +100,18 @@ div.main { article { margin: 16px; + padding: 8px 16px; background: var(--white); box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19); } article>section { - padding: 0.01em 16px; - margin: 10px 0; + margin: 0; } footer { padding: 32px 16px; margin-top: 16px; color: var(--gray); - background: var(--darkgray); text-align: center; }