made the expander less annoying to use

salient-lang · Apr 14, 2024 · 8c460a8 · 8c460a8
1 parent 5b97e34
commit 8c460a8
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 24 deletions.
diff --git a/builder/page.ts b/builder/page.ts
@@ -19,9 +19,9 @@ export async function CreatePage(toolbar: string, path: string) {
 	<body>
 		${toolbar}
 		<div class="dashboard">
-			<details class="entry" style="view-transition-name: ${Reroute(path).replaceAll("/", "_")}" data-src="${Reroute(path)}" onclick="AnimateDetailsChange(event);">`
+			<div class="entry" style="view-transition-name: ${Reroute(path).replaceAll("/", "_")}" data-src="${Reroute(path)}">`
 				+ html
-			+`</details>
+			+`</div>
 		</div>
 	</body>
 </html>`;
@@ -55,8 +55,10 @@ function RenderPage(path: string, data: string) {
 	const pathFrag = path.split("/");
 	const { summary, details } = IngestPage(data);
 
-	const html = `<summary>`
+	const html = `<div class="expander" onclick="Expander(event)">`
 		+ `<span class="comment">${pathFrag.slice(2, -1).join("/")}</span>`
+		+ `<div class="close" onclick="CloseEntry(event, this);">Close</div>`
+	+ `</div>`
 		+ `<div>`
 			+ `<div class="signature">`
 				+ `<span class="name">${Path2Name(pathFrag[pathFrag.length-1])}</span> `
@@ -78,10 +80,8 @@ function RenderPage(path: string, data: string) {
 					) : "}")
 			+ `</div>`
 		+ `</div>`
-		+ `<div class="close" onclick="CloseEntry(event, this);">Close</div>`
 		+ `<div style="white-space: pre-wrap;">${summary.text}</div>`
-	+ `</summary>`
-	+ `<div style="white-space: pre-wrap;">${details}</div>`;
+	+ `<div class="details">${details}</div>`;
 
 	return { html, type: summary.type };
 }

diff --git a/client/index.ts b/client/index.ts
@@ -88,8 +88,7 @@ async function OpenFolder(href: string) {
 function Save() {
 	const pages = [ ...document.body.querySelectorAll(".entry") ]
 		.map(x => x.getAttribute("data-src"))
-		.filter(x => x)
-		.reverse();
+		.filter(x => x);
 
 	localStorage.setItem("open-pages", pages.join("\n"));
 }
@@ -98,9 +97,10 @@ function Save() {
 
 
 
-async function AnimateDetailsChange(ev: MouseEvent) {
-	const elm = ev.currentTarget;
-	if (!(elm instanceof HTMLDetailsElement)) return;
+async function Expander(ev: MouseEvent) {
+	if (!(ev.target instanceof HTMLElement)) return;
+	const elm = ev.target.closest(".entry");
+	if (!elm) return;
 
 	ev.stopImmediatePropagation();
 	ev.stopPropagation();
@@ -111,7 +111,7 @@ async function AnimateDetailsChange(ev: MouseEvent) {
 	if (elm.hasAttribute("open")) elm.removeAttribute("open");
 	else elm.setAttribute("open", "true");
 }
-(window as any).AnimateDetailsChange = AnimateDetailsChange;
+(window as any).Expander = Expander;
 
 async function CloseEntry(ev: MouseEvent, closeBtn: HTMLDivElement) {
 	ev.stopImmediatePropagation();
@@ -132,7 +132,7 @@ async function CloseEntry(ev: MouseEvent, closeBtn: HTMLDivElement) {
 async function Startup() {
 	document.body.addEventListener("click", AnyClick);
 
-	const pages = (localStorage.getItem('open-pages') || "").split("\n");
+	const pages = (localStorage.getItem('open-pages') || "").split("\n").reverse();
 	for (const page of pages) {
 		await OpenEntry(page);
 	}

diff --git a/public/main.css b/public/main.css
@@ -69,22 +69,42 @@ a[folder][parent] + a[folder]:not([parent]) {
 	position: relative;
 }
 
-.entry .close {
-	position: absolute;
-	top: 0;
-	right: 0;
+.entry .expander {
+	display: flex;
+	gap: 5px;
 
-	font-size: 0.85em;
 	user-select: none;
 	cursor: pointer;
 }
+.entry .expander::before {
+	content: "+ ";
+}
+.entry[open] .expander::before {
+	content: "- ";
+}
+
+.entry .expander .comment {
+	flex-grow: 1;
+}
+
+.entry .close {
+	font-size: 0.85em;
+}
+
+.entry .details {
+	display: none;
+	white-space: pre-wrap;
+}
+.entry[open] .details {
+	display: block;
+}
 
 .entry .context {
 	font-style: italic;
 	display: inline-block;
 }
 
-details.entry .signature {
+.entry .signature {
 	display: inline-block;
 	padding: 5px 10px;
 	margin: 5px 0px;
@@ -97,26 +117,26 @@ details.entry .signature {
 	border-radius: 5px;
 }
 
-details.entry .cluster {
+.entry .cluster {
 	display: inline-flex;
 	flex-direction: row;
 	gap: 0.6em;
 }
 
-details.entry .cluster .comment {
+.entry .cluster .comment {
 	display: none;
 }
 
-details.entry[open] .cluster {
+.entry[open] .cluster {
 	display: flex;
 	flex-direction: column;
 	gap: 0;
 }
-details.entry[open] .cluster .indent {
+.entry[open] .cluster .indent {
 	margin-left: 1em;
 }
 
-details.entry[open] .cluster .comment {
+.entry[open] .cluster .comment {
 	display: inline-block;
 }