feat(ui): redesign upload page into a two-column layout

Redesigns the upload interface to use a two-column grid layout on larger screens, separating the file drop-zone (left) from the upload options (right). This improves usability and visual hierarchy.

Changes include:
- Increasing the upload view max-width to 64rem.
- Creating a responsive `.upload-grid` that collapses to a single column on narrow viewports.
- Stacking option fields vertically in the narrower options panel.
- Adding retro theme support for the new options title.
This commit is contained in:
2026-05-31 16:41:04 +03:00
parent 48d3c0475f
commit 704efb019c
4 changed files with 85 additions and 38 deletions

View File

@@ -1,5 +1,5 @@
.upload-view {
width: min(48rem, calc(100% - 2rem));
width: min(64rem, calc(100% - 2rem));
min-height: calc(100vh - 7.25rem);
margin: 0 auto;
padding: 2.5rem 0;
@@ -9,6 +9,45 @@
gap: 1.5rem;
}
/* Two-column upload layout: drop-zone window on the left, options on the
right. Collapses to a single column on narrow screens (see 90-responsive). */
.upload-grid {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
gap: 1.25rem;
align-items: start;
}
.upload-main,
.upload-options {
margin: 0;
}
.options-title {
margin: 0 0 1.1rem;
font-size: 1.05rem;
font-weight: 650;
line-height: 1.2;
}
/* Stack the option fields vertically in the narrower right-hand window. */
.upload-options .option-grid {
grid-template-columns: 1fr;
margin-top: 0;
}
/* Summary + upload button sit at the bottom of the options window. */
.upload-options .form-footer {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
margin-top: 1.25rem;
}
.upload-options .form-footer .button {
width: 100%;
}
.hero-copy {
text-align: center;
}