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

Refactor styles for physics finish list and overview question buttons to improve responsiveness and layout on various screen sizes.

Browse Source
This commit is contained in:
Ross
2025-11-10 22:09:02 +00:00
parent 5a4792ea43
commit 4246713ee8
1 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
physics/templates/physics/exam_take_overview.html
+10 -3
View File
@@ -106,19 +106,25 @@
.physics-finish-list { .physics-finish-list {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); /* Limit the maximum width of each tile so buttons don't stretch too wide on large screens.
Each tile will be between 80px and 140px. The grid will wrap responsively. */
grid-template-columns: repeat(auto-fit, minmax(80px, 140px));
justify-content: start;
gap: .5rem; gap: .5rem;
align-items: stretch; align-items: stretch;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.overview-question-btn { .overview-question-btn {
/* Fill the grid cell but the cell itself is capped by the grid-template-columns above. */
width: 100%;
box-sizing: border-box;
text-align: left; text-align: left;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
padding: .5rem .75rem; padding: .5rem .75rem;
display: inline-flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
} }
@@ -143,7 +149,8 @@
@media (max-width: 575.98px) { @media (max-width: 575.98px) {
.physics-finish-list { .physics-finish-list {
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* On very small screens allow slightly narrower tiles but still wrap */
grid-template-columns: repeat(auto-fit, minmax(70px, 110px));
} }
.overview-question-btn { font-size: .95rem } .overview-question-btn { font-size: .95rem }
} }