maxim.dolgolyov/Learn_System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(biochem): статичный subnav без мигания + редизайн

Browse Source 
Проблема: динамическая вставка через JS вызывала мигание (nav
появлялся через ~100ms после первого пейнта).

Решение: nav — статичный HTML в каждой странице, CSS — в <head>.
Активная вкладка проставлена в 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 <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-05-31 08:54:38 +03:00
parent b7db2fc229
commit 358b761eb2
6 changed files with 208 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/biochem-pathways.html
+41 -1
View File
@@ -338,7 +338,44 @@
.path-chip { font-size: 0.68rem; padding: 4px 10px; }
.side-panel { max-height: 45vh; }
}
</style>
/* ── 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; }
}
</style>
</head>
<body>
<div class="app-layout" id="app">
@@ -346,6 +383,9 @@
<div class="notif-drop" id="notif-drop"></div>
<div class="sb-content">
<nav class="biochem-subnav" aria-label="Разделы биохимии">
<a class="bsn-tab" href="/biochem"><svg viewBox="0 0 24 24"><path d="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"/></svg><span class="bsn-label">Редактор</span></a><a class="bsn-tab" href="/biochem-library"><svg viewBox="0 0 24 24"><path d="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"/></svg><span class="bsn-label">Библиотека</span></a><a class="bsn-tab" href="/biochem-reactions"><svg viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg><span class="bsn-label">Реакции</span></a><a class="bsn-tab" href="/biochem-properties"><svg viewBox="0 0 24 24"><path d="M9 17H7A5 5 0 0 1 7 7h2m6 10h2a5 5 0 0 0 0-10h-2m-6 5h6"/></svg><span class="bsn-label">Свойства</span></a><a class="bsn-tab bsn-active" href="/biochem-pathways" aria-current="page"><svg viewBox="0 0 24 24"><path d="M6 18h8M3 22h18M8 22V12l4-10 4 10v10M10 9h4"/></svg><span class="bsn-label">Пути</span></a>
</nav>
<!-- Header -->
<div class="page-header">
<div class="page-header-icon"><svg class="ic" viewBox="0 0 24 24"><path d="M6 18h8"/><path d="M3 22h18"/><path d="M14 22a7 7 0 1 0 0-14h-1"/><path d="M9 14l2-7"/><path d="M12 14l2-7"/></svg></div>