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:
@@ -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');
|
||||
|
||||
Reference in New Issue
Block a user