Refine admin editor around static content
This commit is contained in:
dcconstructions
+64
-29
@@ -7,14 +7,21 @@
|
||||
<link rel="stylesheet" href="./admin.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="admin-backdrop" aria-hidden="true"></div>
|
||||
<main class="admin-shell">
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-head">
|
||||
<div>
|
||||
<div class="eyebrow">NODE.DC</div>
|
||||
<h1>Блоки страницы</h1>
|
||||
<a class="back-link" href="/" target="_blank" aria-label="Открыть сайт">
|
||||
<span>←</span>
|
||||
<span>Открыть сайт</span>
|
||||
</a>
|
||||
<div class="workspace-card">
|
||||
<div class="workspace-logo">ND</div>
|
||||
<div>
|
||||
<div class="workspace-name">NODE.DC</div>
|
||||
<div class="workspace-role">Администратор сайта</div>
|
||||
</div>
|
||||
</div>
|
||||
<button id="reload" class="icon-btn" type="button" title="Перезагрузить данные">↻</button>
|
||||
</div>
|
||||
<div id="regions" class="regions"></div>
|
||||
</aside>
|
||||
@@ -22,47 +29,65 @@
|
||||
<section class="editor">
|
||||
<header class="editor-head">
|
||||
<div>
|
||||
<div id="selected-region" class="eyebrow">Выберите блок</div>
|
||||
<h1>Настройки сайта</h1>
|
||||
<div id="selected-region" class="breadcrumb">NODE.DC / Выберите блок</div>
|
||||
<h2 id="selected-title">Контентный слой</h2>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<a class="ghost-btn" href="/" target="_blank">Открыть сайт</a>
|
||||
<button id="render" class="ghost-btn" type="button">Собрать index.html</button>
|
||||
<button id="reload" class="icon-btn" type="button" title="Перезагрузить данные">↻</button>
|
||||
<button id="save" class="primary-btn" type="button">Сохранить JSON</button>
|
||||
<button id="render" class="ghost-btn" type="button">Собрать index.html</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="empty-state" class="empty-state">
|
||||
Слева выберите блок. Сейчас это первый этап: блоки можно включать, выключать,
|
||||
дублировать и менять порядок внутри своего DOM-региона.
|
||||
<div class="empty-icon">ND</div>
|
||||
<div>
|
||||
<h3>Выберите блок слева</h3>
|
||||
<p>Статика, hero, форма и секции страницы разделены на рабочие группы. Сначала редактируем typed-поля, сырой JSON оставлен как технический fallback.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form id="block-form" class="block-form hidden">
|
||||
<div class="field-grid">
|
||||
<label>
|
||||
ID блока
|
||||
<section class="settings-card block-meta-card">
|
||||
<div class="card-head">
|
||||
<div>
|
||||
<div class="section-kicker">Идентификатор</div>
|
||||
<h3>Служебные параметры</h3>
|
||||
</div>
|
||||
<label class="toggle-row">
|
||||
<input id="block-enabled" name="enabled" type="checkbox" />
|
||||
<span>В рендере</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="field-grid">
|
||||
<label class="field-control">
|
||||
<span>ID блока</span>
|
||||
<input id="block-id" name="id" type="text" autocomplete="off" />
|
||||
</label>
|
||||
<label>
|
||||
Название в админке
|
||||
<label class="field-control">
|
||||
<span>Название в админке</span>
|
||||
<input id="block-label" name="adminLabel" type="text" autocomplete="off" />
|
||||
</label>
|
||||
<label>
|
||||
Шаблон
|
||||
<label class="field-control">
|
||||
<span>Шаблон / тип</span>
|
||||
<input id="block-template" name="template" type="text" autocomplete="off" readonly />
|
||||
</label>
|
||||
<label>
|
||||
Anchor
|
||||
<label class="field-control">
|
||||
<span>Anchor</span>
|
||||
<input id="block-anchor" name="anchor" type="text" autocomplete="off" />
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<label class="toggle-row">
|
||||
<input id="block-enabled" name="enabled" type="checkbox" />
|
||||
<span>Блок включён в рендер</span>
|
||||
</label>
|
||||
|
||||
<div class="button-row">
|
||||
<section class="settings-card structure-card">
|
||||
<div class="card-head">
|
||||
<div>
|
||||
<div class="section-kicker">Порядок</div>
|
||||
<h3>Операции с блоком</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-row">
|
||||
<button id="move-up" class="ghost-btn" type="button">Вверх</button>
|
||||
<button id="move-down" class="ghost-btn" type="button">Вниз</button>
|
||||
<button id="duplicate" class="ghost-btn" type="button">Дублировать</button>
|
||||
@@ -70,16 +95,26 @@
|
||||
<button id="paste-after" class="ghost-btn" type="button">Вставить после</button>
|
||||
<button id="delete-block" class="danger-btn" type="button">Удалить</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-panel">
|
||||
<div class="section-title">Контент блока</div>
|
||||
<div class="panel-head">
|
||||
<div>
|
||||
<div class="section-kicker">Контент</div>
|
||||
<h3>Редактируемые поля</h3>
|
||||
</div>
|
||||
<span class="panel-note">Поля сгруппированы по смысловым подблокам верстки.</span>
|
||||
</div>
|
||||
<div id="content-fields" class="content-fields"></div>
|
||||
</section>
|
||||
|
||||
<label class="json-field">
|
||||
JSON выбранного блока
|
||||
<textarea id="block-json" spellcheck="false"></textarea>
|
||||
</label>
|
||||
<details class="json-details">
|
||||
<summary>JSON выбранного блока</summary>
|
||||
<label class="json-field">
|
||||
<span>Техническое представление</span>
|
||||
<textarea id="block-json" spellcheck="false"></textarea>
|
||||
</label>
|
||||
</details>
|
||||
</form>
|
||||
|
||||
<pre id="status" class="status"></pre>
|
||||
|
||||
Reference in New Issue
Block a user