Change these values to see the rendered output update immediately.
+
+
-
-
Rendered subject
-
+
+
+
+
+
-
Rendered HTML
-
+
+
+
+
+
-
Rendered text
-
+
+
+
+
+
+
+
+
+
+
JSON array of {"name":"...", "required":true|false}
+
+
+
+
+
+
+
+
+
+
Sample values
+
+
Change these values to see the rendered output update immediately.
+
+
+
+
Rendered subject
+
+
+
Rendered HTML
+
+
+
Rendered text
+
+
+
@@ -114,6 +133,7 @@
const previewText = document.getElementById('previewText');
const previewFrame = document.getElementById('previewHtmlFrame');
const previewStatus = document.getElementById('previewStatus');
+ const previewTab = document.getElementById('preview-tab');
if (!subjectField || !htmlField || !textField || !variablesField || !previewVariablesHost || !previewSubject || !previewText || !previewFrame || !previewStatus) {
return;
@@ -267,6 +287,9 @@
subjectField.addEventListener('input', updatePreview);
htmlField.addEventListener('input', updatePreview);
textField.addEventListener('input', updatePreview);
+ if (previewTab) {
+ previewTab.addEventListener('shown.bs.tab', updatePreview);
+ }
renderVariableInputs();
})();
diff --git a/HrynCo.NotificationService.Web/wwwroot/css/admin.css b/HrynCo.NotificationService.Web/wwwroot/css/admin.css
index 40bbb6d..f02c088 100644
--- a/HrynCo.NotificationService.Web/wwwroot/css/admin.css
+++ b/HrynCo.NotificationService.Web/wwwroot/css/admin.css
@@ -118,9 +118,10 @@ body {
.empty-state .bi { font-size: 2.5rem; opacity: .35; display: block; margin-bottom: .75rem; }
.empty-state p { font-size: .9rem; margin-bottom: 0; }
-/* ── Editor wrapper — constrains width ───────────────── */
+/* ── Editor wrapper ──────────────────────────────────── */
.editor-wrapper {
- max-width: 860px;
+ width: 100%;
+ max-width: none;
}
/* ── Editor card ──────────────────────────────────────── */
@@ -154,6 +155,26 @@ body {
border-radius: 0 0 .5rem .5rem !important;
}
+/* ── Editor tabs ─────────────────────────────────────── */
+.template-editor-tabs {
+ border-bottom-color: #dce3eb;
+}
+
+.template-editor-tabs .nav-link {
+ color: #526072;
+ font-weight: 600;
+ border-radius: .5rem .5rem 0 0;
+}
+
+.template-editor-tabs .nav-link.active {
+ color: #0d6efd;
+}
+
+/* ── Tab content ──────────────────────────────────────── */
+.tab-content {
+ min-width: 0;
+}
+
/* ── Email template preview ───────────────────────────── */
.template-preview-panel {
border: 1px solid #dce3eb;
@@ -185,9 +206,9 @@ body {
margin-top: .15rem;
}
-.template-preview-grid {
+.template-preview-body {
display: grid;
- grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
+ grid-template-columns: minmax(0, 1fr);
gap: 1rem;
padding: 1rem 1.25rem 1.25rem;
}
@@ -197,6 +218,13 @@ body {
min-width: 0;
}
+.template-preview-section-block {
+ padding: 1rem;
+ border: 1px solid #e5ebf2;
+ border-radius: .65rem;
+ background: #fafcff;
+}
+
.template-preview-section-title {
font-size: .7rem;
font-weight: 700;
@@ -207,13 +235,26 @@ body {
}
.template-preview-variables {
- display: flex;
- flex-direction: column;
- gap: .75rem;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+ gap: .75rem 1rem;
+ max-width: none;
+}
+
+.template-preview-variables > div {
+ margin-bottom: 0 !important;
+}
+
+.template-preview-variables .form-label {
+ font-size: .72rem;
+ margin-bottom: .2rem;
}
.template-preview-variables .form-control-sm {
background: #fff;
+ min-height: calc(1.5em + .45rem + 2px);
+ padding: .2rem .45rem;
+ font-size: .82rem;
}
.template-preview-subject {
@@ -248,7 +289,7 @@ body {
}
@media (max-width: 992px) {
- .template-preview-grid {
+ .template-preview-body {
grid-template-columns: 1fr;
}