pikvm/pikvm#1207: Draw UI tips via meta.yaml

3 files changed, 41 insertions, 11 deletions

diff --git a/web/share/css/main.css b/web/share/css/main.css
index cd8b6342..8a074aa7 100644
--- a/web/share/css/main.css
+++ b/web/share/css/main.css
@@ -297,10 +297,10 @@ ul.footer {
 ul.footer li {
 	padding: 0 10px;
 }
-ul.footer li.footer-left {
+ul.footer li.left {
 	float: left;
 }
-ul.footer li.footer-right {
+ul.footer li.right {
 	float: right;
 }
 ul.footer li a {
diff --git a/web/share/css/navbar.css b/web/share/css/navbar.css
index eb125f9a..af704add 100644
--- a/web/share/css/navbar.css
+++ b/web/share/css/navbar.css
@@ -198,3 +198,33 @@ ul#navbar li div.menu img.sign {
 	margin-right: 10px;
 	height: 20px;
 }
+
+ul.navbar-bg-tips {
+	list-style-type: none;
+	top: 50px;
+	position: fixed;
+	width: 100%;
+	padding: 0;
+	font-size: 0.7em;
+	line-height: 1.5em;
+	color: var(--cs-page-obscure-fg);
+	z-index: -10;
+}
+ul.navbar-bg-tips li {
+	padding: 0 10px;
+	max-width: 20%;
+}
+ul.navbar-bg-tips li pre {
+	word-break: break-word;
+	white-space: break-spaces;
+	text-align: justify;
+}
+ul.navbar-bg-tips li.left {
+	float: left;
+}
+ul.navbar-bg-tips li.right {
+	float: right;
+}
+ul.navbar-bg-tips li a {
+	color: var(--cs-page-obscure-fg);
+}
diff --git a/web/share/js/kvm/session.js b/web/share/js/kvm/session.js
index d3bd7f94..27b18b21 100644
--- a/web/share/js/kvm/session.js
+++ b/web/share/js/kvm/session.js
@@ -78,15 +78,8 @@ export function Session() {
 
 	var __setInfoStateMeta = function(state) {
 		if (state !== null) {
-			let text = tools.escape(JSON.stringify(state, undefined, 4)).replace(/ /g, "&nbsp;").replace(/\n/g, "<br>");
-			$("about-meta").innerHTML = `
-				<span class="code-comment">// The PiKVM metadata.<br>
-				// You can get this JSON using handle <a target="_blank" href="/api/info?fields=meta">/api/info?fields=meta</a>.<br>
-				// In the standard configuration this data<br>
-				// is specified in the file /etc/kvmd/meta.yaml.</span><br>
-				<br>
-				${text}
-			`;
+			$("kvmd-meta-json").innerText = JSON.stringify(state, undefined, 4);
+
 			if (state.server && state.server.host) {
 				$("kvmd-meta-server-host").innerText = `Server: ${state.server.host}`;
 				document.title = `PiKVM Session: ${state.server.host}`;
@@ -95,6 +88,13 @@ export function Session() {
 				document.title = "PiKVM Session";
 			}
 
+			if (state.tips && state.tips.left) {
+				$("kvmd-meta-tips-left").innerText = `${state.tips.left}`;
+			}
+			if (state.tips && state.tips.right) {
+				$("kvmd-meta-tips-right").innerText = `${state.tips.right}`;
+			}
+
 			// Don't use this option, it may be removed in any time
 			if (state.web && state.web.confirm_session_exit === false) {
 				window.onbeforeunload = null; // See main.js