From 358b761eb2cc125af1c73b3d3952bfcb94f98452 Mon Sep 17 00:00:00 2001 From: Maxim Dolgolyov Date: Sun, 31 May 2026 08:54:38 +0300 Subject: [PATCH] =?UTF-8?q?fix(biochem):=20=D1=81=D1=82=D0=B0=D1=82=D0=B8?= =?UTF-8?q?=D1=87=D0=BD=D1=8B=D0=B9=20subnav=20=D0=B1=D0=B5=D0=B7=20=D0=BC?= =?UTF-8?q?=D0=B8=D0=B3=D0=B0=D0=BD=D0=B8=D1=8F=20+=20=D1=80=D0=B5=D0=B4?= =?UTF-8?q?=D0=B8=D0=B7=D0=B0=D0=B9=D0=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Проблема: динамическая вставка через JS вызывала мигание (nav появлялся через ~100ms после первого пейнта). Решение: nav — статичный HTML в каждой странице, CSS — в . Активная вкладка проставлена в HTML (class bsn-active) — нет JS, нет мигания, работает с первого байта. Редизайн .biochem-subnav: - frosted glass (backdrop-filter blur 14px, rgba 0.92) - активная вкладка: фиолетовый фон-пилюля + нижняя линия 2.5px - hover: мягкий фиолетовый фон - mobile <560px: только иконки (bsn-label display:none) - overflow-x auto + scrollbar-width:none — горизонтальная прокрутка без полосы - biochem-nav.js сведён к no-op комментарию Co-Authored-By: Claude Sonnet 4.6 --- frontend/biochem-library.html | 42 +++++++++++++++- frontend/biochem-pathways.html | 42 +++++++++++++++- frontend/biochem-properties.html | 42 +++++++++++++++- frontend/biochem-reactions.html | 42 +++++++++++++++- frontend/biochem.html | 42 +++++++++++++++- frontend/js/biochem-nav.js | 83 ++------------------------------ 6 files changed, 208 insertions(+), 85 deletions(-) diff --git a/frontend/biochem-library.html b/frontend/biochem-library.html index 1fb1ddf..b2e3b6e 100644 --- a/frontend/biochem-library.html +++ b/frontend/biochem-library.html @@ -278,7 +278,44 @@ .page-header { padding: 10px; } .filters-row { padding: 8px 10px; } } - + + /* ── Biochem subnav ─────────────────────────────────────────────── */ + .biochem-subnav { + display: flex; align-items: center; gap: 2px; + padding: 0 16px; + background: rgba(255,255,255,0.92); + backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); + border-bottom: 1.5px solid rgba(15,23,42,0.07); + flex-shrink: 0; overflow-x: auto; + scrollbar-width: none; position: relative; + } + .biochem-subnav::-webkit-scrollbar { display: none; } + .biochem-subnav::after { + content: ''; position: absolute; bottom: -1px; left: 0; right: 0; + height: 1.5px; background: rgba(15,23,42,0.07); + } + .bsn-tab { + display: inline-flex; align-items: center; gap: 7px; + padding: 11px 14px; border-radius: 9px; margin: 5px 1px; + font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 600; + color: var(--text-3, #56687A); text-decoration: none; white-space: nowrap; + transition: background .15s, color .15s; position: relative; + } + .bsn-tab svg { stroke: currentColor; width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } + .bsn-tab:hover { background: rgba(155,93,229,0.08); color: #9B5DE5; } + .bsn-active { + background: rgba(155,93,229,0.10); color: #7c3aed; font-weight: 700; + } + .bsn-active::after { + content: ''; position: absolute; bottom: -5px; left: 14px; right: 14px; + height: 2.5px; border-radius: 99px; background: #9B5DE5; + } + @media (max-width: 560px) { + .biochem-subnav { padding: 0 6px; } + .bsn-tab { padding: 10px 10px; gap: 0; } + .bsn-tab .bsn-label { display: none; } + } +
@@ -286,6 +323,9 @@
+
diff --git a/frontend/biochem-pathways.html b/frontend/biochem-pathways.html index e7c0ae3..05fcc42 100644 --- a/frontend/biochem-pathways.html +++ b/frontend/biochem-pathways.html @@ -338,7 +338,44 @@ .path-chip { font-size: 0.68rem; padding: 4px 10px; } .side-panel { max-height: 45vh; } } - + + /* ── Biochem subnav ─────────────────────────────────────────────── */ + .biochem-subnav { + display: flex; align-items: center; gap: 2px; + padding: 0 16px; + background: rgba(255,255,255,0.92); + backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); + border-bottom: 1.5px solid rgba(15,23,42,0.07); + flex-shrink: 0; overflow-x: auto; + scrollbar-width: none; position: relative; + } + .biochem-subnav::-webkit-scrollbar { display: none; } + .biochem-subnav::after { + content: ''; position: absolute; bottom: -1px; left: 0; right: 0; + height: 1.5px; background: rgba(15,23,42,0.07); + } + .bsn-tab { + display: inline-flex; align-items: center; gap: 7px; + padding: 11px 14px; border-radius: 9px; margin: 5px 1px; + font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 600; + color: var(--text-3, #56687A); text-decoration: none; white-space: nowrap; + transition: background .15s, color .15s; position: relative; + } + .bsn-tab svg { stroke: currentColor; width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } + .bsn-tab:hover { background: rgba(155,93,229,0.08); color: #9B5DE5; } + .bsn-active { + background: rgba(155,93,229,0.10); color: #7c3aed; font-weight: 700; + } + .bsn-active::after { + content: ''; position: absolute; bottom: -5px; left: 14px; right: 14px; + height: 2.5px; border-radius: 99px; background: #9B5DE5; + } + @media (max-width: 560px) { + .biochem-subnav { padding: 0 6px; } + .bsn-tab { padding: 10px 10px; gap: 0; } + .bsn-tab .bsn-label { display: none; } + } +
@@ -346,6 +383,9 @@
+
diff --git a/frontend/biochem-properties.html b/frontend/biochem-properties.html index c928f5a..b17d2ef 100644 --- a/frontend/biochem-properties.html +++ b/frontend/biochem-properties.html @@ -192,7 +192,44 @@ .props-sidebar { max-height: 40vh; } .mol-card-grid { grid-template-columns: 1fr !important; } } - + + /* ── Biochem subnav ─────────────────────────────────────────────── */ + .biochem-subnav { + display: flex; align-items: center; gap: 2px; + padding: 0 16px; + background: rgba(255,255,255,0.92); + backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); + border-bottom: 1.5px solid rgba(15,23,42,0.07); + flex-shrink: 0; overflow-x: auto; + scrollbar-width: none; position: relative; + } + .biochem-subnav::-webkit-scrollbar { display: none; } + .biochem-subnav::after { + content: ''; position: absolute; bottom: -1px; left: 0; right: 0; + height: 1.5px; background: rgba(15,23,42,0.07); + } + .bsn-tab { + display: inline-flex; align-items: center; gap: 7px; + padding: 11px 14px; border-radius: 9px; margin: 5px 1px; + font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 600; + color: var(--text-3, #56687A); text-decoration: none; white-space: nowrap; + transition: background .15s, color .15s; position: relative; + } + .bsn-tab svg { stroke: currentColor; width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } + .bsn-tab:hover { background: rgba(155,93,229,0.08); color: #9B5DE5; } + .bsn-active { + background: rgba(155,93,229,0.10); color: #7c3aed; font-weight: 700; + } + .bsn-active::after { + content: ''; position: absolute; bottom: -5px; left: 14px; right: 14px; + height: 2.5px; border-radius: 99px; background: #9B5DE5; + } + @media (max-width: 560px) { + .biochem-subnav { padding: 0 6px; } + .bsn-tab { padding: 10px 10px; gap: 0; } + .bsn-tab .bsn-label { display: none; } + } +
@@ -200,6 +237,9 @@
+
diff --git a/frontend/biochem-reactions.html b/frontend/biochem-reactions.html index 796c3e4..e34ef00 100644 --- a/frontend/biochem-reactions.html +++ b/frontend/biochem-reactions.html @@ -316,7 +316,44 @@ .page-header { padding: 10px; } .rxn-card { padding: 10px; } } - + + /* ── Biochem subnav ─────────────────────────────────────────────── */ + .biochem-subnav { + display: flex; align-items: center; gap: 2px; + padding: 0 16px; + background: rgba(255,255,255,0.92); + backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); + border-bottom: 1.5px solid rgba(15,23,42,0.07); + flex-shrink: 0; overflow-x: auto; + scrollbar-width: none; position: relative; + } + .biochem-subnav::-webkit-scrollbar { display: none; } + .biochem-subnav::after { + content: ''; position: absolute; bottom: -1px; left: 0; right: 0; + height: 1.5px; background: rgba(15,23,42,0.07); + } + .bsn-tab { + display: inline-flex; align-items: center; gap: 7px; + padding: 11px 14px; border-radius: 9px; margin: 5px 1px; + font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 600; + color: var(--text-3, #56687A); text-decoration: none; white-space: nowrap; + transition: background .15s, color .15s; position: relative; + } + .bsn-tab svg { stroke: currentColor; width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } + .bsn-tab:hover { background: rgba(155,93,229,0.08); color: #9B5DE5; } + .bsn-active { + background: rgba(155,93,229,0.10); color: #7c3aed; font-weight: 700; + } + .bsn-active::after { + content: ''; position: absolute; bottom: -5px; left: 14px; right: 14px; + height: 2.5px; border-radius: 99px; background: #9B5DE5; + } + @media (max-width: 560px) { + .biochem-subnav { padding: 0 6px; } + .bsn-tab { padding: 10px 10px; gap: 0; } + .bsn-tab .bsn-label { display: none; } + } +
@@ -324,6 +361,9 @@
+
diff --git a/frontend/biochem.html b/frontend/biochem.html index 469bdbc..c121b79 100644 --- a/frontend/biochem.html +++ b/frontend/biochem.html @@ -332,7 +332,44 @@ .el-btn { width: 28px; height: 28px; font-size: 0.66rem; } .tool-btn { height: 26px; padding: 0 6px; font-size: 0.66rem; } } - + + /* ── Biochem subnav ─────────────────────────────────────────────── */ + .biochem-subnav { + display: flex; align-items: center; gap: 2px; + padding: 0 16px; + background: rgba(255,255,255,0.92); + backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); + border-bottom: 1.5px solid rgba(15,23,42,0.07); + flex-shrink: 0; overflow-x: auto; + scrollbar-width: none; position: relative; + } + .biochem-subnav::-webkit-scrollbar { display: none; } + .biochem-subnav::after { + content: ''; position: absolute; bottom: -1px; left: 0; right: 0; + height: 1.5px; background: rgba(15,23,42,0.07); + } + .bsn-tab { + display: inline-flex; align-items: center; gap: 7px; + padding: 11px 14px; border-radius: 9px; margin: 5px 1px; + font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 600; + color: var(--text-3, #56687A); text-decoration: none; white-space: nowrap; + transition: background .15s, color .15s; position: relative; + } + .bsn-tab svg { stroke: currentColor; width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } + .bsn-tab:hover { background: rgba(155,93,229,0.08); color: #9B5DE5; } + .bsn-active { + background: rgba(155,93,229,0.10); color: #7c3aed; font-weight: 700; + } + .bsn-active::after { + content: ''; position: absolute; bottom: -5px; left: 14px; right: 14px; + height: 2.5px; border-radius: 99px; background: #9B5DE5; + } + @media (max-width: 560px) { + .biochem-subnav { padding: 0 6px; } + .bsn-tab { padding: 10px 10px; gap: 0; } + .bsn-tab .bsn-label { display: none; } + } +
@@ -340,6 +377,9 @@
+
Биохимия diff --git a/frontend/js/biochem-nav.js b/frontend/js/biochem-nav.js index bb73aaa..35317b6 100644 --- a/frontend/js/biochem-nav.js +++ b/frontend/js/biochem-nav.js @@ -1,81 +1,4 @@ 'use strict'; -/* - * biochem-nav.js — межстраничная навигация модуля «Биохимия». - * Подключается на всех 5 страницах; вставляет полосу после шапки. - * Текущая страница определяется по location.pathname. - */ -(function () { - const PAGES = [ - { path: '/biochem', icon: 'M9 3h6M10 3v6l-5.4 9.3A1.5 1.5 0 0 0 5.9 21h12.2a1.5 1.5 0 0 0 1.3-2.3L14 9V3M7.5 15h9', label: 'Редактор' }, - { path: '/biochem-library', icon: 'M4 5a2 2 0 0 1 2-2h6v17H6a2 2 0 0 0-2 2z M20 5a2 2 0 0 0-2-2h-6v17h6a2 2 0 0 1 2 2z', label: 'Библиотека' }, - { path: '/biochem-reactions', icon: 'M13 2 3 14h9l-1 8 10-12h-9l1-8z', label: 'Реакции' }, - { path: '/biochem-properties', icon: 'M9 17H7A5 5 0 0 1 7 7h2 M15 7h2a5 5 0 0 1 0 10h-2 M9 12h6', label: 'Свойства' }, - { path: '/biochem-pathways', icon: 'M6 18h8 M3 22h18 M8 22V12l4-10 4 10v10 M10 9h4', label: 'Пути' }, - ]; - - function current() { - const p = location.pathname.replace(/\.html$/, ''); - return PAGES.find(pg => p === pg.path || p.endsWith(pg.path)) || null; - } - - function render() { - const cur = current(); - const nav = document.createElement('nav'); - nav.className = 'biochem-subnav'; - nav.setAttribute('aria-label', 'Разделы биохимии'); - nav.innerHTML = PAGES.map(pg => { - const active = cur && cur.path === pg.path; - const href = pg.path + (pg.path === '/biochem' ? '' : '.html'); - return ` - - ${pg.label} - `; - }).join(''); - - // inject CSS once - if (!document.getElementById('biochem-subnav-style')) { - const s = document.createElement('style'); - s.id = 'biochem-subnav-style'; - s.textContent = ` - .biochem-subnav { - display: flex; align-items: center; gap: 2px; - padding: 0 20px; - background: rgba(255,255,255,0.75); backdrop-filter: blur(8px); - border-bottom: 1.5px solid rgba(15,23,42,0.07); - flex-shrink: 0; position: sticky; top: 0; z-index: 60; - } - .bsn-tab { - display: inline-flex; align-items: center; gap: 7px; - padding: 10px 14px; border-radius: 8px; - font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 600; - color: var(--text-3, #56687A); text-decoration: none; - transition: background .14s, color .14s; border-bottom: 2px solid transparent; - white-space: nowrap; - } - .bsn-tab .ic { stroke: currentColor; flex-shrink: 0; } - .bsn-tab:hover { background: rgba(155,93,229,0.07); color: var(--violet, #9B5DE5); } - .bsn-active { - color: var(--violet, #9B5DE5); font-weight: 700; - border-bottom-color: var(--violet, #9B5DE5); - } - .bsn-active:hover { background: rgba(155,93,229,0.07); } - @media (max-width: 560px) { - .biochem-subnav { padding: 0 8px; gap: 0; overflow-x: auto; } - .bsn-tab { padding: 9px 10px; font-size: 0.76rem; } - .bsn-tab span { display: none; } - .bsn-tab .ic { width: 16px; height: 16px; } - } - `; - document.head.appendChild(s); - } - - // insert: after sidebar/notif-drop, before first content element inside sb-content - const sbContent = document.querySelector('.sb-content'); - if (sbContent) { - sbContent.insertBefore(nav, sbContent.firstChild); - } - } - - if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', render); - else render(); -})(); +/* biochem-nav.js — навигация теперь статична в HTML каждой страницы. + * Файл сохранён для обратной совместимости (подключён на всех страницах). + * Активная вкладка проставляется сервером через class="bsn-active" в HTML. */