From deffa3c7146da342ddb6428a360c0568608349c7 Mon Sep 17 00:00:00 2001 From: Maxim Dolgolyov Date: Wed, 27 May 2026 12:57:04 +0300 Subject: [PATCH] =?UTF-8?q?fix(textbooks):=20=D1=83=D0=B1=D1=80=D0=B0?= =?UTF-8?q?=D1=82=D1=8C=20hover-preview=20=D0=BA=D0=B0=D1=80=D1=82=D0=BE?= =?UTF-8?q?=D1=87=D0=B5=D0=BA=20=C2=A7=C2=A7=20=E2=80=94=20=D0=BF=D0=BE?= =?UTF-8?q?=D1=81=D1=82=D0=BE=D1=8F=D0=BD=D0=BD=D0=BE=20=D0=BF=D0=B5=D1=80?= =?UTF-8?q?=D0=B5=D0=BA=D1=80=D1=8B=D0=B2=D0=B0=D0=BB=20=D1=81=D0=BE=D1=81?= =?UTF-8?q?=D0=B5=D0=B4=D0=B5=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Сначала пробовали left:105% — лежало на правом соседе. Затем top:calc(100%+8px) — лежало на нижнем ряду. Третий вариант (intelligent positioning) был бы over-engineered. Проще — выпилить вообще: карточки и так показывают название и % прогресса (круговой), темы видны в самом параграфе после клика. Удалено: -
из innerHTML карточек - CSS правила .psel-card-preview, .psel-preview-* (оставлен display:none!important на случай если в скриптах ещё ссылается на класс) --- frontend/textbooks/algebra_8.html | 24 +++--------------------- 1 file changed, 3 insertions(+), 21 deletions(-) diff --git a/frontend/textbooks/algebra_8.html b/frontend/textbooks/algebra_8.html index 9bed71d..b6859aa 100644 --- a/frontend/textbooks/algebra_8.html +++ b/frontend/textbooks/algebra_8.html @@ -451,20 +451,8 @@ input,select,textarea{font-family:inherit} .game-over-record{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:linear-gradient(135deg,#fcd34d,#f59e0b);color:#451a03;border-radius:10px;font-weight:800;font-size:.95rem;margin:10px 0;animation:recordPulse 1s ease infinite} @keyframes recordPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.5)}50%{box-shadow:0 0 0 8px rgba(245,158,11,0)}} -/* Task 7: psel-card hover preview */ -.psel-card{overflow:visible} -/* restore border-radius clip for the active stripe via pseudo-element only on non-preview */ -.psel-card-preview{display:none;position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);width:220px;max-width:90vw;background:var(--card);border:1.5px solid var(--pri);border-radius:12px;padding:12px 14px;z-index:200;box-shadow:var(--sh2);pointer-events:none;animation:previewIn .18s ease} -@keyframes previewIn{from{opacity:0;transform:translateX(-50%) translateY(-6px)}to{opacity:1;transform:translateX(-50%) translateY(0)}} -.psel-card:hover .psel-card-preview{display:block} -/* стрелка-носик у превью, указывает на карточку */ -.psel-card-preview::before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);width:10px;height:10px;background:var(--card);border-left:1.5px solid var(--pri);border-top:1.5px solid var(--pri)} -.psel-preview-title{font-size:.72rem;font-weight:800;color:var(--pri2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px} -.psel-preview-topic{font-size:.78rem;color:var(--text);margin-bottom:2px;padding-left:8px;border-left:2px solid var(--sec-acc,var(--pri))} -.psel-preview-bar{height:5px;background:rgba(233,30,99,.12);border-radius:3px;overflow:hidden;margin-top:8px} -.psel-preview-fill{height:100%;background:var(--pri);border-radius:3px;transition:width .4s} -.psel-preview-pct{font-size:.72rem;color:var(--muted);margin-top:2px} -@media(max-width:768px){.psel-card-preview{display:none!important}} +/* hover-preview карточек выключен — мешал перекрытием соседних рядов */ +.psel-card-preview{display:none!important} /* Task 8: section fade transitions */ .sec.fade-out{animation:secFadeOut .18s ease forwards} @@ -1051,13 +1039,7 @@ function buildParaSelector(){ ${progPct}% - -
-
${p.name}
- ${topicsHtml} -
-
${progPct}% пройдено
-
`; + `; card.addEventListener('click', ()=>goTo(p.id)); g.appendChild(card); });