ui recent close #15

This commit is contained in:
728
2022-11-28 13:11:41 +08:00
parent 1eef12fb73
commit 9249c80928
2 changed files with 45 additions and 7 deletions

View File

@ -175,11 +175,30 @@ function erec(
efund(d[2], fund)
}
function erecent(
el: HTMLElement,
rec: Rec
) {
const [t, [
bwork, bworker, bfund, dwork, dworker, dfund,
]] = template("recent", [
"tab.work", "tab.worker", "tab.fund", "rec.work", "rec.worker", "rec.fund",
])
erec([bwork, bworker, bfund], [dwork, dworker, dfund], rec)
el.appendChild(t)
}
function eagenda(
el: HTMLElement,
agenda: Agenda[]
agenda: Agenda[],
recent?: Rec,
) {
el.innerHTML = ""
if (recent) erecent(el, recent)
for (const {
_id, name, tag, utc, dat, fund, budget, expense, detail, goal
} of agenda) {
@ -317,14 +336,11 @@ window.addEventListener("hashchange", () => {
etag(document.querySelector(".title div.tag")!, tags_all, tags_count)
const main = document.getElementById("main")!
switch (hash[0]) {
case undefined: eagenda(main, agenda, recent); break
case "u": json(hash).then(u => euser(main, parseInt(hash.substring(1)), u)); break
case "s": json(hash).then(s => esoc(main, parseInt(hash.substring(1)), s)); break
case "a": eagenda(main, agenda.filter(a =>
a._id === parseInt(hash.substring(1))
)); break
default: eagenda(main, agenda.filter(a =>
hash === "" || a.tag.includes(hash as Tag)
)); break
case "a": eagenda(main, agenda.filter(a => a._id === parseInt(hash.substring(1)))); break
default: eagenda(main, agenda.filter(a => a.tag.includes(hash as Tag))); break
}
})

View File

@ -400,6 +400,10 @@
margin-top: 10px;
}
div.rec-tab.recent {
margin-top: 0;
}
div.rec-tab>button {
padding: 8px;
color: var(--black);
@ -472,6 +476,12 @@
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
section.recent {
padding: 8px 16px;
margin: auto;
max-width: 640px;
}
article {
margin: 16px;
padding: 8px 16px;
@ -546,6 +556,18 @@
</div>
</template>
<template id="video"><a href="" target="_blank" rel="noopener" class="video">title</a></template>
<template id="recent">
<section class="recent">
<div class="rec-tab recent">
<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>
</template>
<template id="agenda">
<article>
<section>