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:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user