ross/penracourses
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor CSS styles for exam layout to improve responsiveness and alignment of question inputs and labels

Browse Source
This commit is contained in:
Ross
2025-11-10 21:22:23 +00:00
parent 9cf7ad6da7
commit 7782ac55ca
1 changed files with 24 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
physics/templates/physics/exam_take.html
+24 -7
View File
@@ -203,9 +203,20 @@
.exam-take-container { max-width: 980px; margin: 0 auto; padding: 1rem; }
.no-select { user-select: none; }
.flex-container { display: flex; align-items: center; gap: 0.75rem; }
.flex-1 { flex: 1; }
.flex-8 { flex: 8; }
.flex-container { display: flex; align-items: center; gap: 0.75rem; }
/* fieldWrapper is used around each label + input; ensure it stretches the full width */
.fieldWrapper { width: 100%; display: flex; align-items: center; gap: 0.75rem; }
/* We keep two main columns inside each fieldWrapper:
- the label (question-text) which should take the bulk of space and sit to the left on wide screens
- the input container (.flex-1) which holds the input and a post-input label; the post-input should float right
*/
.flex-8 { flex: 8; }
.flex-1 { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
/* Left-align label text on wide screens so the question text appears on the left, input between, and the
post-input label floats to the right. Padding keeps visual separation. */
.question-text { margin: 0; text-align: left; padding-right: 0.5rem; }
/* Answer items styled as cards */
.physics-answer-list { list-style: none; padding: 0; margin: 0; }
@@ -225,12 +236,14 @@
.question-text { margin: 0; }
/* Post-input badge (shows True/False text next to inputs) */
.postinput { display: inline-block; min-width: 2.5rem; text-align: left; }
.postinput { display: inline-block; min-width: 3rem; text-align: right; color: var(--muted); }
.physics-answer-list input { margin: 0 0.25rem 0 0; }
/* show a compact post-label on the right of the input container */
.physics-answer-list input:checked + .postinput::after {
margin-left: 0.6rem; content: 'True'; color: var(--success); font-weight: 600;
content: 'True'; color: var(--success); font-weight: 600; margin-left: 0.4rem;
}
.physics-answer-list input:not(:checked) + .postinput::after {
margin-left: 0.6rem; content: 'False'; color: var(--muted); font-weight: 600;
content: 'False'; color: var(--muted); font-weight: 600; margin-left: 0.4rem;
}
/* Correctness badges and highlights */
@@ -283,8 +296,12 @@
/* Small helper: make labels wrap nicely on small screens */
@media (max-width: 576px) {
/* On small screens, stack the label and input for readability */
.flex-container { flex-direction: column; align-items: stretch; }
.postinput { margin-top: 0.4rem; }
.fieldWrapper { flex-direction: column; align-items: stretch; }
.question-text { text-align: left; padding-right: 0; margin-bottom: 0.4rem; }
.flex-1 { justify-content: flex-start; gap: 0.5rem; }
.postinput { margin-top: 0.4rem; text-align: left; }
.physics-answer-list li { padding: 0.6rem; }
}
</style>