Show the question bank as a table with a stable, right-aligned actions column
All checks were successful
CI/CD / build-test-deploy (pull_request) Successful in 1m39s

The old list showed type, text, and points inline via flexbox, with no
correct-answer info at all, and unstyled buttons that shifted position
depending on question text length. A table with a shrink-to-fit
actions column (text/kind/answer/points first, buttons last) fixes
both: correct answers are now visible, and button position no longer
depends on text length.
This commit is contained in:
danamir
2026-08-09 19:03:40 +03:00
parent b7177c455e
commit 24cce8ea71
2 changed files with 91 additions and 31 deletions

View File

@@ -65,6 +65,25 @@ let private kindLabel (t: QuestionTypeView) =
| ShortAnswerT _ -> "Короткий ответ" | ShortAnswerT _ -> "Короткий ответ"
| NumericT _ -> "Числовой" | NumericT _ -> "Числовой"
/// Read-only rendering of a question's correct answer(s) for the teacher's
/// question-bank table distinct from `formFromSummary` in Types.fs, which
/// unpacks the same data to prefill the edit form instead of displaying it.
let private correctAnswerText (t: QuestionTypeView) =
match t with
| SingleChoiceT d ->
d.Options
|> List.tryFind (fun o -> o.Id = d.CorrectOptionId)
|> Option.map (fun o -> o.Text)
|> Option.defaultValue "—"
| MultipleChoiceT d ->
d.Options
|> List.filter (fun o -> List.contains o.Id d.CorrectOptionIds)
|> List.map (fun o -> o.Text)
|> String.concat ", "
| TrueFalseT b -> if b then "Верно" else "Неверно"
| ShortAnswerT d -> String.concat ", " d.AcceptedAnswers
| NumericT d -> sprintf "%s ± %s" (Format.points d.CorrectValue) (Format.points d.Tolerance)
let private questionsListView (model: Model) dispatch = let private questionsListView (model: Model) dispatch =
Html.div [ Html.div [
prop.className "questions-list" prop.className "questions-list"
@@ -78,18 +97,30 @@ let private questionsListView (model: Model) dispatch =
elif model.Questions.IsEmpty then elif model.Questions.IsEmpty then
Html.p "В этой теме пока нет вопросов" Html.p "В этой теме пока нет вопросов"
else else
Html.ul [ Html.table [
prop.className "questions-table"
prop.children [ prop.children [
Html.thead [
Html.tr [
Html.th [ prop.text "Текст вопроса" ]
Html.th [ prop.text "Тип" ]
Html.th [ prop.text "Правильный ответ" ]
Html.th [ prop.text "Баллы" ]
Html.th []
]
]
Html.tbody [
for q in model.Questions -> for q in model.Questions ->
Html.li [ Html.tr [
prop.key (string q.Id) prop.key (string q.Id)
prop.children [ prop.children [
Html.span [ prop.className "question-kind"; prop.text (kindLabel q.Type) ] Html.td [ prop.text q.Text ]
Html.text (sprintf " %s " q.Text) Html.td [ prop.className "question-kind"; prop.text (kindLabel q.Type) ]
Html.span [ Html.td [ prop.text (correctAnswerText q.Type) ]
prop.className "tag-mono" Html.td [ prop.className "tag-mono"; prop.text (Format.points q.Points) ]
prop.text (sprintf "%s б." (Format.points q.Points)) Html.td [
] prop.className "question-actions-cell"
prop.children [
Html.button [ Html.button [
prop.type'.button prop.type'.button
prop.onClick (fun _ -> dispatch (StartEditQuestion q.Id)) prop.onClick (fun _ -> dispatch (StartEditQuestion q.Id))
@@ -106,6 +137,9 @@ let private questionsListView (model: Model) dispatch =
] ]
] ]
] ]
]
]
]
let private optionsEditor (form: NewQuestionForm) dispatch (multi: bool) = let private optionsEditor (form: NewQuestionForm) dispatch (multi: bool) =
Html.div [ Html.div [

View File

@@ -681,17 +681,44 @@ a {
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
} }
.questions-list li { .questions-table {
display: flex; width: 100%;
flex-wrap: wrap; border-collapse: collapse;
align-items: center; font-size: 0.9rem;
gap: 0.5rem;
border-top: 1px solid var(--line);
padding: 0.6rem 0;
} }
.questions-list li:first-child { .questions-table th,
border-top: none; .questions-table td {
text-align: left;
padding: 0.55rem 0.75rem;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
.questions-table th {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-soft);
}
.questions-table tbody tr:hover {
background: var(--brass-soft);
}
/* `width: 1%` shrinks this column to just its buttons' content width —
since it's the only unconstrained column left, the question-text column
absorbs 100% of the remaining space instead, so the buttons stay pinned
flush right regardless of how long any question's text is. */
.question-actions-cell {
white-space: nowrap;
width: 1%;
text-align: right;
}
.question-actions-cell button {
margin-left: 0.5rem;
} }
.question-kind { .question-kind {
@@ -700,7 +727,6 @@ a {
color: var(--brass); color: var(--brass);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.03em; letter-spacing: 0.03em;
margin-right: 0.5rem;
} }
.new-question-form { .new-question-form {