OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity

[WV2] More advanced mobile layout

Browse source
This commit is contained in:
Emi Matchu 2025-12-26 22:32:20 -08:00
parent ba0612b694
commit 74386b45d7
1 changed files with 15 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
app/assets/stylesheets/wardrobe/show.css
View file

@ -9,23 +9,32 @@ body.wardrobe-v2 {
} }
.wardrobe-container { .wardrobe-container {
display: flex; display: grid;
height: 100vh; height: 100vh;
background: #000; background: #000;
@media (max-width: 800px) { /* Mobile: vertical stack with preview on top, controls below */
flex-direction: column; grid-template-areas:
"preview"
"controls";
grid-template-rows: minmax(100px, 45%) minmax(300px, 55%);
grid-template-columns: 100%;
/* Desktop: side-by-side layout */
@media (min-width: 801px) {
grid-template-areas: "preview controls";
grid-template-rows: 100%;
grid-template-columns: 50% 50%;
} }
} }
.outfit-preview-section { .outfit-preview-section {
flex: 1; grid-area: preview;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: #000; background: #000;
position: relative; position: relative;
min-height: 400px;
container-type: size; container-type: size;
/* The outfit viewer is a square filling the space, to at most 600px. */ /* The outfit viewer is a square filling the space, to at most 600px. */
@ -369,18 +378,13 @@ body.wardrobe-v2 {
} }
.outfit-controls-section { .outfit-controls-section {
width: 400px; grid-area: controls;
background: #fff; background: #fff;
padding: 2rem; padding: 2rem;
box-sizing: border-box; box-sizing: border-box;
overflow-y: auto; overflow-y: auto;
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3); box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
@media (max-width: 800px) {
width: 100%;
max-height: 40vh;
}
h1 { h1 {
margin-top: 0; margin-top: 0;
font-size: 1.75rem; font-size: 1.75rem;