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

Refactor series item layout to use responsive grid for improved display and interaction

Browse Source
This commit is contained in:
Ross
2026-03-02 11:19:45 +00:00
parent 904c023bf1
commit 7caaa425ed
1 changed files with 33 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
atlas/templates/atlas/user_uploads.html
+33 -5
View File
@@ -367,11 +367,39 @@
.series-block-popup-link a { color: var(--muted); text-decoration: underline; } .series-block-popup-link a { color: var(--muted); text-decoration: underline; }
.series-item { display: flex; gap: 12px; align-items: flex-start; } /* Grid layout for series items: responsive flex-wrap cards */
.series-left { flex: 1; } .study-series-list { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; }
.series-right { margin-left: auto; text-align: right; } .study-series-list ul { margin: 0; padding: 0; }
.series-title { margin: 0 0 4px 0; font-size: 1rem; font-weight: 700; } .study-series-list li { list-style: none; }
.series-meta div { line-height: 1.1; }
.series-item {
box-sizing: border-box;
width: calc(33.333% - 8px);
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
transition: box-shadow 120ms ease, transform 120ms ease;
}
.series-item:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.4); transform: translateY(-2px); }
.series-left { display: block; }
.series-right { align-self: flex-end; text-align: right; }
.series-title { margin: 0 0 6px 0; font-size: 1rem; font-weight: 700; }
.series-meta div { line-height: 1.2; color: var(--muted); }
/* Responsive breakpoints */
@media (max-width: 991px) {
.series-item { width: calc(50% - 8px); }
}
@media (max-width: 575px) {
.series-item { width: 100%; }
.series-right { text-align: left; }
}
/* Selected state */ /* Selected state */
#series-list .selected { #series-list .selected {