hestiaHUGO: re-designed debugging console

Since the current debugging console is overloading the page rendering, we should re-design it. Hence, let's do this. This patch redesigns debugging console to a style-resilient dialog design to prevent it from distrubing the page layout and designs in hestiaHUGO/ directory. Signed-off-by: (Holloway) Chew, Kean Ho <kean.ho.chew@zoralab.com>
ZORALab · May 3, 2023 · dc0cb95 · dc0cb95
1 parent 6add858
commit dc0cb95
Show file tree

Hide file tree

Showing 2 changed files with 205 additions and 9 deletions.
diff --git a/hestiaHUGO/layouts/partials/Hestia/functions/render/html/debug/Init b/hestiaHUGO/layouts/partials/Hestia/functions/render/html/debug/Init
@@ -21,13 +21,181 @@ specific language governing permissions and limitations under the License.
 
 
 {{- if .IsServerMode }}
-	<aside id="hestia-debug-console">
-		<h2>Hestia Debug Interface</h2>
-		<p>
-			All HestiaHUGO debug interfaces in one place.
-		</p>
-
-		{{- partial "Hestia/functions/render/html/debug/_page" . -}}
-		{{- partial "Hestia/functions/render/html/debug/_thumbnails" . -}}
-	</aside>
+	<button onclick='document.getElementById("hestia-debug-console").showModal()' style='
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		gap: 0;
+
+		position: absolute;
+		right: 5%;
+		bottom: 5%;
+
+		box-sizing: border-box;
+		min-width: 50pt;
+		min-height: 50pt;
+
+		margin: 0;
+		padding: 10pt;
+
+		border: none;
+		border-radius: 50%;
+
+		font-family: sans-serif;
+		font-size: 25pt;
+
+		color: #FFF;
+		background: linear-gradient(144deg, #AF40FF,
+						#5B42F3 50%,
+						#00DDEB);
+		box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px,
+				rgba(0, 0, 0, 0.23) 0px 3px 6px;
+	'>⚒</button>
+	<dialog id="hestia-debug-console" style='
+		/* NOTE: DO NOT set display for dialog object - reserved by browser. */
+		--hestia-debugger-bg: linear-gradient(144deg, #AF40FF,
+								#5B42F3 50%,
+								#00DDEB);
+		--hestia-debugger-color: #FFF;
+		--hestia-debugger-color-inverted: #5B42F3;
+		--hestia-debugger-font-family: san-serif;
+
+		margin: auto;
+		padding: 0;
+
+		width: 90%;
+		height: 90%;
+		box-sizing: border-box;
+
+		border: none;
+		border-radius: 10px;
+
+		font-family: sans-serif;
+		background: var(--hestia-debugger-bg);
+	'><div style='
+		display: grid;
+		grid: "header" max-content
+			"content" auto /
+			100%;
+		justify-items: stretch;
+		align-items: stretch;
+		gap: 0;
+		overflow: auto;
+
+		margin: 0;
+		padding: 10pt;
+
+		width: 100%;
+		height: 100%;
+		box-sizing: border-box;
+
+		border: none;
+		border-radius: 0;
+
+		background: transparent;
+	'>
+		<div style='
+			grid-area: header;
+
+			display: grid;
+			grid: "title close" 100% / auto 25pt;
+			justify-items: stretch;
+			align-items: stretch;
+			gap: 0;
+			overflow: auto;
+
+			box-sizing: border-box;
+
+			width: 100%;
+
+			background: transparent;
+		'>
+			<h2 style='
+				grid-area: title;
+
+				display: flex;
+				justify-content: flex-start;
+				align-items: flex-start;
+				overflow: revert;
+
+				border: none;
+				border-radius: 0;
+				margin: 0;
+				padding: 0;
+
+				box-sizing: border-box;
+
+				font-family: var(--hestia-debugger-font-family);
+				font-size: 20pt;
+				text-align: left;
+
+				color: var(--hestia-debugger-color);
+				background: transparent;
+			'>
+				⚒ ZORALab's Hestia Debugger
+			</h2>
+			<form method='dialog' style='
+				grid-area: close;
+
+				display: flex;
+				justify-content: center;
+				align-items: flex-start;
+				overflow: auto;
+
+				border: none;
+				border-radius: 0;
+				margin: 0;
+				padding: 0;
+
+				min-width: 100%;
+				width: 100%;
+				max-width: 100%;
+				min-height: 100%;
+				height: 100%;
+				max-height: 100%;
+
+				color: inherit;
+				background: transparent;
+
+				box-sizing: border-box;
+			'><button style='
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				overflow: revert;
+
+				box-sizing: border-box;
+				width: 25pt;
+				height: 25pt;
+
+				margin: 0;
+
+				border: 0;
+				border-radius: 8px;
+
+				font-family: var(--hestia-debugger-font-family);
+				font-size: 20pt;
+				line-height: 1em;
+				text-decoration: none;
+				white-space: nowrap;
+				cursor: pointer;
+
+				color: var(--hestia-debugger-color-inverted);
+				background: var(--hestia-debugger-color);
+				box-shadow: rgba(255, 255, 255, 0.16) 0px 3px 6px,
+						rgba(255, 255, 255, 0.23) 0px 3px 6px;
+			'>✕</button></form>
+		</div>
+		<div style='
+			grid-area: content;
+
+			width: 100%;
+			overflow: auto;
+
+			color: inherit;
+			background: transparent;
+		'>
+			{{- partial "Hestia/functions/render/html/debug/_content" . -}}
+		</div>
+	</div></dialog>
 {{- end -}}
diff --git a/hestiaHUGO/layouts/partials/Hestia/functions/render/html/debug/_content b/hestiaHUGO/layouts/partials/Hestia/functions/render/html/debug/_content
@@ -0,0 +1,28 @@
+{{- /*
+Copyright 2023 "Holloway" Chew, Kean Ho <kean.ho.chew@zoralab.com>
+Copyright 2023 ZORALab Enterprise <tech@zoralab.com>
+
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at
+
+                 http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed
+under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. See the License for the
+specific language governing permissions and limitations under the License.
+*/ -}}
+{{- /* INPUT PARAMETERS */ -}}
+{{- /* . = Page data in Hestia Structure */ -}}
+
+<p style='
+	font-family: var(--hestia-debugger-font-family);
+	font-size: 12pt;
+
+	color: var(--hestia-debugger-color);
+	background: transparent;
+'>
+	Placeholder text here
+</p>