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 {
display: flex;
display: grid;
height: 100vh;
background: #000;
@media (max-width: 800px) {
flex-direction: column;
/* Mobile: vertical stack with preview on top, controls below */
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 {
flex: 1;
grid-area: preview;
display: flex;
align-items: center;
justify-content: center;
background: #000;
position: relative;
min-height: 400px;
container-type: size;
/* The outfit viewer is a square filling the space, to at most 600px. */
@ -369,18 +378,13 @@ body.wardrobe-v2 {
}
.outfit-controls-section {
width: 400px;
grid-area: controls;
background: #fff;
padding: 2rem;
box-sizing: border-box;
overflow-y: auto;
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
@media (max-width: 800px) {
width: 100%;
max-height: 40vh;
}
h1 {
margin-top: 0;
font-size: 1.75rem;