728/ismism
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui-index #15

Browse Source
This commit is contained in:
728
2022-11-25 13:43:32 +08:00
parent 11177054a3
commit bc487bcb72
4 changed files with 45 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
cli/build.zsh
View File

@ -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

25
ismism.ts/ui/index/bind.ts Normal file
View File

@ -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)

18
ismism.ts/ui/index/index.html
View File

@ -9,12 +9,16 @@
<link rel="stylesheet" href="/ismism.css">
</head>
<template id="tag"><a><span class="tag-name">tag</span><span class="tag-count">99</span></a></template>
<body>
<header>
<h1>h1 is here</h1>
<h2>h2 is here</h2>
<h3>h3 is here</h3>
</header>
<div class="title">
<a href="">
<h1><b>主义主义 <span style="color: var(--red)">活动</span>公示</b></h1>
</a>
<hr>
<div class="tag"></div>
</div>
<div class="main">
main is here
<p>
@ -56,3 +60,7 @@
footer is here
</footer>
</body>
<script src="./bind.js"></script>
</html>

10
ismism.ts/ui/ismism.css
View File

@ -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;
}