style(webui): unify UI across all pages to solid modern system
tokens instead of hardcoded, v9 everywhere, dialog guarded, confirm->dialog, empty unified, health out of nav, swagger icons/topbar, gutters, th uppercase, content 1280 centered.
This commit is contained in:
+47
-2
@@ -19,7 +19,30 @@ function renderSpec(spec) {
|
||||
const methodTemplate = document.getElementById('api-method-template');
|
||||
root.innerHTML = '';
|
||||
|
||||
Object.entries(spec.paths || {}).forEach(([path, methods]) => {
|
||||
const paths = Object.entries(spec.paths || {});
|
||||
if (!paths.length) {
|
||||
const section = document.createElement('section');
|
||||
section.className = 'panel';
|
||||
const header = document.createElement('div');
|
||||
header.className = 'panel-header';
|
||||
const title = document.createElement('h2');
|
||||
title.textContent = 'No endpoints';
|
||||
header.appendChild(title);
|
||||
const body = document.createElement('div');
|
||||
body.className = 'panel-body';
|
||||
const empty = document.createElement('div');
|
||||
empty.className = 'empty-state';
|
||||
const text = document.createElement('p');
|
||||
text.className = 'muted';
|
||||
text.textContent = 'The OpenAPI spec contains no paths.';
|
||||
empty.appendChild(text);
|
||||
body.appendChild(empty);
|
||||
section.append(header, body);
|
||||
root.appendChild(section);
|
||||
return;
|
||||
}
|
||||
|
||||
paths.forEach(([path, methods]) => {
|
||||
const section = sectionTemplate.content.firstElementChild.cloneNode(true);
|
||||
section.querySelector('.api-path').textContent = path;
|
||||
const methodsRoot = section.querySelector('.api-methods');
|
||||
@@ -53,6 +76,28 @@ loadSpec()
|
||||
docsEl.textContent = '';
|
||||
const section = document.createElement('section');
|
||||
section.className = 'panel';
|
||||
section.textContent = error.message;
|
||||
const header = document.createElement('div');
|
||||
header.className = 'panel-header';
|
||||
const title = document.createElement('h2');
|
||||
title.textContent = 'Failed to load API spec';
|
||||
header.appendChild(title);
|
||||
const body = document.createElement('div');
|
||||
body.className = 'panel-body';
|
||||
const empty = document.createElement('div');
|
||||
empty.className = 'empty-state';
|
||||
const text = document.createElement('p');
|
||||
text.className = 'muted';
|
||||
text.textContent = error.message;
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'empty-actions';
|
||||
const retry = document.createElement('button');
|
||||
retry.className = 'button';
|
||||
retry.type = 'button';
|
||||
retry.textContent = 'Retry';
|
||||
retry.addEventListener('click', () => window.location.reload());
|
||||
actions.appendChild(retry);
|
||||
empty.append(text, actions);
|
||||
body.appendChild(empty);
|
||||
section.append(header, body);
|
||||
docsEl.appendChild(section);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user