Merge pull request #12 from VitorCarvalho67/dev

Increase and create aluno routes and home, login, and register respon…
VitorCarvalho67 · May 28, 2024 · dc7e22d · dc7e22d
2 parents cbff317 + 3935cf0
commit dc7e22d
Show file tree

Hide file tree

Showing 106 changed files with 1,007 additions and 422 deletions.
diff --git a/client/src/App.vue b/client/src/App.vue
@@ -1,14 +1,16 @@
 <template>
-    <router-view id="app"/>
+    <router-view id="app" />
 </template>
-  
+
 <script>
-    
+
 export default {
     name: 'App'
 }
 </script>
 
 <style lang="scss">
-body { @include theme-color('dark'); }
+body {
+    @include theme-color('dark');
+}
 </style>
diff --git a/client/src/assets/icons/hamburger.png b/client/src/assets/icons/hamburger.png
diff --git a/client/src/components/Header.vue b/client/src/components/Header.vue
@@ -18,6 +18,11 @@
                 </li>
                 <li><router-link to="/">Sobre Nós</router-link></li>
                 <li><router-link to="/register">Cadastre-se Agora</router-link></li>
+                <li class="hamburger">
+                    <button>
+                        <img :src="imgHamburger" alt="">
+                    </button>
+                </li>
                 <li><router-link to="/login">Entrar</router-link></li>
             </ul>
         </nav>
@@ -28,6 +33,7 @@
 import { defineComponent, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import logo from '../assets/imgs/logoHeader.png'
+import hamburger from '../assets/icons/hamburger.png'
 
 export default defineComponent({
     name: 'Header',
@@ -42,6 +48,7 @@ export default defineComponent({
         return {
             router,
             imagem: logo,
+            imgHamburger: hamburger,
             spanView,
             toggleSpanView,
         }

diff --git a/client/src/router/guards/guards.js b/client/src/router/guards/guards.js
@@ -1,12 +1,12 @@
 import Cookies from 'js-cookie';
-import { authAluno }  from '../../services/api/aluno';
-import { authAdmin }  from '../../services/api/admin';
-import { authProfessor }  from '../../services/api/professor';
-import { authFuncionario }  from '../../services/api/funcionario';
-import { authEmpresa }  from '../../services/api/empresa';
+import { authAluno } from '../../services/api/aluno';
+import { authAdmin } from '../../services/api/admin';
+import { authProfessor } from '../../services/api/professor';
+import { authFuncionario } from '../../services/api/funcionario';
+import { authEmpresa } from '../../services/api/empresa';
 
 // isAuths
-export async function isAuthAluno(){
+export async function isAuthAluno() {
     var token = Cookies.get('token');
     if (!token) {
         return false;
@@ -16,9 +16,9 @@ export async function isAuthAluno(){
             return (response.data == "Aluno autenticado com sucesso.") ? true : false
         } catch (error) {
             return false;
-        }    
-    }    
-}    
+        }
+    }
+}
 
 export async function isAuthAdmin() {
     var token = Cookies.get('token-admin');
@@ -30,25 +30,25 @@ export async function isAuthAdmin() {
             return (response.data == "Admin autenticado com sucesso.") ? true : false
         } catch (error) {
             return false;
-        }    
-    }    
-}    
+        }
+    }
+}
 
-export async function isAuthEmpresa(){
+export async function isAuthEmpresa() {
     var token = Cookies.get('token-empresa');
     if (!token) {
         return false;
     } else {
         try {
             const response = await authEmpresa(token);
-            return(response.data == "Empresa autenticada com sucesso.") ? true : false;
+            return (response.data == "Empresa autenticada com sucesso.") ? true : false;
         } catch (error) {
             return false;
         }
     }
 }
 
-export async function isAuthFuncionario(){
+export async function isAuthFuncionario() {
     var token = Cookies.get('token-funcionario');
     if (!token) {
         return false;
@@ -62,7 +62,7 @@ export async function isAuthFuncionario(){
     }
 }
 
-export async function isAuthProfessor(){
+export async function isAuthProfessor() {
     var token = Cookies.get('token-professor');
     if (!token) {
         return false;
@@ -78,41 +78,41 @@ export async function isAuthProfessor(){
 
 
 // isRegisterings
-export async function isRegistering(){
+export async function isRegistering() {
     return (Cookies.get('email-registro-aluno')) ? true : false;
-}    
+}
 
-export async function isRegisteringEmpresa(){
+export async function isRegisteringEmpresa() {
     return (Cookies.get('cnpj-registro-empresa')) ? true : false;
 }
 
 // isRecoverings
-export async function isRecoveringAluno(){
+export async function isRecoveringAluno() {
     return (Cookies.get('email-recovery-aluno')) ? true : false;
-}    
+}
 
-export async function isRecoveringEmpresa(){
+export async function isRecoveringEmpresa() {
     return (Cookies.get('email-recovery-empresa')) ? true : false;
 }
 
-export async function isRecoveringFuncionario(){
+export async function isRecoveringFuncionario() {
     return (Cookies.get('email-recovery-funcionario')) ? true : false;
 }
 
-export async function isRecoveringProfessor(){
+export async function isRecoveringProfessor() {
     return (Cookies.get('email-recovery-professor')) ? true : false;
 }
 
 // isInitings
-export async function isInitingFuncionario(){
+export async function isInitingFuncionario() {
     return (Cookies.get('email-init-funcionario')) ? true : false;
 }
 
-export async function isInitingProfessor(){
+export async function isInitingProfessor() {
     return (Cookies.get('email-init-professor')) ? true : false;
 }
 
 // isCompleted
-export async function isCompletedAluno(){
+export async function isCompletedAluno() {
     return (Cookies.get('completed') && Cookies.get('completed') == true && await isAuthAluno() ? true : false) ? true : false;
 }
diff --git a/client/src/scss/abstracts/_mixins.scss b/client/src/scss/abstracts/_mixins.scss
@@ -25,13 +25,10 @@
 }
 
 @mixin theme-color($theme) {
-    @if $theme=="light" {
-        @include color($font-color-light,
-        $bg-color-light);
-    }
-    @else if $theme=="dark" {
-        @include color($font-color-dark,
-        $bg-color-dark);
+    @if $theme== "light" {
+        @include color($font-color-light, $bg-color-light);
+    } @else if $theme== "dark" {
+        @include color($font-color-dark, $bg-color-dark);
     }
 }
 
@@ -41,21 +38,48 @@
     }
 }
 
+@mixin m-screen-box {
+    @include m-screen(1250px) {
+        height: 80%;
+        width: 50%;
+    }
+    @include m-screen(900px) {
+        height: 80%;
+        width: 80%;
+        border-radius: 0px;
+    }
+    @include m-screen(1150px) {
+        height: 90%;
+        width: 60%;
+    }
+    @include m-screen(850px) {
+        height: 95%;
+        width: 80%;
+    }
+    @include m-screen(600px) {
+        height: 95%;
+        width: 98%;
+    }
+    @include m-screen(400px) {
+        padding: 0px;
+    }
+}
+
 @mixin line {
     &:after {
-        content: '';
+        content: "";
         width: 0px;
         height: 1px;
         display: flex;
         flex-direction: column;
-        content: '';
+        content: "";
         height: 2px;
         width: 0%;
         background-color: $primary-color-orange;
     }
 
     &:hover::after {
-        animation: afterLoad .8s ease-out;
+        animation: afterLoad 0.8s ease-out;
         width: 100%;
     }
 
@@ -76,4 +100,4 @@
     -moz-#{$property}: $value;
     -ms-#{$property}: $value;
     -o-#{$property}: $value;
-}
+}
diff --git a/client/src/scss/abstracts/_variables.scss b/client/src/scss/abstracts/_variables.scss
@@ -11,4 +11,4 @@ $secondary-color-dark: #1a1a1a;
 $terciary-color-dark: #202020;
 
 $primary-color-orange: #ff872b;
-$secondary-color-orange: #deb99b;
+$secondary-color-orange: #deb99b;
diff --git a/client/src/scss/base/_base.scss b/client/src/scss/base/_base.scss
@@ -17,8 +17,10 @@ main {
     min-height: calc(100vh - 80px);
 }
 
-img, button, a{
+img,
+button,
+a {
     -webkit-user-select: none;
     user-select: none;
-    transition: .2s;
-}
+    transition: 0.2s;
+}
diff --git a/client/src/scss/base/_typography.scss b/client/src/scss/base/_typography.scss
@@ -1 +1 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap");
diff --git a/client/src/scss/layouts/_cards.scss b/client/src/scss/layouts/_cards.scss
@@ -6,6 +6,15 @@
     @include m-screen(1400px) {
         min-height: 360px;
     }
+    @include m-screen(1120px) {
+        padding: 80px;
+    }
+    @include m-screen(820px) {
+        padding: 40px 60px;
+    }
+    @include m-screen(600px) {
+        padding: 40px;
+    }
 
     h1,
     h2 {
@@ -19,6 +28,12 @@
         @include m-screen(1400px) {
             font-size: 1.8rem;
         }
+        @include m-screen(1120px) {
+            font-size: 1.6rem;
+        }
+        @include m-screen(860px) {
+            font-size: 1.3rem;
+        }
     }
 
     h2 {
@@ -28,6 +43,12 @@
         @include m-screen(1400px) {
             font-size: 1.1rem;
         }
+        @include m-screen(1120px) {
+            font-size: 1rem;
+        }
+        @include m-screen(860px) {
+            font-size: 0.9rem;
+        }
     }
 
     .wrapper {

diff --git a/client/src/scss/layouts/_contactUs.scss b/client/src/scss/layouts/_contactUs.scss
@@ -3,12 +3,28 @@
     @include flex(row, space-around, center);
     height: 50vh;
     width: 100%;
+    @include m-screen(1000px) {
+        @include flex(row, center, center);
+    }
+    @include m-screen(680px) {
+        @include flex(column, center, center);
+        height: 60vh;
+    }
 
     .box {
         height: 100%;
         width: 25%;
         @include flex(column, center, flex-start);
         @include font-inter(300);
+        @include m-screen(1000px) {
+            width: 40%;
+            margin-inline: 10px;
+        }
+        @include m-screen(680px) {
+            width: 80%;
+            margin: 10px;
+            height: auto;
+        }
 
         h1 {
             color: $secondary-color-orange;
@@ -141,4 +157,10 @@
             }
         }
     }
+
+    #box2 {
+        @include m-screen(680px) {
+            @include flex-center;
+        }
+    }
 }