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

Fix outfit sizing in wardrobe v2

Browse source
This commit is contained in:
Emi Matchu 2025-11-02 07:58:11 +00:00
parent 276cc1b5ea
commit a00d57bcbb
2 changed files with 131 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

131
app/assets/stylesheets/outfits/new_v2.css Normal file
View file

@ -0,0 +1,131 @@
body.wardrobe-v2 {
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
font-family: sans-serif;
}
.wardrobe-container {
display: flex;
height: 100vh;
background: #000;
@media (max-width: 800px) {
flex-direction: column;
}
}
.outfit-preview-section {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background: #000;
position: relative;
min-height: 400px;
outfit-viewer {
width: 600px;
height: 600px;
max-width: min(100%, 100cqh);
max-height: min(100%, 100cqw);
aspect-ratio: 1;
container-type: size;
}
.no-preview-message {
color: white;
text-align: center;
padding: 2rem;
font-size: 1.2rem;
}
}
.outfit-controls-section {
width: 400px;
background: #fff;
padding: 2rem;
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;
color: #448844;
}
h2 {
font-size: 1.25rem;
color: #448844;
margin-top: 2rem;
}
}
.species-color-picker {
margin: 1.5rem 0;
.form-group {
margin-bottom: 1rem;
label {
display: block;
font-weight: bold;
margin-bottom: 0.5rem;
color: #333;
}
select {
width: 100%;
padding: 0.5rem;
font-size: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
font-family: inherit;
&:focus {
outline: none;
border-color: #448844;
}
}
}
}
.current-selection {
padding: 1rem;
background: #f0f0f0;
border-radius: 4px;
margin: 1rem 0;
p {
margin: 0;
color: #666;
}
strong {
color: #000;
}
}
.worn-items {
margin-top: 2rem;
ul {
list-style: none;
padding: 0;
margin: 0.5rem 0;
}
li {
padding: 0.5rem;
background: #f9f9f9;
margin-bottom: 0.5rem;
border-radius: 4px;
color: #333;
}
}

106
app/assets/stylesheets/outfits/new_v2.sass
View file

@ -1,106 +0,0 @@
body.wardrobe-v2
margin: 0
padding: 0
height: 100vh
overflow: hidden
font-family: sans-serif
.wardrobe-container
display: flex
height: 100vh
background: #000
@media (max-width: 800px)
flex-direction: column
.outfit-preview-section
flex: 1
display: flex
align-items: center
justify-content: center
background: #000
position: relative
min-height: 400px
outfit-viewer
width: 100%
height: 100%
.no-preview-message
color: white
text-align: center
padding: 2rem
font-size: 1.2rem
.outfit-controls-section
width: 400px
background: #fff
padding: 2rem
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
color: #448844
h2
font-size: 1.25rem
color: #448844
margin-top: 2rem
.species-color-picker
margin: 1.5rem 0
.form-group
margin-bottom: 1rem
label
display: block
font-weight: bold
margin-bottom: 0.5rem
color: #333
select
width: 100%
padding: 0.5rem
font-size: 1rem
border: 1px solid #ccc
border-radius: 4px
font-family: inherit
&:focus
outline: none
border-color: #448844
.current-selection
padding: 1rem
background: #f0f0f0
border-radius: 4px
margin: 1rem 0
p
margin: 0
color: #666
strong
color: #000
.worn-items
margin-top: 2rem
ul
list-style: none
padding: 0
margin: 0.5rem 0
li
padding: 0.5rem
background: #f9f9f9
margin-bottom: 0.5rem
border-radius: 4px
color: #333