Updade aluno profile style

VitorCarvalho67 · Jun 7, 2024 · 0557a4e · 0557a4e
1 parent d2df0df
commit 0557a4e
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 33 deletions.
diff --git a/client/src/scss/pages/aluno/_profile.scss b/client/src/scss/pages/aluno/_profile.scss
@@ -13,7 +13,7 @@ main {
         .capaProfile {
             height: 66.66%;
             border-radius: 16px;
-            background-color: rgb(0, 50, 158);
+            background-color: $secondary-color-dark;
 
             img {
                 height: 100%;
@@ -33,7 +33,7 @@ main {
                 width: 250px;
                 object-fit: cover;
                 border-radius: 50%;
-                background-color: rgb(255, 68, 130);
+                background-color: $terciary-color-dark;
             }
 
             .info {
@@ -71,7 +71,7 @@ main {
             margin: 20px 0px 10px 0px;
         }
 
-        div {
+        > div {
             position: relative;
             width: 100%;
             background-color: $secondary-color-dark;
@@ -84,6 +84,7 @@ main {
                 @include font-inter(300);
                 font-size: 1rem;
                 color: $font-color-dark-2;
+                min-height: 300px;
             }
 
             textarea {
@@ -92,26 +93,42 @@ main {
                 outline: none;
                 min-width: 100%;
                 height: auto;
-                min-height: 300px;
                 resize: none;
             }
 
-            .edit {
+            > .editButtons {
                 @include flex-center;
                 position: absolute;
+                z-index: 2;
                 bottom: 10px;
                 right: 10px;
-                background-color: transparent;
-                border: none;
-                height: 30px;
-                width: 30px;
-                border-radius: 50%;
 
-                img {
-                    height: 60%;
-                    width: 60%;
-                    object-fit: cover;
-                    filter: invert(100%)
+                button {
+                    @include flex-center;
+                    margin-inline-end: 10px;
+                    background-color: transparent;
+                    border: none;
+                    border-radius: 5px;
+                    padding: 4px 6px;
+                    color: $font-color-dark;
+                    @include font-inter(700);
+                    box-shadow: 0px 0px 2px $font-color-dark-2;
+
+                    > * {
+                        margin-inline-end: 3px;
+                    }
+
+                    img {
+                        height: 18px;
+                        width: 18px;
+                        object-fit: cover;
+                        filter: invert(100%);
+                    }
+
+                    &:hover {
+                        background-color: $primary-color-dark;
+                        box-shadow: 0px 0px 4px $font-color-dark-2;
+                    }
                 }
             }
         }

diff --git a/client/src/socket.js b/client/src/socket.js
@@ -1,8 +1,8 @@
 import { io } from "socket.io-client";
 import { reactive } from 'vue';
 
-// export const server_url = "http://localhost:3333";
-export const server_url = "https://2e5dc0ad80a147891a8a800bb5797bb6.serveo.net/";
+export const server_url = "http://localhost:3333";
+// export const server_url = "https://2e5dc0ad80a147891a8a800bb5797bb6.serveo.net/";
 export const socket = io(server_url);
 
 export const state = reactive({

diff --git a/client/src/views/aluno/Profile.vue b/client/src/views/aluno/Profile.vue
@@ -23,15 +23,19 @@
                 <h2>Sobre mim</h2>
                 <div>
                     <p v-show="mode === 'view'" v-html="aluno.curriculo"></p>
-                    <button class="edit" v-show="mode === 'view'" @click="editMode" type="button">
-                        <img :src="imgLapis" alt="">
-                    </button>
-                    <textarea v-show="mode === 'edit'" name="" id="" cols="30" rows="10"
-                        v-model="aluno.curriculoEdit"></textarea>
-
-
-                    <button v-show="mode === 'edit'" @click="updateCurriculoSubmit" type="button">Salvar</button>
-                    <button v-show="mode === 'edit'" @click="cancel" type="button">Cancelar</button>
+                    <textarea v-show="mode === 'edit'" name="" cols="30" rows="10" id="edit"
+                    v-model="aluno.curriculoEdit" ref="edit"></textarea>
+                    <div class="editButtons">
+                        <button v-show="mode === 'view'" @click="editMode" type="button">
+                            <img :src="imgLapis" alt="">Editar
+                        </button>
+                        <button v-show="mode === 'edit'" @click="updateCurriculoSubmit" type="button">
+                            <img :src="imgVerificar">Salvar
+                        </button>
+                        <button v-show="mode === 'edit'" @click="cancel" type="button">
+                            <img :src="imgCruz">Cancelar
+                        </button>
+                    </div>
                 </div>
             </section>
         </main>
@@ -42,12 +46,11 @@
 <script>
 import Header from '../../components/Header.vue';
 import Footer from '../../components/Footer.vue';
-
-import router from '../../router/index.js';
-import Cookies from 'js-cookie';
 import { getCurriculo, updateCurriculo } from '../../services/api/aluno';
 import { mixinAluno } from '../../util/authMixins';
-import imgLapis from '../../assets/icons/lapis.png'
+import imgLapis from '../../assets/icons/lapis.png';
+import imgVerificar from '../../assets/icons/verificar.png';
+import imgCruz from '../../assets/icons/cruz.png';
 
 export default {
     name: 'PerfilAluno',
@@ -66,7 +69,9 @@ export default {
                 curriculoEdit: ''
             },
             mode: 'view',
-            imgLapis
+            imgLapis,
+            imgVerificar,
+            imgCruz
         };
     },
     methods: {
@@ -81,14 +86,19 @@ export default {
                 alert("Ops.. Algo deu errado ao alterar o campo \"sobre mim\". 😕\n" + response.message);
             }
 
-            await this.getCurriculoAluno()
+            await this.getCurriculoAluno();
             this.editMode();
         },
         editMode() {
             this.mode = this.mode === 'view' ? 'edit' : 'view';
+            this.$nextTick(() => {
+                if (this.mode === 'edit') {
+                    this.$refs.edit.focus();
+                }
+            });
         },
         async cancel() {
-            await this.getCurriculoAluno()
+            await this.getCurriculoAluno();
             this.editMode();
         },
         calcularIdade(nascimento) {