Merge pull request VitorCarvalho67#93 from VitorCarvalho67/dev

Finish responsiveness in shared pesquisa page
Daniel-Alvarenga · Nov 2, 2024 · 494c8dd · 494c8dd
2 parents 8d548f5 + bdd0953
commit 494c8dd
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 5 deletions.
diff --git a/client/src/scss/pages/aluno/_profile.scss b/client/src/scss/pages/aluno/_profile.scss
@@ -109,25 +109,37 @@ main {
                 height: 300px;
             }
 
+            @include m-screen(820px) {
+                height: 200px;
+            }
+
             .capaProfile {
                 height: 66.66%;
                 border-radius: 6px;
                 background-color: $secondary-color-dark;
-
+                
                 > img {
                     height: 100%;
                     width: 100%;
                     border-radius: 6px;
                     @include flex-center;
                     object-fit: cover;
                 }
+
+
             }
 
             .infoProfile {
                 @include flex(row, flex-start, center);
                 z-index: 2;
                 position: relative;
 
+                @include m-screen(580px) {
+                    @include flex(column, flex-start, start);
+                    position: absolute;
+                    top: 20px;
+                }
+
                 > img {
                     @include flex-center;
                     position: absolute;
@@ -149,6 +161,15 @@ main {
                         height: 180px;
                         width: 180px;
                     }
+
+                    @include m-screen(660px) {
+                        height: 140px;
+                        width: 140px;
+                    }
+
+                    @include m-screen(580px) {
+                        position: relative;
+                    }
                 }
 
                 .inputUpload {
@@ -157,7 +178,6 @@ main {
                     height: 250px;
                     width: 250px;
                     background-color: rgba(0, 0, 0, 0.664);
-                    position: absolute;
                     bottom: 0;
                     height: 250px;
                     width: 250px;
@@ -169,6 +189,21 @@ main {
                         width: 200px;
                     }
 
+                    @include m-screen(760px) {
+                        height: 180px;
+                        width: 180px;
+                    }
+
+                    @include m-screen(660px) {
+                        height: 140px;
+                        width: 140px;
+                    }
+
+                    @include m-screen(580px) {
+                        position: absolute;
+                        top: 0px;
+                    }
+
                     input {
                         z-index: 2;
                         width: 100%;
@@ -183,6 +218,11 @@ main {
                         height: 40px;
                         width: 40px;
                         filter: invert(100%);
+
+                        @include m-screen(580px) {
+                            height: 30px;
+                            width: 30px;
+                        }
                     }
                 }
 
@@ -196,6 +236,16 @@ main {
                     @include m-screen(1300px) {
                         top: 90px;
                     }
+
+                    @include m-screen(800px) {
+                        top: 80px;
+                    }
+
+                    @include m-screen(580px) {
+                        top: 120px;
+                        left: 150px
+                    }
+
                 }
 
                 .info {
@@ -211,6 +261,15 @@ main {
                         margin-left: 170px;
                     }
 
+                    @include m-screen(660px) {
+                        margin-left: 140px;
+                    }
+
+                    @include m-screen(580px) {
+                        margin-left: 0px;
+                    }
+
+
                     .box1 h1 {
                         @include font-inter(300);
                         font-size: 2rem;
@@ -222,6 +281,9 @@ main {
                         @include m-screen(760px) {
                             font-size: 1.4rem;
                         }
+                        @include m-screen(580px) {
+                            font-size: 1.2rem;
+                        }
                     }
                     .box2 {
                         @include flex(row, flex-start, center);
@@ -244,6 +306,11 @@ main {
         .sobreMim {
             @include flex(column, flex-start, start);
             width: 100%;
+            margin-top: 30px;
+
+            @include m-screen(580px) {
+                margin-top: 60px;
+            }
 
             h2 {
                 @include font-inter(700);

diff --git a/client/src/scss/pages/shared/_pesquisa.scss b/client/src/scss/pages/shared/_pesquisa.scss
@@ -21,9 +21,18 @@
 
             .search {
                 @include flex(row, center, start);
-                width: 62%;
+                width: 100%;
+                max-width: 1000px;
                 padding: 80px 30px 20px 80px;
 
+                @include m-screen(800px) {
+                    padding: 80px 30px 20px 20px;
+                }
+
+                @include m-screen(520px) {
+                    padding: 80px 10px 20px 10px;
+                }
+
                 .box {
                     @include flex(row, cen, start);
                     height: 50px;
@@ -47,6 +56,7 @@
                         height: 100%;
                         background-color: transparent;
                         border: none;
+                        margin-right: 18px;
 
                         img {
                             height: 55%;
@@ -66,7 +76,7 @@
                 overflow-y: auto;
 
                 @include m-screen(1400px) {
-                    @include flex(column, center, center);
+                    @include flex(column, flex-start, center);
                     padding: 50px 0px 0px 0px;
                     width: 100%;
                 }
@@ -82,6 +92,10 @@
                     font-size: small;
                     font-weight: 200;
                     @include font-inter(600);
+
+                    @include m-screen(1100px) {
+                        width: 90%;
+                    }
                 }
 
                 .user {
@@ -93,11 +107,17 @@
                     @include m-screen(1400px) {
                         width: 70%;
                     }
+
+                    @include m-screen(1100px) {
+                        width: 80%;
+                    }
 
                     @include m-screen(800px) {
                         width: 90%;
                     }
 
+
+
                     a {
                         @include flex(row, flex-start, start);
                         width: 100%;
@@ -135,6 +155,10 @@
                                 height: 100%;
                                 @include flex(column, center, center);
 
+                                @include m-screen(520px) {
+                                    display: none;
+                                }                
+
                                 button {
                                     padding: 10px 20px;
                                     border-radius: 10px;

diff --git a/server/src/index.ts b/server/src/index.ts
@@ -32,7 +32,7 @@ const httpServer = http.createServer(app);
 
 const io = new Server(httpServer, {
     cors: {
-    origin: ["http://localhost:5173", "https://boot.portfolioeducacionalrgs.com", "https://bootminio.portfolioeducacionalrgs.com", "https://bootserver.portfolioeducacionalrgs.com", "http://192.168.100.10:5173", "http://192.168.56.1:5173/"],
+    origin: ["http://localhost:5173", "https://boot.portfolioeducacionalrgs.com", "https://bootminio.portfolioeducacionalrgs.com", "https://bootserver.portfolioeducacionalrgs.com", "http://192.168.100.10:5173", "http://192.168.56.1:5173"],
         methods: ["GET", "POST"]
     }
 });