Format size with bytes

static/css/page_history.css

@@ -0,0 +1,210 @@
+#page-history {
+	container-type: inline-size;
+}
+
+/* View when two columns doesn't fit on screen. */
+@container (width < 1100px) {
+	n2-pagehistory {
+		grid-template-columns: 1fr minmax(300px, 900px) 1fr !important;
+
+		.column-2 {
+			grid-column: 2 / 3 !important;
+		}
+	}
+}
+
+/* View when not even one column with well on screen */
+/* Node name is placed on a separate row. */
+@container (width < 500px) {
+	.el-nodes {
+		grid-template-columns: min-content minmax(min-content, max-content) 1fr !important;
+		background-color: unset !important;
+		border: unset !important;
+		gap: unset !important;
+
+		.el-index {
+			border-top-left-radius: 6px;
+			border-left: 1px solid var(--line-color);
+		}
+
+		.el-index, .el-updated, .el-size {
+			border-top: 1px solid var(--line-color);
+		}
+
+		.el-size {
+			text-align: right;
+			border-right: 1px solid var(--line-color);
+			border-top-right-radius: 6px;
+			padding-right: 8px !important;
+		}
+
+		.el-name {
+			grid-column: 1 / -1;
+			padding-bottom: 8px;
+			padding-top: 0px;
+			border-bottom: 1px solid var(--line-color);
+			border-left: 1px solid var(--line-color);
+			border-right: 1px solid var(--line-color);
+			border-bottom-left-radius: 6px;
+			border-bottom-right-radius: 6px;
+			margin-bottom: 16px;
+		}
+
+		n2-pagehistorynode > * {
+			padding-left: 8px !important;
+			padding-right: 0px !important;
+		}
+	}
+}
+
+n2-pagehistory {
+	display: grid;
+	grid-template-rows: min-content min-content min-content;
+	grid-template-columns: 1fr minmax(600px, 800px) minmax(400px, 900px) 1fr;
+	grid-gap: 0px 32px;
+
+	.column-1 {
+		grid-column: 2 / 3;
+	}
+
+	.column-2 {
+		grid-column: 3 / 4;
+		max-width: 900px;
+
+		.group {
+			background-color: #fff;
+		}
+	}
+
+	.back,
+	.node-name {
+		grid-column: 2 / 4;
+		display: grid;
+		grid-template-columns: min-content 1fr;
+		grid-gap: 8px;
+		align-items: center;
+	}
+
+	.group-label {
+		font-weight: bold;
+		background-color: #444;
+		color: #fff;
+		padding: 8px 32px;
+		display: inline-block;
+		margin-left: 32px;
+		transform: translateY(14px);
+		border-radius: 6px;
+	}
+
+	.group {
+		border: 1px solid #ccc;
+		padding: 32px;
+		margin-bottom: 32px;
+		border-radius: 8px;
+		background-color: #fafafa;
+
+		box-shadow:
+			rgba(0, 0, 0, 0.4) 0px 2px 4px,
+			rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
+			rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+	}
+
+	.el-stats {
+		margin-bottom: 16px;
+		display: grid;
+		grid-template-columns: min-content 1fr;
+		grid-gap: 8px 12px;
+		white-space: nowrap;
+	}
+
+	.el-fetch-history-progress {
+		margin-top: 16px;
+	}
+
+	.el-back-image,
+	.el-back-text {
+		cursor: pointer;
+	}
+
+	.el-node-name {
+		margin-left: 8px;
+	}
+
+	.el-nodes {
+		grid-column: 1 / -1;
+
+		display: grid;
+		grid-template-columns: min-content minmax(min-content, max-content) min-content 1fr;
+
+		background-color: var(--line-color);
+		gap: 1px;
+		border: 1px solid var(--line-color);
+
+		n2-pagehistorynode>* {
+			padding: 8px 12px;
+			background-color: #fff;
+			white-space: nowrap;
+		}
+
+		n2-pagehistorynode {
+
+			&.selected .el-index:after {
+				position: absolute;
+				left: -20px;
+
+				content: '>';
+				color: var(--color1);
+				font-weight: bold;
+				margin-right: 8px;
+			}
+
+			.el-index {
+				position: relative;
+				text-align: right;
+			}
+
+			.el-updated {
+				white-space: initial;
+			}
+
+			.el-date {
+				white-space: nowrap;
+				font-weight: bold;
+			}
+
+			.el-time {
+				white-space: nowrap;
+				color: #555;
+			}
+
+			.el-name {
+				white-space: initial;
+				/*overflow-wrap: anywhere;*/
+				word-break: break-all;
+				color: var(--color1);
+			}
+		}
+	}
+
+	.el-pagination {
+		grid-column: 1 / -1;
+		margin-top: 16px;
+
+		display: grid;
+		grid-template-columns: repeat(3, min-content);
+		grid-gap: 16px;
+		align-items: center;
+		white-space: nowrap;
+		user-select: none;
+
+		.el-prev,
+		.el-next {
+			font-weight: bold;
+			cursor: pointer;
+			border: 1px solid #aaa;
+			background-color: #eee;
+			padding: 8px 16px;
+			border-radius: 4px;
+		}
+	}
+}

static/js/app.mjs

@@ -51,8 +51,7 @@ export class App {
 				document.getElementById('node-content')?.focus()
 		})
 
-		// XXX - _mbus.dispatch('SHOW_PAGE', { page: 'node' })
+		_mbus.dispatch('SHOW_PAGE', { page: 'node' })
-		_mbus.dispatch('SHOW_PAGE', { page: 'history' })
 
 		window._sync = new Sync()
 

static/js/page_history.mjs

@@ -294,7 +294,7 @@ class N2PageHistoryNode extends CustomHTMLElement {
 		this.elIndex.innerText = this.index
 		this.elDate.innerText = date
 		this.elTime.innerText = time
-		this.elSize.innerText = this.node.get('Content').length
+		this.elSize.innerText = this.formatSize(this.node.get('Content').length)
 		this.elName.innerText = this.node.get('Name')
 	}// }}}
 	formatSize(s) {// {{{