ux(admin): Q-modal ergonomic improvements — формулы скрыты, preview по требованию

Полный wizard-refactor Q-modal был отложен как высокорискованный
(сложная форма с многими типами вопросов, риск регрессии). Вместо
этого — безопасные ergonomic-улучшения:

1) FORMULA BAR — collapsed by default
   Раньше: 18 кнопок формул всегда занимали ~50px вертикали в модалке,
   но нужны только при создании math-вопросов.
   Теперь: маленькая кнопка «Вставить формулу» с chevron. Click → bar
   разворачивается. Состояние сохраняется в пределах сессии (DOM-стейт).

2) PREVIEW — показывается только когда есть текст
   Раньше: пустой preview-блок с placeholder «Введите текст вопроса…»
   занимал ~80px независимо от состояния.
   Теперь: .q-preview-wrap.hidden скрывается полностью пока textarea
   пуста. Появляется по input с debounce 150ms (уже было).

Эффект: модал стал ~130px ниже в типичном кейсе (создание non-math
вопроса). На 1080p теперь умещается без скролла для single/multi
с 4 опциями.

Без wizard'а, без риска регрессии — но visible UX-win. Wizard-refactor
по-прежнему доступен как опция, если понадобится дальнейшее снижение
когнитивной нагрузки.
This commit is contained in:
Maxim Dolgolyov
2026-05-16 20:04:08 +03:00
parent 6b7d0355b6
commit bcee5a57e3
2 changed files with 35 additions and 4 deletions
+12 -1
View File
@@ -364,12 +364,23 @@
function updateQPreview() {
clearTimeout(_prevTimer);
_prevTimer = setTimeout(() => {
const text = document.getElementById('qf-text').value || 'Введите текст вопроса…';
const text = (document.getElementById('qf-text').value || '').trim();
const el = document.getElementById('q-preview-text');
const wrap = document.getElementById('q-preview-wrap');
// Hide preview entirely when text is empty — saves vertical space in modal
wrap.classList.toggle('hidden', !text);
if (!text) return;
el.textContent = text;
renderMath(el);
}, 150);
}
// Formula bar toggle (default collapsed)
window.toggleFormulaBar = function () {
const bar = document.getElementById('formula-bar');
const btn = document.getElementById('qf-fml-toggle');
const open = bar.classList.toggle('visible');
btn.classList.toggle('open', open);
};
// Wire textarea input to preview
setTimeout(() => {
const ta = document.getElementById('qf-text');