Add admin block templates and drag controls

This commit is contained in:
dcconstructions
2026-06-26 03:16:12 +03:00
parent 634eaff434
commit 931ac628b4
3 changed files with 524 additions and 22 deletions
+42 -14
View File
@@ -55,7 +55,7 @@
<div class="section-kicker">NODE.DC</div>
<h1>Администрирование</h1>
</div>
<a class="admin-panel-close" href="/" target="_blank" aria-label="Открыть сайт">×</a>
<button id="add-block" class="admin-panel-close add-block-button" type="button" aria-label="Добавить блок">+</button>
<div class="workspace-card admin-panel-client-select">
<div class="workspace-logo admin-panel-client-select__icon">DC</div>
<div>
@@ -76,8 +76,8 @@
</div>
<div class="actions">
<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>
<button id="save" class="primary-btn" type="button" title="Записать текущую модель в content/pages/home.json">Сохранить модель</button>
<button id="render" class="ghost-btn" type="button" title="Сохранить модель и пересобрать публичный index.html">Обновить index.html</button>
</div>
</header>
@@ -98,7 +98,7 @@
</div>
<label class="toggle-row">
<input id="block-enabled" name="enabled" type="checkbox" />
<span>В рендере</span>
<span>Отображение</span>
</label>
</div>
<div class="field-grid">
@@ -122,20 +122,32 @@
</section>
<section class="settings-card structure-card">
<div class="card-head">
<div class="card-head structure-head">
<div>
<div class="section-kicker">Порядок</div>
<div class="section-kicker">Порядок блока</div>
<h3>Операции с блоком</h3>
</div>
<div class="button-row icon-action-row">
<button id="move-up" class="icon-action-btn" type="button" title="Поднять блок" aria-label="Поднять блок">
<span aria-hidden="true"></span>
</button>
<button id="move-down" class="icon-action-btn" type="button" title="Опустить блок" aria-label="Опустить блок">
<span aria-hidden="true"></span>
</button>
<button id="duplicate" class="icon-action-btn" type="button" title="Дублировать блок" aria-label="Дублировать блок">
<span aria-hidden="true"></span>
</button>
<button id="copy" class="icon-action-btn operation-extra" type="button" title="Копировать блок" aria-label="Копировать блок">
<span aria-hidden="true"></span>
</button>
<button id="paste-after" class="icon-action-btn operation-extra" type="button" title="Вставить после" aria-label="Вставить после">
<span aria-hidden="true"></span>
</button>
<button id="delete-block" class="icon-action-btn danger-action-btn" type="button" title="Удалить блок" aria-label="Удалить блок">
<span aria-hidden="true"></span>
</button>
</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>
<button id="copy" class="ghost-btn" type="button">Копировать</button>
<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">
@@ -161,6 +173,22 @@
<pre id="status" class="status"></pre>
</section>
</main>
<div id="template-modal" class="template-modal-layer hidden" role="dialog" aria-modal="true" aria-labelledby="template-modal-title">
<article class="template-modal">
<header class="template-modal-head">
<div>
<div class="section-kicker">Библиотека блоков</div>
<h2 id="template-modal-title">Добавить блок</h2>
<p>Выберите шаблон. Новый блок появится в конце соответствующего списка.</p>
</div>
<button id="template-modal-close" class="admin-panel-close modal-close-button" type="button" aria-label="Закрыть">×</button>
</header>
<div id="template-list" class="template-list"></div>
<footer class="template-modal-foot">
<button id="template-modal-cancel" class="ghost-btn" type="button">Отмена</button>
</footer>
</article>
</div>
<script src="./admin.js" type="module"></script>
</body>
</html>