ui idname #15

2022-11-27 11:12:50 +08:00
parent a02dc7516e
commit 7ba32faee9
3 changed files with 69 additions and 4 deletions
--- a/ismism.ts/src/date.ts
+++ b/ismism.ts/src/date.ts
@ -0,0 +1,10 @@
+export function utc_short(
+	utc: number
+) {
+	return new Date(utc).toLocaleString("zh-CN", { dateStyle: "short", timeStyle: "short" }).replaceAll("/", "-")
+}
+export function utc_medium(
+	utc: number
+) {
+	return new Date(utc).toLocaleString("zh-CN", { dateStyle: "medium", timeStyle: "short" })
+}
--- a/ismism.ts/ui/index/bind.ts
+++ b/ismism.ts/ui/index/bind.ts
@ -1,4 +1,7 @@
 // deno-lint-ignore-file no-window-prefix
+import { Agenda } from "../../../cli/json.ts"
+import { utc_medium, utc_short } from "../../src/date.ts"
+
 let hash = ""

 function template(
@ -29,9 +32,22 @@ function etag(
 	})
 }

+function eagenda(
+	el: HTMLElement,
+	{ _id, name }: Agenda
+) {
+	el.innerHTML = ""
+	const [t, [a, c, s, tag, date]] = template("agenda", ["idname", "id", "name", "tag", "date"])
+	c.innerText = (a as HTMLLinkElement).href = `#${_id}`
+	s.innerText = name
+	etag(tag, ["进行中", "然后", "1232"])
+	date.innerText = `公示时间: ${utc_medium(Date.now())}\n更新时间：${utc_short(Date.now())}`
+	el.appendChild(t)
+}
+
 window.addEventListener("hashchange", () => {
 	hash = decodeURI(window.location.hash).substring(1)
 	etag(document.querySelector(".title div.tag")!, ["", "1232", "然后"], [3, 5, 6])
-	etag(document.querySelector("article div.tag")!, ["1232", "然后"])
+	eagenda(document.getElementById("main")!, { _id: 3, name: "标题标题" } as Agenda)
 })
 window.dispatchEvent(new Event("hashchange"))
--- a/ismism.ts/ui/index/index.html
+++ b/ismism.ts/ui/index/index.html
@ -24,7 +24,7 @@
 		--large: 18px;
 		--w-max: 1400px;
 		--w-min: 320px;
-		--w-max-main: 960px;
+		--w-max-main: 1080px;
 	}

 	.darkgray {
@ -84,6 +84,23 @@
 		text-decoration: none;
 	}

+	a.idname {
+		display: block;
+		font-size: 24px;
+	}
+
+	a.idname code.id {
+		padding: 0.1em 8px;
+		border-radius: 4px;
+		color: var(--lightgray);
+		background: var(--darkgray);
+		text-align: center;
+	}
+
+	a.idname span.name {
+		font-weight: bold;
+	}
+
 	a.video {
 		text-decoration: underline;
 		text-underline-offset: 4px;
@ -137,13 +154,25 @@
 		text-align: center;
 	}

-	div.main {
+	div#main {
 		min-width: var(--w-min);
 		max-width: var(--w-max-main);
 		margin: 0 auto;
 		padding: 0;
 	}

+	div.tag {
+		margin: 10px 0;
+	}
+
+	div.date {
+		color: var(--darkgray);
+		font-size: var(--small);
+		font-family: monospace;
+		font-style: italic;
+		margin: 10px 0;
+	}
+
 	article {
 		margin: 16px;
 		padding: 8px 16px;
@ -165,6 +194,15 @@
 </style>

 <template id="tag"><a class="tag"><span class="name">tag</span><span class="count">99</span></a></template>
+<template id="agenda">
+	<article>
+		<section>
+			<a class="idname"><code class="id">id</code> <span class="name">name</span></a>
+			<div class="tag">tag</div>
+			<div class="date">date</div>
+		</section>
+	</article>
+</template>

 <body>
 	<div class="title">
@ -174,7 +212,8 @@
 		<hr>
 		<div class="tag"></div>
 	</div>
-	<div class="main">
+	<div id="main"></div>
+	<div>
 		main is here
 		<p>
 			p is here