From abe2da3ebf7a00f7452effb48054380a19164c9b Mon Sep 17 00:00:00 2001
From: 728 <septem.duo.octo@outlook.com>
Date: Sun, 27 Nov 2022 18:45:47 +0800
Subject: [PATCH] ui bar #15
---
ismism.ts/ui/index/bind.ts | 22 +++++-
ismism.ts/ui/index/index.html | 125 +++++++++++++++++++++++++++++++++-
2 files changed, 142 insertions(+), 5 deletions(-)
diff --git a/ismism.ts/ui/index/bind.ts b/ismism.ts/ui/index/bind.ts
index 0a55664..6b79aef 100644
--- a/ismism.ts/ui/index/bind.ts
+++ b/ismism.ts/ui/index/bind.ts
@@ -54,13 +54,15 @@ function eagenda(
agenda: Agenda[]
) {
el.innerHTML = ""
- for (const { _id, name, tag, utc, dat } of agenda) {
+ for (const { _id, name, tag, utc, dat, fund, budget, expense, detail } 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,
]] = template("agenda", [
"idname", "id", "name", "tag", "date",
- "photo", "photo-title", "photo-prev", "photo-next", "photo-nbr", "photo-total", "photo-img"
+ "photo", "photo-title", "photo-prev", "photo-next", "photo-nbr", "photo-total", "photo-img",
+ "bar", "fund", "expense", "detail",
]);
(cidname as HTMLLinkElement).href = `#a${_id}`
@@ -86,6 +88,22 @@ function eagenda(
cphoto_prev.addEventListener("click", () => nimg(-1))
cphoto_next.addEventListener("click", () => nimg(1))
}
+
+ cbar.style.setProperty("--fund", `${fund}`)
+ cbar.style.setProperty("--budget", `${budget}`)
+ cbar.style.setProperty("--expense", `${expense}`)
+ {
+ const [sfund, spct, sbudget] = [...cfund.children] as HTMLSpanElement[]
+ sfund.innerText = `${fund}`
+ spct.innerText = `${budget == 0 ? 0 : (fund / budget * 100).toFixed(0)}%`
+ sbudget.innerText = `${budget}`
+ } {
+ const [sexpense, spct] = [...cexpense.children] as HTMLSpanElement[]
+ sexpense.innerText = `${expense}`
+ spct.innerText = `${budget == 0 ? 0 : (expense / budget * 100).toFixed(0)}%`
+ }
+ (cdetail as HTMLLinkElement).href = detail
+
el.appendChild(t)
}
}
diff --git a/ismism.ts/ui/index/index.html b/ismism.ts/ui/index/index.html
index aa2ade0..eeb1fba 100644
--- a/ismism.ts/ui/index/index.html
+++ b/ismism.ts/ui/index/index.html
@@ -100,7 +100,8 @@
font-weight: bold;
}
- a.video {
+ a.video,
+ a.detail {
text-decoration: underline;
text-underline-offset: 4px;
}
@@ -141,8 +142,15 @@
cursor: pointer;
}
+ button.photo-prev:focus,
+ button.photo-next:focus {
+ outline: none;
+ }
+
@media (hover: hover) {
- a.video:hover {
+
+ a.video:hover,
+ a.detail:hover {
color: var(--amber);
}
@@ -226,6 +234,75 @@
}
}
+ div.bar {
+ --fund: 7000;
+ --budget: 7000;
+ --expense: 4000;
+ margin-top: 10px;
+ }
+
+ div.bar>div.label {
+ overflow: auto;
+ }
+
+ div.bar>div.label>*:nth-child(1) {
+ float: left;
+ }
+
+ div.bar>div.label>*:nth-child(2) {
+ float: right;
+ }
+
+ div.bar>div:nth-child(2) {
+ margin: 5px 0;
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
+ }
+
+ div.bar>div:nth-child(2)>div {
+ position: relative;
+ width: 100%;
+ color: var(--black);
+ background: var(--lightgray);
+ font-family: monospace;
+ overflow: hidden;
+ }
+
+ div.bar>div:nth-child(2)>div>span {
+ display: inline-block;
+ position: absolute;
+ padding: 0.25em 8px;
+ left: 0;
+ top: 0;
+ width: 100%;
+ font-size: var(--normal);
+ margin: -1px 0;
+ min-width: 1ch;
+ }
+
+ div.bar>div:nth-child(2)>div>span:nth-child(1) {
+ position: relative;
+ background: var(--gray);
+ }
+
+ div.bar>div:nth-child(2)>div.fund>span:nth-child(1) {
+ width: calc(var(--fund) / var(--budget) * 100%);
+ }
+
+ div.bar>div:nth-child(2)>div.expense>span:nth-child(1) {
+ width: calc(var(--expense) / var(--budget) * 100%);
+ }
+
+ div.bar>div:nth-child(2)>div>span:nth-child(2) {
+ text-align: center;
+ background: none;
+ }
+
+ div.bar>div:nth-child(2)>div>span:nth-child(3) {
+ text-align: right;
+ background: none;
+ left: -16px;
+ }
+
article {
margin: 16px;
padding: 8px 16px;
@@ -245,6 +322,23 @@
text-align: center;
}
+ .animate-scale {
+ position: relative;
+ animation: animateopacity 0.4s;
+ }
+
+ @keyframes animateopacity {
+ from {
+ transform: scale(0.25);
+ opacity: 0;
+ }
+
+ to {
+ transform: scale(1);
+ opacity: 1;
+ }
+ }
+
</style>
<template id="tag"><a class="tag"><span class="name">tag</span><span class="count">99</span></a></template>
@@ -255,7 +349,7 @@
<div class="tag">tag</div>
<div class="date">date</div>
</section>
- <section>
+ <section class="animate-scale">
<div class="photo">
<span class="photo-title">photo title</span>
<span><button class="photo-prev">上一张</button> / <button class="photo-next">下一张</button></span>
@@ -263,6 +357,31 @@
</div>
<img class="photo-img">
</section>
+ <section class="animate-scale">
+ <div class="bar">
+ <div class="label">
+ <span>收到支持</span>
+ <span>当前预算</span>
+ </div>
+ <div>
+ <div class="fund">
+ <span>123456</span>
+ <span>50%</span>
+ <span>123456</span>
+ </div>
+ <div class="expense">
+ <span>123456</span>
+ <span>50%</span>
+ </div>
+ </div>
+ <div class="label">
+ <span>当前支出</span>
+ <a target="_blank" rel="noopener" href="" class="detail">历史明细</a>
+ </div>
+ </div>
+ <div><br>当前目标：</div>
+ <div class="circle"></div>
+ </section>
</article>
</template>