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
@@ -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>