Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Responsive for devices under 600px

Browse Source 
This doesn't not work for the Canvas Painting yet, but works on img2img and text2img
This commit is contained in:
AdamOStark 2022-12-05 17:12:20 -08:00 committed by blessedcoolant
parent 0439b51a26
commit b77f34998c
2 changed files with 160 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

159
frontend/src/styles/Mixins/_Responsive.scss Normal file
View File

@ -0,0 +1,159 @@
@media (max-width: 600px) {
#root{
.app-content{
padding: 5px;
.site-header {
position: fixed;
display: flex;
height: 100px;
z-index: 1;
.site-header-left-side{
position: absolute;
display: flex;
min-width: 145px;
float: left;
padding-left: 0;
}
.site-header-right-side{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 25px 25px 25px;
grid-template-areas: 'logoSpace logoSpace logoSpace sampler sampler sampler'
'status status status status status status'
'btn1 btn2 btn3 btn4 btn5 btn6';
row-gap: 15px;
.chakra-popover__popper{
grid-area: logoSpace;
}
> :nth-child(1).chakra-text{
grid-area: status;
width: 100%;
display: flex;
justify-content: center;
}
> :nth-child(2){
grid-area: sampler;
display: flex;
justify-content: center;
align-items: center;
select{
width: 185px;
margin-top: 10px;
}
.chakra-select__icon-wrapper{
right:10px;
svg{
margin-top: 10px;
}
}
}
> :nth-child(3){
grid-area: btn1;
}
> :nth-child(4){
grid-area: btn2;
}
> :nth-child(6){
grid-area: btn3;
}
> :nth-child(7){
grid-area: btn4;
}
> :nth-child(8){
grid-area: btn5;
}
> :nth-child(9){
grid-area: btn6;
}
}
}
.app-tabs{
position: fixed;
display: flex;
flex-direction: column;
row-gap: 15px;
max-width: 100%;
overflow: hidden;
margin-top: 120px;
.app-tabs-list{
display: flex;
justify-content: space-between;
}
.app-tabs-panels{
overflow: hidden;
overflow-y: scroll;
.workarea-main{
display: grid;
grid-template-areas: 'workarea'
'options'
'gallery';
row-gap: 15px;
.options-panel-wrapper{
grid-area: options;
width: 100%;
max-width: 100%;
height: inherit;
overflow: inherit;
padding: 0 10px;
.main-options-row{
max-width: 100%;
}
.advanced-settings-item{
max-width: 100%;
}
}
.workarea-children-wrapper{
grid-area: workarea;
.workarea-split-view{
display: flex;
flex-direction: column;
}
.current-image-options{
column-gap: 3px;
}
.text-to-image-area{
padding: 0;
}
.current-image-preview {
height: 430px;
}
//image 2 image
.image-upload-button {
row-gap: 10px;
padding: 5px;
svg {
width: 2rem;
height: 2rem;
margin-top: 10px;
}
}
//Cavas Painting
.inpainting-settings{
display: flex;
flex-wrap: wrap;
row-gap: 10px;
}
.inpainting-canvas-area{
.konvajs-content{
height: 400px !important;
}
}
}
.image-gallery-wrapper{
grid-area: gallery;
min-height: 400px;
.image-gallery-popup{
width: 100% !important;
max-width: 100% !important;
}
}
}
}
}
}
}
}

1
frontend/src/styles/Mixins/index.scss
View File

@ -1,3 +1,4 @@
@forward './Shared';
@forward './Buttons';
@forward './Variables';
@forward './Responsive';