From 3e70f4322d65686c86282bd2ba1ac0aa94fa854f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9A=D0=BE=D0=BD=D1=81=D1=82=D0=B0=D0=BD=D1=82=D0=B8?=
 =?UTF-8?q?=D0=BD=20=D0=9B=D0=B5=D0=B1=D0=B5=D0=B4=D0=B8=D0=BD=D1=81=D0=BA?=
 =?UTF-8?q?=D0=B8=D0=B9?= <lebedinsky.kd@gmail.com>
Date: Mon, 27 Apr 2026 19:38:42 +0500
Subject: [PATCH] Sprint 2: attempt cards, file import button, question layout,
 radio/check, sticky save
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace attempts table with attempts-card-list cards
- Custom import: sr-only file input + btn-styled label
- question-editor-block: stack header on mobile, row from 520px
- option marks: radio for single correct, checkbox for multiple
- Fixed bottom actions on max-width 640px with draft status; hide in-flow panel
- Update СПРИНТЫ_МОБИЛЬНЫЙ_ДИЗАЙН.md and DOC/ШАГИ/ШАГ_2026-04-27_003.md

Made-with: Cursor
---
 DOC/ШАГИ/ШАГ_2026-04-27_003.md         |   4 +
 ...�НТЫ_МОБИЛЬНЫЙ_ДИЗАЙН.md |  18 +-
 frontend/src/pages/TestDetail.jsx             | 165 ++++++++++--------
 frontend/src/styles/cabinet-theme.css         | 158 +++++++++++++++++
 4 files changed, 268 insertions(+), 77 deletions(-)
 create mode 100644 DOC/ШАГИ/ШАГ_2026-04-27_003.md

diff --git a/DOC/ШАГИ/ШАГ_2026-04-27_003.md b/DOC/ШАГИ/ШАГ_2026-04-27_003.md
new file mode 100644
index 0000000..5964b25
--- /dev/null
+++ b/DOC/ШАГИ/ШАГ_2026-04-27_003.md
@@ -0,0 +1,4 @@
+# Шаг 2026-04-27 — спринт 2 (мобильный UI)
+
+- См. [`docs/СПРИНТЫ_МОБИЛЬНЫЙ_ДИЗАЙН.md`](../../docs/СПРИНТЫ_МОБИЛЬНЫЙ_ДИЗАЙН.md): пункты 2.1–2.5 отмечены выполненными.
+- Реализация: `TestDetail.jsx` (прогоны карточками, импорт через label+input, заголовок вопроса, radio/checkbox, фикс-футер), `cabinet-theme.css` (классы спринта 2).
diff --git a/docs/СПРИНТЫ_МОБИЛЬНЫЙ_ДИЗАЙН.md b/docs/СПРИНТЫ_МОБИЛЬНЫЙ_ДИЗАЙН.md
index 43e3cd8..68c4d8f 100644
--- a/docs/СПРИНТЫ_МОБИЛЬНЫЙ_ДИЗАЙН.md
+++ b/docs/СПРИНТЫ_МОБИЛЬНЫЙ_ДИЗАЙН.md
@@ -1,10 +1,8 @@
 # Спринты: мобильный UI кабинета тестов
 
-Рядом с: [`ПРЕДЛОЖЕНИЕ_ДИЗАЙН_СОЗДАНИЕ_ТЕСТА.md`](./ПРЕДЛОЖЕНИЕ_ДИЗАЙН_СОЗДАНИЕ_ТЕСТА.md).
-
 ---
 
-## Спринт 1 — быстрые исправления (текущий)
+## Спринт 1 — быстрые исправления
 
 **Цель:** выровнять кнопки, мета-строку списка, историю версий, назначение и safe-area; без смены контентной модели страниц.
 
@@ -21,13 +19,15 @@
 
 ---
 
-## Спринт 2 — бэклог (следующий)
+## Спринт 2 — карточки, импорт, вопрос, радио/чек, фикс-футер
+
+- [x] **2.1** «Прогоны и разбор»: таблица заменена на список карточек (`.attempts-card-list`)
+- [x] **2.2** «Импорт из файла»: скрытый `input` + `label` с `.btn` (`.import-file-input` / `.import-file-label`)
+- [x] **2.3** «Вопрос N» + «Сгенерировать вопрос (ИИ)»: колонка на мобилке, ряд от `min-width: 520px` (`.question-editor-block__header`)
+- [x] **2.4** Варианты: `type="radio"` при одном верном, `checkbox` при нескольких
+- [x] **2.5** Моб. фикс-футер `≤640px` с «Сохранить» / «К списку» + статус черновика; панель в потоке скрыта
 
-- [ ] **2.1** «Прогоны и разбор»: на мобилке заменить таблицу на карточки или гориз. скролл с фиксированными колонками
-- [ ] **2.2** «Импорт из файла»: кастомная кнопка (скрытый `input` + стилизованный `label` под `.btn`)
-- [ ] **2.3** «Вопрос 1» + «Сгенерировать вопрос (ИИ)» — не в одной строке на узком экране; явная иерархия primary/secondary
-- [ ] **2.4** Радио vs чекбокс у вариантов ответа при «несколько верных» — визуальная метафора (квадраты vs круги)
-- [ ] **2.5** Закреплённый футер с действиями «Сохранить» (опционально)
+**Файлы:** `frontend/src/styles/cabinet-theme.css`, `frontend/src/pages/TestDetail.jsx`.
 
 ---
 
diff --git a/frontend/src/pages/TestDetail.jsx b/frontend/src/pages/TestDetail.jsx
index a8c8db3..b6c0a67 100644
--- a/frontend/src/pages/TestDetail.jsx
+++ b/frontend/src/pages/TestDetail.jsx
@@ -622,7 +622,7 @@ export default function TestDetail() {
   );
 
   return (
-    <div className="test-detail-page">
+    <div className="test-detail-page test-detail-page--with-fixed-actions">
       <div className="cabinet-brick cabinet-brick--hero">
         <p className="link-back" style={{ marginTop: 0 }}>
           <Link to="/tests">← к списку</Link>
@@ -792,22 +792,23 @@ export default function TestDetail() {
         {draftQuestions.map((q, qi) => (
           <div
             key={q.key}
+            className="question-editor-block"
             style={{
               borderTop: '1px solid var(--border-subtle, #2a2a2a)',
               marginTop: '1rem',
               paddingTop: '1rem',
             }}
           >
-            <div
-              className="inline-actions"
-              style={{ marginBottom: 6, flexWrap: 'wrap', alignItems: 'center' }}
-            >
-              <label className="form-label" htmlFor={`qtext-${q.key}`} style={{ marginBottom: 0 }}>
+            <div className="question-editor-block__header">
+              <label
+                className="form-label question-editor-block__title"
+                htmlFor={`qtext-${q.key}`}
+              >
                 Вопрос {qi + 1}
               </label>
               <button
                 type="button"
-                className="btn btn-ghost btn--sm"
+                className="btn btn-ghost btn--sm question-editor-block__ai-btn"
                 disabled={aiQBusy != null}
                 onClick={() => runAiGenerateQuestion(qi)}
               >
@@ -845,14 +846,18 @@ export default function TestDetail() {
             <p className="muted" style={{ marginBottom: 6, fontSize: 13 }}>
               Варианты
             </p>
-            <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
+            <ul className="question-options-list" style={{ listStyle: 'none', padding: 0, margin: 0 }}>
               {q.options.map((o, oi) => (
                 <li
                   key={o.key}
+                  className="question-option-row"
                   style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 8, marginBottom: 8 }}
                 >
                   <input
-                    type="checkbox"
+                    key={`${o.key}-${q.hasMultipleAnswers ? 'm' : 's'}`}
+                    className="question-option-row__mark"
+                    type={q.hasMultipleAnswers ? 'checkbox' : 'radio'}
+                    name={q.hasMultipleAnswers ? undefined : `q-${q.key}-correct`}
                     checked={o.isCorrect}
                     onChange={(e) => {
                       const v = e.target.checked;
@@ -936,7 +941,7 @@ export default function TestDetail() {
         </div>
       </AccSection>
 
-      <div className="cabinet-brick" style={{ marginTop: 0 }}>
+      <div className="cabinet-brick editor-actions-flow" style={{ marginTop: 0 }}>
         <div
           className="actions-bar"
           style={{ marginBottom: draftStatus ? '0.35rem' : 0 }}
@@ -949,7 +954,7 @@ export default function TestDetail() {
           </Link>
         </div>
         {draftStatus && (
-          <p className="muted" style={{ marginTop: 0, marginBottom: 0 }}>
+          <p className="muted editor-actions-status--flow" style={{ marginTop: 0, marginBottom: 0 }}>
             {draftStatus}
           </p>
         )}
@@ -999,61 +1004,55 @@ export default function TestDetail() {
               {attemptsErr}
             </p>
           )}
-          <div className="surface-card" style={{ padding: 0, overflow: 'auto' }}>
-            <table className="table-cabinet">
-              <thead>
-                <tr>
-                  <th>Когда</th>
-                  <th>Участник</th>
-                  <th>v</th>
-                  <th>Результат</th>
-                  <th />
-                </tr>
-              </thead>
-              <tbody>
-                {attemptsList.map((a) => (
-                  <tr key={a.id}>
-                    <td className="mono" style={{ whiteSpace: 'nowrap' }}>
-                      {a.completedAt
-                        ? fmtDt(a.completedAt)
-                        : a.startedAt
-                          ? fmtDt(a.startedAt)
-                          : '—'}
-                    </td>
-                    <td>
-                      {a.attempterName || '—'}
-                      {a.attempterLogin && (
-                        <span className="code-inline" style={{ fontSize: 11, marginLeft: 6 }}>
-                          {a.attempterLogin}
-                        </span>
-                      )}
-                    </td>
-                    <td>v{a.testVersion}</td>
-                    <td>
-                      {a.status === 'completed' && a.totalQuestions != null ? (
-                        <>
-                          {a.correctCount}/{a.totalQuestions}
-                          {a.passed ? ' · зачёт' : ' · незачёт'}
-                        </>
-                      ) : (
-                        a.status
-                      )}
-                    </td>
-                    <td>
-                      {a.status === 'completed' && (
-                        <Link
-                          to={`/tests/${id}/attempts/${a.id}/review`}
-                          className="btn btn-ghost btn--sm"
-                        >
-                          Разбор
-                        </Link>
-                      )}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
+          <ul className="attempts-card-list" aria-label="Список прогонов">
+            {attemptsList.map((a) => {
+              const when = a.completedAt
+                ? fmtDt(a.completedAt)
+                : a.startedAt
+                  ? fmtDt(a.startedAt)
+                  : '—';
+              const result =
+                a.status === 'completed' && a.totalQuestions != null ? (
+                  <>
+                    {a.correctCount}/{a.totalQuestions}
+                    {a.passed ? ' · зачёт' : ' · незачёт'}
+                  </>
+                ) : (
+                  a.status
+                );
+              return (
+                <li key={a.id} className="surface-card attempts-card-list__item">
+                  <div className="attempts-card-list__row">
+                    <div className="attempts-card-list__main">
+                      <p className="muted attempts-card-list__when mono" style={{ margin: 0, fontSize: '0.8rem' }}>
+                        {when}
+                      </p>
+                      <p className="attempts-card-list__who" style={{ margin: '0.35rem 0 0', fontWeight: 600 }}>
+                        {a.attempterName || '—'}
+                        {a.attempterLogin && (
+                          <span className="code-inline" style={{ fontSize: 11, marginLeft: 6 }}>
+                            {a.attempterLogin}
+                          </span>
+                        )}
+                      </p>
+                      <p className="muted" style={{ margin: '0.25rem 0 0', fontSize: '0.85rem' }}>
+                        v{a.testVersion} ·{' '}
+                        <span className="attempts-card-list__result">{result}</span>
+                      </p>
+                    </div>
+                    {a.status === 'completed' && (
+                      <Link
+                        to={`/tests/${id}/attempts/${a.id}/review`}
+                        className="btn btn-ghost btn--sm attempts-card-list__action"
+                      >
+                        Разбор
+                      </Link>
+                    )}
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
         </AccSection>
       )}
 
@@ -1085,15 +1084,23 @@ export default function TestDetail() {
       </AccSection>
 
       <AccSection title="Импорт из файла" defaultOpen={false}>
-      <div className="inline-actions" style={{ marginBottom: '0.5rem' }}>
+      <div className="import-file-row" style={{ marginBottom: '0.5rem' }}>
         <input
+          id="import-test-file"
+          className="import-file-input"
           type="file"
           accept=".pdf,.docx,.txt,.md,application/pdf"
           onChange={onImportFile}
           disabled={importBusy}
           aria-label="Выбрать файл для импорта"
         />
-        {importBusy && <span className="text-muted">Обработка…</span>}
+        <label
+          htmlFor="import-test-file"
+          className={`btn btn-ghost import-file-label${importBusy ? ' is-busy' : ''}`}
+          style={importBusy ? { pointerEvents: 'none' } : undefined}
+        >
+          {importBusy ? 'Обработка…' : 'Выбрать файл'}
+        </label>
       </div>
       {importErr && (
         <p className="error-text" role="alert">
@@ -1241,6 +1248,28 @@ export default function TestDetail() {
           {assignMsg && <p className="text-muted">{assignMsg}</p>}
         </AccSection>
       )}
+
+      <div
+        className="test-detail-fixed-actions"
+        role="region"
+        aria-label="Быстрые действия с черновиком"
+      >
+        <div className="test-detail-fixed-actions__inner">
+          {draftStatus && (
+            <p className="muted test-detail-fixed-actions__status" role="status">
+              {draftStatus}
+            </p>
+          )}
+          <div className="actions-bar">
+            <button type="button" className="btn btn-primary" onClick={saveDraft}>
+              Сохранить черновик
+            </button>
+            <Link to="/tests" className="btn btn-ghost">
+              К списку
+            </Link>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/styles/cabinet-theme.css b/frontend/src/styles/cabinet-theme.css
index 03e4239..8768d4c 100644
--- a/frontend/src/styles/cabinet-theme.css
+++ b/frontend/src/styles/cabinet-theme.css
@@ -900,3 +900,161 @@ code,
     box-sizing: border-box;
   }
 }
+
+/* --- Спринт 2: редактор вопроса, прогоны, импорт, фикс. футер --- */
+
+.question-editor-block__header {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.question-editor-block__title {
+  margin-bottom: 0;
+  font-size: 0.95rem;
+}
+
+.question-editor-block__ai-btn {
+  width: 100%;
+  text-align: center;
+  box-sizing: border-box;
+  align-self: stretch;
+}
+
+@media (min-width: 520px) {
+  .question-editor-block__header {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .question-editor-block__ai-btn {
+    width: auto;
+    align-self: center;
+  }
+}
+
+/* Спринт 2.4: radio = один верный, checkbox = несколько (нативная метафора) */
+.question-option-row__mark {
+  width: 1.15rem;
+  height: 1.15rem;
+  flex-shrink: 0;
+  margin-top: 0.1rem;
+  cursor: pointer;
+  accent-color: var(--primary);
+}
+
+/* Список прогонов: карточки */
+.attempts-card-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.attempts-card-list__item {
+  margin: 0;
+}
+
+.attempts-card-list__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.attempts-card-list__main {
+  flex: 1 1 12rem;
+  min-width: 0;
+}
+
+.attempts-card-list__action {
+  flex: 0 0 auto;
+}
+
+@media (max-width: 520px) {
+  .attempts-card-list__row {
+    flex-direction: column;
+  }
+
+  .attempts-card-list__action {
+    width: 100%;
+    text-align: center;
+  }
+}
+
+/* Импорт: скрытый input + кнопка-стиль */
+.import-file-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.import-file-row {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.import-file-label {
+  margin: 0;
+  cursor: pointer;
+  width: auto;
+  display: inline-block;
+  box-sizing: border-box;
+}
+
+/* Мобилка: закреплённый футер с «Сохранить» (дубль панели скрыт) */
+.test-detail-fixed-actions {
+  display: none;
+}
+
+@media (max-width: 640px) {
+  .test-detail-page--with-fixed-actions {
+    padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
+  }
+
+  .test-detail-page--with-fixed-actions .editor-actions-flow {
+    display: none;
+  }
+
+  .test-detail-fixed-actions {
+    display: block;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 30;
+    padding: 0.65rem 1.25rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
+    background: color-mix(in srgb, var(--surface) 96%, #fff);
+    border-top: 1px solid color-mix(in srgb, var(--outline-variant) 45%, transparent);
+    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
+  }
+
+  .test-detail-fixed-actions__inner {
+    max-width: var(--max-content);
+    margin: 0 auto;
+  }
+
+  .test-detail-fixed-actions__status {
+    margin: 0 0 0.45rem;
+    font-size: 0.8rem;
+    line-height: 1.3;
+    max-height: 3.2rem;
+    overflow: auto;
+  }
+}