feat(flashcards): картинки в дашбордном виджете «Повтори карточку»

renderFlashcardWidget рисует front_image/back_image на обеих сторонах;
.fcw-inner.has-img расширяет высоту карточки под изображение.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-06-02 13:09:59 +03:00
parent 008f38c0d2
commit da5e95bdaf
+14 -3
View File
@@ -417,6 +417,11 @@
.fcw-btn svg { width: 13px; height: 13px; stroke: currentColor; }
.fcw-empty { text-align: center; padding: 16px 12px; color: var(--text-3); }
.fcw-empty p { font-size: 0.82rem; margin-bottom: 10px; }
/* картинка на карточке виджета */
.fcw-inner.has-img { min-height: 172px; }
.fcw-img { align-self: center; max-width: 100%; max-height: 96px; object-fit: contain;
border-radius: 8px; box-shadow: 0 1px 5px rgba(15,23,42,0.12); }
.has-img .fcw-text { -webkit-line-clamp: 2; }
/* ── subjects progress bars ── */
.subj-prog-row {
@@ -4320,18 +4325,24 @@
}
_fcwTotal = r.total || 0;
const c = r.card;
const back = (c.back || '').trim() || '(ответ не заполнен)';
const frontTxt = (c.front || '').trim() || (c.front_image ? '' : '(пусто)');
const back = (c.back || '').trim() || (c.back_image ? '' : '(ответ не заполнен)');
const col = c.deck_color || '#9B5DE5';
const hasImg = !!(c.front_image || c.back_image);
const fImg = c.front_image ? `<img class="fcw-img" src="${esc(c.front_image)}" alt="" />` : '';
const bImg = c.back_image ? `<img class="fcw-img" src="${esc(c.back_image)}" alt="" />` : '';
body.innerHTML = `
<div class="fcw-card" onclick="fcwFlip(this)">
<div class="fcw-inner">
<div class="fcw-inner${hasImg ? ' has-img' : ''}">
<div class="fcw-face fcw-front">
<div class="fcw-deck" style="color:${esc(col)}">${esc(c.deck_title || 'Карточка')}</div>
<div class="fcw-text">${esc(c.front)}</div>
${fImg}
<div class="fcw-text">${esc(frontTxt)}</div>
<div class="fcw-hint">${lci('rotate-cw','width:12px;height:12px')} нажми, чтобы перевернуть</div>
</div>
<div class="fcw-face fcw-back">
<div class="fcw-deck">Ответ</div>
${bImg}
<div class="fcw-text">${esc(back)}</div>
</div>
</div>