PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-08-10 15:21:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

tfe: rework desktop layout to 35/65 flex columns, independent scrolling, no horizontal overflow

Browse Source 
Switched from grid to flex for two-column layout
Left column (flex: 0 0 35%): author, title, meta, synopsis — scrolls independently  
Right column (flex: 1): files/media — scrolls independently
Added .tfe-file-iframe class to PDF/website iframes, scoped width/height constraints
All media gets width:100% + max-width:100% to prevent overflow
Mobile (<900px): reverts to single-column page-level scrolling
This commit is contained in:
Pontoporeia
2026-07-06 19:51:42 +02:00
parent 0979267c68
commit fa6d19f767
3 changed files with 67 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/public/assets/css/tfe.css
+52 -16
View File
@@ -6,42 +6,62 @@
.tfe-main {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: var(--space-l) var(--space-m) var(--space-xl);
overflow: hidden;
padding: var(--space-l) var(--space-m) 0;
}
/* Stacked article layout */
/* Stacked article layout — fills main height */
.tfe-layout {
display: flex;
flex-direction: column;
gap: var(--space-xl);
width: 100%;
height: 100%;
min-height: 0;
}
/* Row 1: Author above Title */
/* Row 1: Author above Title (kept for backward compat, no longer used) */
.tfe-header-row {
display: flex;
flex-direction: column;
gap: var(--space-3xs);
}
/* Row 2: Two columns — meta left, synopsis right */
/* Two-column layout: left 35vw (info), right fills remaining (files) */
.tfe-content-row {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-columns: 35vw 1fr;
gap: var(--space-xl);
align-items: start;
flex: 1;
min-height: 0;
}
/* Row 3: Files flex container */
/* Left column: stacks author, title, meta, synopsis — scrolls independently */
.tfe-left-column {
display: flex;
flex-direction: column;
gap: var(--space-m);
overflow-y: auto;
min-width: 0;
}
/* Right column: holds files — scrolls independently */
.tfe-right-column {
display: flex;
flex-direction: column;
overflow-y: auto;
min-width: 0;
}
/* Files container inside right column */
.tfe-files {
display: flex;
flex-wrap: wrap;
flex-direction: column;
gap: var(--space-m);
}
.tfe-file-item {
flex: 1 1 300px;
width: 100%;
min-width: 0;
overflow: hidden;
border-radius: var(--radius);
@@ -59,6 +79,7 @@
.tfe-file-item embed,
.tfe-file-item video {
width: 100%;
max-width: 100%;
display: block;
border: none;
}
@@ -67,8 +88,13 @@
max-height: 500px;
}
.tfe-file-item embed {
.tfe-file-item embed,
.tfe-file-iframe {
width: 100%;
max-width: 100%;
height: clamp(300px, 80vh, 700px);
display: block;
border: none;
}
.tfe-file-item figcaption {
@@ -270,13 +296,23 @@
/* Responsive */
@media (max-width: 900px) {
.tfe-content-row {
grid-template-columns: 1fr;
gap: var(--space-l);
.tfe-main {
overflow-y: auto;
}
.tfe-file-item {
flex: 1 1 100%;
.tfe-layout {
height: auto;
min-height: auto;
}
.tfe-content-row {
grid-template-columns: 1fr;
flex: none;
}
.tfe-left-column,
.tfe-right-column {
overflow-y: visible;
}
.tfe-title {