ui tab #15
This commit is contained in:
728
@ -69,20 +69,47 @@ function egoal(
|
||||
}
|
||||
}
|
||||
|
||||
function erec(
|
||||
b: [HTMLElement, HTMLElement, HTMLElement],
|
||||
d: [HTMLElement, HTMLElement, HTMLElement],
|
||||
{ work, worker, fund }: Agenda["rec"]
|
||||
) {
|
||||
const toggle = (btn: HTMLElement, div: HTMLElement) => {
|
||||
const on = btn.classList.contains("darkgray")
|
||||
b.forEach(b => b.classList.remove("darkgray"))
|
||||
d.forEach(d => d.style.display = "none")
|
||||
if (!on) {
|
||||
btn.classList.add("darkgray")
|
||||
div.style.display = "block"
|
||||
div.scrollTop = div.scrollHeight
|
||||
}
|
||||
}
|
||||
const count = [work, worker, fund]
|
||||
b.forEach((btn, n) => {
|
||||
btn.getElementsByTagName("span")[0].innerText = `${count[n]}`
|
||||
d[n].style.display = "none"
|
||||
btn.addEventListener("click", () => toggle(btn, d[n]))
|
||||
})
|
||||
}
|
||||
|
||||
function eagenda(
|
||||
el: HTMLElement,
|
||||
agenda: Agenda[]
|
||||
) {
|
||||
el.innerHTML = ""
|
||||
for (const { _id, name, tag, utc, dat, fund, budget, expense, detail, goal } of agenda) {
|
||||
for (const {
|
||||
_id, name, tag, utc, dat, fund, budget, expense, detail, goal, rec
|
||||
} of agenda) {
|
||||
const [t, [
|
||||
cidname, cid, cname, ctag, cdate,
|
||||
cphoto, cphoto_title, cphoto_prev, cphoto_next, cphoto_nbr, cphoto_total, cphoto_img,
|
||||
cbar, cfund, cexpense, cdetail, cgoal,
|
||||
bwork, bworker, bfund, dwork, dworker, dfund,
|
||||
]] = template("agenda", [
|
||||
"idname", "id", "name", "tag", "date",
|
||||
"photo", "photo-title", "photo-prev", "photo-next", "photo-nbr", "photo-total", "photo-img",
|
||||
"bar", "fund", "expense", "detail", "goal"
|
||||
"bar", "fund", "expense", "detail", "goal",
|
||||
"tab.work", "tab.worker", "tab.fund", "rec.work", "rec.worker", "rec.fund",
|
||||
]);
|
||||
|
||||
(cidname as HTMLLinkElement).href = `#a${_id}`
|
||||
@ -125,6 +152,8 @@ function eagenda(
|
||||
(cdetail as HTMLLinkElement).href = detail
|
||||
egoal(cgoal, goal)
|
||||
|
||||
erec([bwork, bworker, bfund], [dwork, dworker, dfund], rec)
|
||||
|
||||
el.appendChild(t)
|
||||
}
|
||||
}
|
||||
|
||||
@ -132,7 +132,8 @@
|
||||
}
|
||||
|
||||
button.photo-prev,
|
||||
button.photo-next {
|
||||
button.photo-next,
|
||||
button.tab {
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -143,7 +144,8 @@
|
||||
}
|
||||
|
||||
button.photo-prev:focus,
|
||||
button.photo-next:focus {
|
||||
button.photo-next:focus,
|
||||
button.tab:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@ -156,7 +158,8 @@
|
||||
|
||||
a.tag:hover,
|
||||
button.photo-prev:hover,
|
||||
button.photo-next:hover {
|
||||
button.photo-next:hover,
|
||||
button.tab:hover {
|
||||
color: var(--white) !important;
|
||||
border-color: var(--darkgray) !important;
|
||||
background: var(--darkgray) !important;
|
||||
@ -348,6 +351,80 @@
|
||||
background: radial-gradient(closest-side, var(--white) 66%, var(--gray) 66%);
|
||||
}
|
||||
|
||||
div.rec-tab {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
div.rec-tab>button {
|
||||
padding: 8px;
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
div.rec-tab>button>span {
|
||||
background: var(--black);
|
||||
color: var(--white);
|
||||
padding: 0.1em 8px;
|
||||
}
|
||||
|
||||
div.rec {
|
||||
background: var(--lightgray);
|
||||
border-radius: 16px;
|
||||
padding: 16px 8px;
|
||||
margin-top: 16px;
|
||||
max-height: 480px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.log>div {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
div.rec>div>div:nth-child(1) {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
color: var(--white);
|
||||
background: var(--gray);
|
||||
border-radius: 50%;
|
||||
font-size: 24px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
div.rec>div>div:nth-child(2) {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
margin-left: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
div.rec>div>div:nth-child(2)>div:nth-child(1) {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
div.rec>div>div:nth-child(2)>div:nth-child(2) {
|
||||
font-size: var(--small);
|
||||
font-style: italic;
|
||||
color: var(--gray);
|
||||
}
|
||||
|
||||
div.rec>div>div:nth-child(2)>div:nth-child(3) {
|
||||
min-width: 120px;
|
||||
margin-top: 6px;
|
||||
padding: 0.5em 16px;
|
||||
background-color: var(--lightgray);
|
||||
border-radius: 0 8px 8px 8px;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
article {
|
||||
margin: 16px;
|
||||
padding: 8px 16px;
|
||||
@ -393,6 +470,19 @@
|
||||
<span class="name">目标</span>
|
||||
</div>
|
||||
</template>
|
||||
<template id="rec">
|
||||
<div>
|
||||
<div class="initial">u</div>
|
||||
<div>
|
||||
<div>
|
||||
<span class="uname">uname</span>
|
||||
<span class="aname">aname</span>
|
||||
</div>
|
||||
<div class="date">timestamp</div>
|
||||
<div class="msg">msg</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template id="agenda">
|
||||
<article>
|
||||
<section>
|
||||
@ -433,6 +523,16 @@
|
||||
<div><br>当前目标：</div>
|
||||
<div class="goal"></div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="rec-tab">
|
||||
<button class="tab work"><span>123</span> 条活动日志 ❯</button>
|
||||
<button class="tab worker"><span>123</span> 名参与者 ❯</button>
|
||||
<button class="tab fund"><span>123</span> 位支持者 ❯</button>
|
||||
</div>
|
||||
<div class="rec work"></div>
|
||||
<div class="rec worker"></div>
|
||||
<div class="rec fund"></div>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user