UI: адаптив, журнал, спиннеры; docs: README и api_routes

- Навигация: выезжающее меню при узком экране (nav-mobile.js) - Журнал: карточки <620px, компактная пагинация, время в две строки <920px - Создание кластера: оверлей загрузки, инкрементальное обновление таблицы заданий - Документация: полноэкранный спиннер при загрузке и навигации - Главная: масштабирование CTA, статистика 2 колонки <520px, донаты перенос <710px - README: env.example, новые фичи UI, автор в конце файла - api_routes: маршрут /cluster-create, спиннеры, шаблоны; автор в конце - env.example: автор перенесён в конец файла
2026-04-05 00:18:19 +03:00
parent 4b703801e1
commit f0b24c8901
12 changed files with 2426 additions and 173 deletions
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -28,6 +28,7 @@
  </script>
  <link rel="stylesheet" href="/static/style.css" />
  <script src="/static/js/theme.js" defer></script>
+  <script src="/static/js/nav-mobile.js" defer></script>
  {% block head_extra %}{% endblock %}
 </head>
 <body
@@ -52,8 +53,50 @@
        />
        <span class="nav-title">{{ app_title }}</span>
      </a>
-      {# Один ряд flex: Панель, Документация, API, тема — общий align-items: center #}
-      <nav class="nav-links top-nav-actions" aria-label="Разделы и оформление">
+      {# При ширине < 920px — «гамбургер»; панель #top-nav-drawer справа (nav-mobile.js). #}
+      <button
+        type="button"
+        class="nav-menu-toggle"
+        id="nav-menu-toggle"
+        aria-expanded="false"
+        aria-controls="top-nav-drawer"
+        aria-label="Открыть меню разделов"
+      >
+        <span class="nav-menu-toggle__bars" aria-hidden="true">
+          <span class="nav-menu-toggle__bar"></span>
+          <span class="nav-menu-toggle__bar"></span>
+          <span class="nav-menu-toggle__bar"></span>
+        </span>
+      </button>
+      <div
+        class="nav-menu-backdrop"
+        id="nav-menu-backdrop"
+        hidden
+        tabindex="-1"
+        aria-hidden="true"
+      ></div>
+      {# Один ряд flex (десктоп): пилюли, API, тема; на мобильных — содержимое в выезжающей панели #}
+      <nav class="nav-links top-nav-actions" id="top-nav-drawer" aria-label="Разделы и оформление">
+        {# Шапка панели только на узких экранах (CSS); кнопка дублирует закрытие с «гамбургера». #}
+        <div class="nav-drawer-header">
+          <span class="nav-drawer-title">Меню</span>
+          <button
+            type="button"
+            class="nav-drawer-close"
+            id="nav-drawer-close"
+            aria-label="Закрыть меню"
+          >
+            <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false">
+              <path
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                d="M6 6l12 12M18 6L6 18"
+              />
+            </svg>
+          </button>
+        </div>
        {# Прокрутка только у пилюль: overflow-x на nav обрезал бы выпадающее меню API (position: absolute). #}
        <div class="nav-links-scroll">
          <a href="/" class="nav-link nav-pill{% if nav_active|default('') == 'panel' %} nav-pill--active{% endif %}">Панель</a>
--- a/app/templates/cluster_create.html
+++ b/app/templates/cluster_create.html
@@ -2,6 +2,8 @@
   Автор: Сергей Антропов — https://devops.org.ru #}
 {% extends "base.html" %}

+{% block body_extra_class %} dashboard-create-loading{% endblock %}
+
 {% block body_attrs %}data-dashboard-mode="create"{% endblock %}

 {% block footer %}
@@ -14,10 +16,25 @@
 {% endblock %}

 {% block content %}
+<div
+  id="create-page-loading-overlay"
+  class="page-loading-overlay"
+  role="status"
+  aria-live="polite"
+  aria-busy="true"
+  aria-label="Загрузка страницы создания кластера"
+>
+  <div class="page-loading-backdrop" aria-hidden="true"></div>
+  <div class="page-loading-center">
+    <span class="spinner page-loading-spinner" aria-hidden="true"></span>
+    <span class="page-loading-label">Загрузка страницы…</span>
+  </div>
+</div>
+
 <section class="card hero-panel cluster-create-hero" aria-labelledby="create-hero-title">
  <h1 class="page-title" id="create-hero-title">Создание кластера</h1>
  <p class="muted page-lead">
-    Укажите имя, версию образа kindest/node и число worker-нод. Операция выполняется в фоне; ход смотрите в журнале ниже.
+    Укажите имя, версию образа kindest/node и число worker-нод. Операция выполняется в фоне.<br>Ход смотрите в журнале ниже.
  </p>
 </section>

--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -36,9 +36,10 @@
    <div class="cta-hero-inner">
      <h1 class="page-title" id="cta-hero-title">Создать кластер</h1>
      <p class="muted page-lead cta-hero-lead">
-        Список кластеров, сводка по узлам и действия — на странице <a href="/clusters">Кластеры</a>. Данные там обновляются автоматически.
+        Список кластеров, сводка по узлам и действия — на странице <a href="/clusters">Кластеры</a>.
      </p>
-      <a href="/cluster-create" class="btn btn-cta-large">Перейти к форме создания</a>
+      <p></p>
+      <a href="/cluster-create" class="btn btn-cta-large">Перейти к созданию кластера</a>
    </div>
  </section>

--- a/app/templates/documentation.html
+++ b/app/templates/documentation.html
@@ -1,22 +1,39 @@
-{# Документация: README и app/docs/*.md через API + marked + DOMPurify (vendor, без CDN).
-   Автор: Сергей Антропов — https://devops.org.ru #}
+{# Документация: README и app/docs/*.md через API + marked + DOMPurify (vendor, без CDN). #}
 {% extends "base.html" %}

 {# Ширина колонки как у панели: .app-main max-width 72rem (секция «Ресурсы узлов (сводка)» и др.). #}

 {% block page_title %}Документация{% endblock %}

+{% block body_extra_class %} documentation-page-loading{% endblock %}
+
 {% block content %}
+<div
+  id="documentation-page-loading-overlay"
+  class="page-loading-overlay"
+  role="status"
+  aria-live="polite"
+  aria-busy="true"
+  aria-label="Загрузка документации"
+>
+  <div class="page-loading-backdrop" aria-hidden="true"></div>
+  <div class="page-loading-center">
+    <span class="spinner page-loading-spinner" aria-hidden="true"></span>
+    <span class="page-loading-label">Загрузка документации…</span>
+  </div>
+</div>
+
 <nav class="doc-breadcrumbs" id="doc-breadcrumbs" aria-label="Навигация по документации">
  <ol class="doc-breadcrumbs__list" id="doc-breadcrumbs-list"></ol>
 </nav>
 <div class="readme-doc-shell" id="readme-doc-shell">
-  <p id="readme-loading" class="muted readme-doc-loading">Загрузка…</p>
  <p id="readme-error" class="msg hidden" role="alert"></p>
  <div id="readme-doc-root" class="readme-doc-page" hidden></div>
 </div>
 {% endblock %}

+{# Автор: Сергей Антропов — https://devops.org.ru (в конце текста README и app/docs/api_routes.md). #}
+
 {% block scripts %}
 <script src="/static/js/vendor/marked.min.js"></script>
 <script src="/static/js/vendor/purify.min.js"></script>