From b77f34998cf5048a11f34a7404aa1473cfc301ce Mon Sep 17 00:00:00 2001
From: AdamOStark <pandasonicpdx@gmail.com>
Date: Mon, 5 Dec 2022 17:12:20 -0800
Subject: [PATCH] Responsive for devices under 600px

This doesn't not work for the Canvas Painting yet, but works on img2img and text2img
---
 frontend/src/styles/Mixins/_Responsive.scss | 159 ++++++++++++++++++++
 frontend/src/styles/Mixins/index.scss       |   1 +
 2 files changed, 160 insertions(+)
 create mode 100644 frontend/src/styles/Mixins/_Responsive.scss

diff --git a/frontend/src/styles/Mixins/_Responsive.scss b/frontend/src/styles/Mixins/_Responsive.scss
new file mode 100644
index 0000000000..1213e088c3
--- /dev/null
+++ b/frontend/src/styles/Mixins/_Responsive.scss
@@ -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;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
diff --git a/frontend/src/styles/Mixins/index.scss b/frontend/src/styles/Mixins/index.scss
index 53cf03adf2..8a3639d2bc 100644
--- a/frontend/src/styles/Mixins/index.scss
+++ b/frontend/src/styles/Mixins/index.scss
@@ -1,3 +1,4 @@
 @forward './Shared';
 @forward './Buttons';
 @forward './Variables';
+@forward './Responsive';
\ No newline at end of file