@burh/nuxt-core 1.0.114 → 1.0.115

package/components/burh-ds/Curriculum/UserCurriculum/UserCvLeftSide.vue

@@ -1,132 +1,97 @@
 <template>
-    <div class="cv-left col-5 bg-light--darken py-5 px-5" :class="  !currentUser ? 'disable-none' : '' ">
-        <div class="d-flex justify-content-center">
-            <a href="#!" class="avatar avatar-pdf">
-                <img alt="Image placeholder" :src="avatar" v-show="avatar" />
-                <p class="h5 font-weight-bold text-muted" v-show="!avatar">
-                    {{ handleGetPrefixes(name) }}
-                </p>
-            </a>
+    <div class="bg-white content-left">
+        <div class="profile w-100 text-center">
+            <div class="avatar">
+                <img :src="userData.urlAvatar" :alt="userData.name" />
+            </div>
+            <h4>{{ userData.name }}</h4>
+            <p>Front End no Burh</p>
+
+            <span>
+                <i class="fas fa-map-marker-alt"></i>
+                {{ userData.user_address.city_name }}
+            </span>
         </div>
-        <p class="text-center text-muted font-weight-bold mb-4">
-            {{ yearsOld ? `${yearsOld} anos` : "idade não informada" }}
-        </p>
-
-        <h2 class="display-4">Contato e Endereço</h2>
-        <p>
-            {{ street }}, {{ number }}<br v-show="number" />
-            {{ neighborhood }}<br v-show="neighborhood" />
-            {{ city }} - {{ regionCode }}
-        </p>
-        <p>
-            <strong>Telefone:</strong> {{ treatPhone(phone) }}<br />
-            <strong>Celular:</strong> {{ treatCellphone(cellphone) }}<br />
-        </p>
-
-        <h2 class="display-4 mt-4" v-show="education.length">Educação</h2>
-        <div
-            class="mb-4"
-            v-for="(edu, index) in education"
-            :key="`education-${index}`"
-        >
-            <h3 class="h6">{{ edu.institution }}</h3>
-            <h4 class="h6 text-muted">{{ edu.formation }}</h4>
-            <p>
-                {{ edu.start_month }}/{{ edu.start_year }} -
-                {{ treatEndDate(edu.end_month, edu.end_year) }}
-                {{ getTime(edu) }}
-                {{
-                    edu.user_education_period
-                        ? "-" + edu.user_education_period.name
-                        : ""
-                }}
+
+        <div class="skills title-block mt-3 ml-4">
+            <h5 class="font-weight-bold mb-0">Habilidades</h5>
+            <div class="line"></div>
+
+            <badge
+                rounded
+                type="primary"
+                v-for="(skill, index) in userData.user_skill"
+                :key="`skill-${index}`"
+                class="ml-1 mt-1"
+            >
+                {{ skill.skill_word }}
+            </badge>
+        </div>
+
+        <div class="languages title-block mt-3 ml-4">
+            <h5 class="font-weight-bold mb-0">Idiomas</h5>
+            <div class="line"></div>
+
+            <p v-for="(lan, index) in userData.user_language" :key="index">
+                {{ lan.language[0].name }} {{ languageLevel(lan.level) }}
             </p>
         </div>
 
-        <h2 class="display-4 mt-4" v-show="courses.length">
-            Cursos Profissionalizantes
-        </h2>
-        <div
-            class="mb-4"
-            v-for="(course, index) in courses"
-            :key="`course-${index}`"
-        >
-            <h4 class="h6">{{ course.name }}</h4>
-            <p>{{ course.institution }} {{ getTime(course) }}</p>
+        <div class="desidered title-block mt-3 ml-4">
+            <h5 class="font-weight-bold mb-0">Cargos desejados</h5>
+            <div class="line"></div>
+
+            <badge
+                rounded
+                type="primary"
+                v-for="(des, index) in userData.user_desired_job"
+                :key="`skill-${index}`"
+                class="ml-1 mt-1"
+            >
+                {{ des.occupation }}
+            </badge>
         </div>
 
-        <h2 class="display-4 mt-4" v-show="languages.length">Idiomas</h2>
-        <div
-            class="mb-4"
-            v-for="(lang, index) in languages"
-            :key="`lang-${index}`"
-        >
-            <h4 class="h6 d-inline-block mr-3">{{ lang.language[0].name }}</h4>
-            <el-tooltip placement="top" :content="languageLevel(lang.level)">
-                <div class="d-inline-block">
-                    <font-awesome-icon
-                        :icon="['fas', 'star']"
-                        class="mr-2"
-                        v-for="(j, posStar) in Array(7)"
-                        :key="`level-${lang.language[0].name}-${posStar}`"
-                        :class="posStar < lang.level && 'text-warning'"
-                    />
-                </div>
-            </el-tooltip>
+        <div class="socials text-center mt-5">
+            <i class="fab fa-facebook fa-2x"></i>
+            <i class="fab fa-facebook fa-2x ml-3"></i>
+            <i class="fab fa-linkedin fa-2x ml-3"></i>
+            <i class="fab fa-chrome fa-2x ml-3"></i>
         </div>
 
-        <h2 class="display-4 mt-4" v-show="skills.length">Habilidades</h2>
-        <badge
-            rounded
-            type="primary"
-            v-for="(skill, index) in skills"
-            :key="`skill-${index}`"
-            >{{ skill.skill_word }}</badge
-        >
+        <div class="burh-code text-center mt-4">
+            <vue-qrcode
+                :value="baseUrl + '/' + userData.id"
+                :options="{ width: 98, height: 98 }"
+                class="border qr-code"
+            ></vue-qrcode>
+            <p>Código BURH</p>
+            <span>{{ userData.id }}</span>
+        </div>
     </div>
 </template>
 
 <script>
-import getPrefixes from "~/util/getPrefixes.js";
+import getPrefixes from '~/util/getPrefixes.js';
+import VueQrcode from '@chenfengyuan/vue-qrcode';
 
 export default {
-    name: "user-cv-left-side",
+    name: 'user-cv-left-side',
+    components: {
+        VueQrcode
+    },
     props: {
-        name: String,
-        avatar: String,
-        yearsOld: String | Number,
-        city: String,
-        regionCode: String,
-        neighborhood: String,
-        street: String,
-        number: String,
-        cellphone: String,
-        phone: String,
-        currentUser: Object,
-        education: {
-            type: Array,
-            default: () => []
-        },
-        courses: {
-            type: Array,
-            default: () => []
-        },
-        skills: {
-            type: Array,
-            default: () => []
-        },
-        languages: {
-            type: Array,
-            default: () => []
-        }
+        userData: Object
     },
-    mounted(){
-        console.log(this.currentUser)
+    data() {
+        return {
+            baseUrl: process.env.baseAppUrl
+        };
     },
     methods: {
         getTime(
             { start_year = null, end_year = null, start_month, end_month },
-            textHappening = "Cursando"
+            textHappening = 'Cursando'
         ) {
             const isHappening = !end_month && !end_year;
 
@@ -135,12 +100,12 @@ export default {
             }
 
             const dateInitial = this.$moment(
-                ["1", start_month.toString(), start_year.toString()],
-                "DD/MM/YYYY"
+                ['1', start_month.toString(), start_year.toString()],
+                'DD/MM/YYYY'
             );
             const dateDone = this.$moment(
-                ["1", end_month.toString(), end_year.toString()],
-                "DD/MM/YYYY"
+                ['1', end_month.toString(), end_year.toString()],
+                'DD/MM/YYYY'
             );
             const diffDuration = this.$moment.duration(
                 dateDone.diff(dateInitial)
@@ -156,32 +121,32 @@ export default {
                 ? `(${months} meses)`
                 : months == 1
                 ? `(${months} mês)`
-                : "";
+                : '';
         },
         languageLevel(level) {
             switch (parseInt(level)) {
                 case 1:
-                    return "Iniciante";
+                    return 'Iniciante';
                 case 2:
-                    return "Elementar";
+                    return 'Elementar';
                 case 3:
-                    return "Pré-intermediário";
+                    return 'Pré-intermediário';
                 case 4:
-                    return "Intermediário";
+                    return 'Intermediário';
                 case 5:
-                    return "Intermediário Superior";
+                    return 'Intermediário Superior';
                 case 6:
-                    return "Avançado";
+                    return 'Avançado';
                 case 7:
-                    return "Fluente";
+                    return 'Fluente';
                 default:
-                    return "";
+                    return '';
             }
         },
         treatPhone(phone) {
             if (phone) {
-                if (phone == "0" || phone.length < 9 || !phone) {
-                    return "não cadastrado";
+                if (phone == '0' || phone.length < 9 || !phone) {
+                    return 'não cadastrado';
                 }
             }
 
@@ -189,50 +154,89 @@ export default {
         },
         treatCellphone(cellphone) {
             if (cellphone) {
-                if (cellphone == "0" || cellphone.length < 11 || !cellphone) {
-                    return "não cadastrado";
+                if (cellphone == '0' || cellphone.length < 11 || !cellphone) {
+                    return 'não cadastrado';
                 }
             }
 
             return cellphone;
         },
-        handleGetPrefixes(name = "") {
+        handleGetPrefixes(name = '') {
             return getPrefixes(name);
         },
         treatEndDate(end_month, end_year) {
             if (end_month && end_year) {
                 return `${end_month}/${end_year}`;
             }
-            return "";
+            return '';
         }
     }
 };
 </script>
 
 <style lang="scss" scoped>
-@import "@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss";
+@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
 
 .bg-light--darken {
     background-color: $gray-100 !important;
 }
 
-.avatar {
-    &.avatar-pdf {
-        background-color: white;
-        width: 104px;
-        height: 104px;
-        border-radius: 50%;
+.profile {
+    .avatar {
+        /* position: absolute; */
 
         img {
-            width: 90px;
-            height: 90px;
-            z-index: 2;
+            width: 178.14px;
+            height: 163px;
             border-radius: 50%;
+            top: 75%;
         }
     }
+
+    p {
+        font-size: 13px;
+        font-weight: 400;
+        color: #8da2b5;
+    }
+
+    span {
+        font-size: 14px;
+        font-weight: 500;
+        color: #8da2b5;
+    }
 }
 
-.cv-left{
+.title-block {
+    .line {
+        width: 221px;
+        height: 0px;
+
+        border: 1px solid #ececec;
+    }
+
+    p {
+        font-size: 13px;
+    }
+}
+
+.burh-code {
+    .qr-code {
+        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+        border-radius: 10px;
+    }
+
+    p {
+        font-size: 8px;
+        font-weight: bold;
+    }
+
+    span {
+        font-size: 12px;
+        font-weight: bold;
+    }
+}
+
+.cv-left {
     word-break: initial;
 }
 
@@ -240,4 +244,8 @@ export default {
     user-select: none;
 }
 
+.content-left {
+    width: 25%;
+    height: auto;
+}
 </style>

package/components/burh-ds/Curriculum/UserCurriculum/UserCvMiddle.vue

@@ -0,0 +1,286 @@
+<template>
+    <div class="bg-white content-middle">
+        <div class="tools mt-3">
+            <button
+                @change="$emit(tool.event)"
+                class="ml-3"
+                v-for="(tool, index) in tools"
+                :key="index"
+            >
+                {{ tool.name }}
+            </button>
+        </div>
+
+        <div class="about content-block mt-5 ml-3 mr-3">
+            <h5 class="font-weight-bold">Sobre</h5>
+            <p
+                id="USER_ABOUT"
+                :class="
+                    !wordIsLesserThan(
+                        userData.user_complementary_information.about
+                    ) && 'readmore'
+                "
+            >
+                {{ userData.user_complementary_information.about }}
+            </p>
+            <a
+                href="#"
+                aria-label="expandir conteudo"
+                v-show="
+                    userData.user_complementary_information.about &&
+                        !wordIsLesserThan(
+                            userData.user_complementary_information.about
+                        )
+                "
+                @click.prevent.stop="toggleReadMore($event, 'USER_ABOUT')"
+                >Ler mais</a
+            >
+        </div>
+
+        <h5 class="font-weight-bold mt-4 ml-3">Educação</h5>
+        <div
+            class="education ml-3"
+            v-for="(edu, index) in userData.user_education"
+            :key="index"
+        >
+            <p class="sub-title">{{ edu.formation }}</p>
+            <p class="info-text">{{ edu.institution }}</p>
+            <span class="info-text">
+                {{ edu.start_month }}/{{ edu.start_year }} -
+                {{ treatEndDate(edu.end_month, edu.end_year) }}
+                {{ getTime(false, edu) }}
+                {{
+                    edu.user_education_period
+                        ? '-' + edu.user_education_period.name
+                        : ''
+                }}
+            </span>
+        </div>
+
+        <h5 class="font-weight-bold mt-4 ml-3">Experiência</h5>
+        <div
+            class="experience ml-3 mr-3"
+            v-for="(exp, index) in userData.user_experience"
+            :key="`experience-${index}`"
+        >
+            <p class="sub-title">{{ exp.job_title }}</p>
+            <p class="info-text">{{ exp.company }}, {{ exp.location }}</p>
+            <span class="info-text">
+                {{ exp.start_month }}/{{ exp.start_year }} -
+                {{ treatEndDate(exp.end_month, exp.end_year) }}
+                {{ getTime(true, exp) }}
+            </span>
+
+            <p
+                :id="`USER_EXPERIENCE`"
+                class="description mt-4 mb-0"
+                :class="!wordIsLesserThan(exp.description) && 'readmore'"
+            >
+                {{ exp.description }}
+            </p>
+
+            <a
+                href="#"
+                aria-label="expandir conteudo"
+                v-show="!wordIsLesserThan(exp.description)"
+                @click.prevent.stop="toggleReadMore($event, `USER_EXPERIENCE`)"
+                >Ler mais</a
+            ><br /><br />
+        </div>
+
+        <h5 class="font-weight-bold mt-2 ml-3">Cursos</h5>
+        <div
+            class="courses ml-3"
+            v-for="(cou, index) in userData.user_course"
+            :key="`course-${index}`"
+        >
+            <p class="sub-title">{{ cou.institution }}</p>
+            <p class="info-text mb-3">
+                {{ cou.name }} - {{ cou.end_year }}
+                {{ getTime(false, cou) }}
+            </p>
+        </div>
+    </div>
+</template>
+
+<script>
+import getPrefixes from '~/util/getPrefixes.js';
+
+export default {
+    name: 'user-cv-middle',
+    props: {
+        userData: Object,
+        tools: {
+            type: Array,
+            default: () => []
+        }
+    },
+    methods: {
+        toggleReadMore(event, id) {
+            const element = document.getElementById(id);
+            element.classList.toggle('readmore');
+            event.target.innerText == 'Ler mais'
+                ? (event.target.innerText = 'Esconder')
+                : (event.target.innerText = 'Ler mais');
+        },
+        getTime(
+            isExperience,
+            { start_year = null, end_year = null, start_month, end_month },
+            textHappening = 'Cursando'
+        ) {
+            const isHappening = !end_month && !end_year;
+
+            if (isHappening) {
+                return isExperience === true ? 'Atualmente' : textHappening;
+            }
+
+            const dateInitial = this.$moment(
+                ['1', start_month.toString(), start_year.toString()],
+                'DD/MM/YYYY'
+            );
+            const dateDone = this.$moment(
+                ['1', end_month.toString(), end_year.toString()],
+                'DD/MM/YYYY'
+            );
+            const diffDuration = this.$moment.duration(
+                dateDone.diff(dateInitial)
+            );
+            const years = diffDuration.years();
+            const months = diffDuration.months();
+
+            if (years) {
+                return years > 1 ? `(${years} anos)` : `(${years} ano)`;
+            }
+
+            return months > 1
+                ? `(${months} meses)`
+                : months == 1
+                ? `(${months} mês)`
+                : '';
+        },
+        languageLevel(level) {
+            switch (parseInt(level)) {
+                case 1:
+                    return 'Iniciante';
+                case 2:
+                    return 'Elementar';
+                case 3:
+                    return 'Pré-intermediário';
+                case 4:
+                    return 'Intermediário';
+                case 5:
+                    return 'Intermediário Superior';
+                case 6:
+                    return 'Avançado';
+                case 7:
+                    return 'Fluente';
+                default:
+                    return '';
+            }
+        },
+        treatPhone(phone) {
+            if (phone) {
+                if (phone == '0' || phone.length < 9 || !phone) {
+                    return 'não cadastrado';
+                }
+            }
+
+            return phone;
+        },
+        treatCellphone(cellphone) {
+            if (cellphone) {
+                if (cellphone == '0' || cellphone.length < 11 || !cellphone) {
+                    return 'não cadastrado';
+                }
+            }
+
+            return cellphone;
+        },
+        handleGetPrefixes(name = '') {
+            return getPrefixes(name);
+        },
+        treatEndDate(end_month, end_year) {
+            if (end_month && end_year) {
+                return `${end_month}/${end_year}`;
+            }
+            return '';
+        },
+        wordIsLesserThan(word, value = 300) {
+            return word && word.length < value;
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
+
+.content-middle {
+    width: 50%;
+    border-right: 1px solid #ececec;
+}
+
+.readmore {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+}
+
+.tools {
+    flex-wrap: wrap;
+    button {
+        width: 117px;
+        height: 29px;
+        border: none;
+        margin-top: 15px;
+
+        background: #5983fe;
+        border-radius: 16px;
+        color: #fff;
+
+        font-size: 12px;
+        font-weight: 600;
+    }
+}
+
+.education {
+    margin-top: 15px;
+}
+
+.experience {
+    .description {
+        font-size: 14px;
+        color: #62778c;
+    }
+
+    a {
+        margin-bottom: 1px;
+    }
+}
+
+.sub-title {
+    margin-bottom: 1px;
+
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 21px;
+    color: #62778c;
+    text-transform: uppercase;
+}
+
+.info-text {
+    margin-bottom: 1px;
+
+    font-size: 14px;
+    color: #8da2b5;
+}
+
+.content-block {
+    p {
+        font-size: 14px;
+        color: #62778c;
+    }
+}
+</style>

package/components/burh-ds/Curriculum/UserCurriculum/UserCvRightSide.vue

@@ -1,120 +1,153 @@
 <template>
-    <div class="cv-right col-7 bg-lighter py-5 px-5" :class=" !currentUser ? 'disable-none' : '' ">
-        <h2 class="display-4 text-center mb-4">{{name}}</h2>
-        <p class="text-muted mb-0" v-show="wagePretesion"> Pretensão Salarial de {{wagePretesion | convertToReal}} reais.</p>
-        <p class="text-muted" v-show="codUser">Código de indicação do usuário: <b>{{codUser}}</b></p>
-
-        <h2 class="display-4" v-show="about">Sobre</h2>
-        <p id="USER_ABOUT" class="mb-0" :class="!wordIsLesserThan(about) && 'readmore'">{{about}}</p>
-        <a href="#" aria-label="expandir conteudo" 
-            v-show="about && !wordIsLesserThan(about)" @click.prevent.stop="toggleReadMore($event,'USER_ABOUT')">Ler mais</a>
-
-        <h2 class="display-4 mt-4" v-show="experience.length">Experiência</h2>    
-    
-        <div class="mb-4" v-for="(exp, index) in experience" :key="`exp-${index}`">
-            <h4 class="d-inline-block h6 text-muted font-weight-bold">{{exp.job_title}} - </h4> 
-            <h5 class="d-inline-block h6 text-muted font-weight-bold">{{exp.company}}</h5> 
-            <h6>{{exp.start_month}}/{{exp.start_year}} - {{treatEndDate(exp.end_month, exp.end_year)}} {{getTime(exp, 'Trabalhando')}}</h6>
-
-            <div>
-                <p :id="`USER_EXPERIENCE-${index + 1}`" class="mb-0" :class="!wordIsLesserThan(exp.description) && 'readmore'">{{exp.description}}</p>
-                <a href="#" aria-label="expandir conteudo" 
-                    v-show="!wordIsLesserThan(exp.description)" @click.prevent.stop="toggleReadMore($event,`USER_EXPERIENCE-${index+1}`)">Ler mais</a>
-            </div>
-        </div>
-
-        <h2 class="display-4 mt-4" v-show="roleDesireds.length">Cargos Desejados</h2>
-
-        <badge rounded type="primary" class="mr-2 mb-2" 
-            v-for="(roleDesired, i) in roleDesireds" :key="`${roleDesired.occupation}-${i}`">
-            {{roleDesired.occupation}}
-        </badge>
-  </div>
+    <div class="bg-white content-right">
+        <el-tabs
+            class="mt-3 ml-3 mr-3"
+            v-model="activeName"
+            @tab-click="handleClick"
+        >
+            <el-tab-pane label="Histórico" name="history"></el-tab-pane>
+            <el-tab-pane label="Notas" name="notes">
+                <p class="notes-title mb-0">Notas da equipe</p>
+                <div class="line"></div>
+
+                <div v-for="(note, index) in userNotes.notes" :key="index">
+                    <div class="notes-baloon mt-2">
+                        <div class="notes-text ml-4">
+                            <p class="mb-4">{{ note.text }}</p>
+                        </div>
+                        <div
+                            class="d-flex align-items-end justify-content-end mr-3"
+                        >
+                            <p class="notes-date">{{ note.created_at }}</p>
+                        </div>
+                    </div>
+                    <div class="notes-owner d-flex mt-2">
+                        <img :src="note.owner.avatar" :alt="note.owner.name" />
+                        <p class="ml-1">{{ note.owner.name }}</p>
+                    </div>
+                </div>
+
+                <input
+                    class="notes-new pl-4 mt-3 form-control form-rounded"
+                    type="text"
+                    placeholder="Escrever anotação"
+                    v-model="newNote"
+                    @change="$emit('new-note', newNote, userData.id)"
+                />
+            </el-tab-pane>
+        </el-tabs>
+    </div>
 </template>
 
 <script>
+import { Tabs, TabPane } from 'element-ui';
+
 export default {
-  name: 'user-cv-left-side',
-  props: {
-    name: String,
-    about: String,
-    codUser: String | Number,
-    currentUser: Object,
-    wagePretesion: {
-      type: Number,
-      default: 0
-    },
-    experience: {
-      type: Array,
-      default: () => []
+    name: 'user-cv-left-side',
+    components: {
+        [Tabs.name]: Tabs,
+        [TabPane.name]: TabPane
     },
-    roleDesireds: {
-      type: Array,
-      default: () => []
+    props: {
+        userData: Object,
+        userNotes: Object
     },
-  },
-  filters: {
-    convertToReal(value) {
-            return 'R$ ' + value.toFixed(2).replace('.', ',');
+
+    methods: {
+        handleClick(tab, event) {
+            // console.log(tab, event);
         }
-  },
-  methods: {
-    toggleReadMore(event, id) {
-      const element = document.getElementById(id)
-      element.classList.toggle('readmore')
-      event.target.innerText == 'Ler mais' ? event.target.innerText = 'Esconder' : event.target.innerText = 'Ler mais'
-    },
-    getTime({start_year = null, end_year = null, start_month, end_month }, textHappening = 'Trabalhando') {
-      const isHappening = !end_month && !end_year
-
-      if(isHappening) {
-        return textHappening
-      }
-
-      const dateInitial = this.$moment(['1', start_month.toString(), start_year.toString()], 'DD/MM/YYYY');
-      const dateDone = this.$moment(['1', end_month.toString(), end_year.toString()], 'DD/MM/YYYY');
-      const diffDuration = this.$moment.duration(dateDone.diff(dateInitial));
-      const years = diffDuration.years()
-      const months = diffDuration.months()
-  
-
-      if(years) {
-        return years > 1 ? `(${years} anos)` : `(${years} ano)`
-      }
-
-      return months > 1 ? `(${months} meses)` : 
-        months == 1 ? `(${months} mês)` : ''
     },
-    treatEndDate(end_month, end_year) {
-      if ( end_month && end_year) {
-        return `${end_month}/${end_year}`
-      }
-      return ''
-    },
-    wordIsLesserThan(word, value = 300) {
-      return word && word.length < value
+    data() {
+        return {
+            activeName: 'first',
+            newNote: ''
+        };
     }
-  }
-}
+};
 </script>
 
 <style lang="scss" scoped>
-@import "@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss";
+@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
 
 .readmore {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
 }
 
-.cv-right{
-  word-break: initial;
+.cv-right {
+    word-break: initial;
 }
 
 .disable-none {
     user-select: none;
 }
 
-</style>
+.content-right {
+    width: 25%;
+}
+
+.notes-title {
+    font-size: 14px;
+    color: #1d364b;
+    font-weight: bold;
+}
+
+.notes-baloon {
+    width: 231px;
+    height: 77px;
+
+    background: #eff5fd;
+    border-radius: 10px 10px 10px 0px;
+}
+
+.notes-text {
+    font-size: 13px;
+    line-height: 19px;
+
+    color: #62778c;
+}
+
+.notes-date {
+    font-size: 11px;
+    text-align: right;
+
+    color: #8da2b5;
+    top: calc(50% - 17px / 2 - 444.5px);
+}
+
+.notes-owner {
+    img {
+        width: 23px;
+        height: 23px;
+        border-radius: 50%;
+    }
+
+    p {
+        font-size: 13px;
+        font-weight: 600;
+        text-transform: uppercase;
+
+        color: #62778c;
+    }
+}
+
+.notes-new {
+    width: 231px;
+    height: 33px;
+
+    background: #f5f5f5;
+    border-radius: 16.5px;
+    border: none;
+}
+
+.line {
+    width: 221px;
+    height: 0px;
+
+    border: 1px solid #ececec;
+}
+</style>

package/components/burh-ds/Curriculum/UserCurriculum/index.vue

@@ -1,120 +1,136 @@
 <template>
-  <el-dialog
-	:visible.sync="isActive"
-	width="70%"
-	custom-class="position-relative"
-	@close="$emit('close')">
-	<template>
-		<div class="row mx-0 user-pdf">
-            <slot name="content"></slot>
-		</div>
-		<slot></slot>
-		<div class="tools" v-show="tools.length">
-			<el-tooltip v-for="(tool, index) in tools" :key="tool.id"
-				placement="top" :content="tool.tooltip">
-				<font-awesome-icon @click="$emit(tool.event)" :icon="tool.icon" class="h3 cursor-pointer text-primary" :class="index < tools.length - 1 && 'mb-4'"/>
-			</el-tooltip>
-		</div>
-		<!-- <el-tooltip placement="top" :content="!showTools ? 'Exibir Ferramentas' : 'Esconder Ferramentas'">
+    <el-dialog
+        :visible.sync="isActive"
+        width="80%"
+        custom-class="position-relative"
+        @close="$emit('close')"
+        class="test-radius"
+    >
+        <template>
+            <div class="row d-flex justify-content-between mx-0 user-pdf">
+                <div class="cover-photo"></div>
+                <slot name="content"></slot>
+            </div>
+            <slot></slot>
+            <!-- <el-tooltip placement="top" :content="!showTools ? 'Exibir Ferramentas' : 'Esconder Ferramentas'">
 			<span class="tool tool-show--tools">
 				<font-awesome-icon :icon="['fas', !showTools ? 'expand-alt' : 'compress-alt']" class="h3 text-primary" 
 					@click="showTools = !showTools"/>
 			</span>
 		</el-tooltip> -->
-		<el-tooltip placement="top" :content="'Fechar'">
-			<span class="tool tool-close">
-				<font-awesome-icon :icon="['fas', 'times']" class="h3 text-primary" 
-					@click="$emit('close')"/>
-			</span>
-		</el-tooltip>
-	</template>
-	</el-dialog>
+            <span class="tool tool-close" @click="$emit('close')">
+                Fechar
+                <font-awesome-icon
+                    :icon="['fas', 'times']"
+                    class="text-white ml-1"
+                />
+            </span>
+        </template>
+    </el-dialog>
 </template>
 
 <script>
-import { Dialog } from 'element-ui'
+import { Dialog } from 'element-ui';
 
 export default {
-	name: 'user-curriculum',
-	components: {
-		[Dialog.name]: Dialog,
-	},
-	props: {
-		show: {
-			type: Boolean,
-			default: false,
-		},
-		tools: {
-			type: Array,
-			default: () => ([])
-		},
-	},
-	data() {
-		return {
-			isActive: this.show,
-			showTools: false,
-		}
-	},
-	watch: {
-		show(value) {
-			this.isActive = value
-		}
-	},
-}
+    name: 'user-curriculum',
+    components: {
+        [Dialog.name]: Dialog
+    },
+    props: {
+        show: {
+            type: Boolean,
+            default: false
+        },
+        tools: {
+            type: Array,
+            default: () => []
+        }
+    },
+    data() {
+        return {
+            isActive: this.show,
+            showTools: false,
+            coverPhoto: this.cover
+        };
+    },
+    watch: {
+        show(value) {
+            this.isActive = value;
+        }
+    }
+};
 </script>
 
 <style lang="scss" scoped>
-@import "@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss";
+@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
 
 /deep/ .el-dialog__body {
-	padding: 0;
+    padding: 0;
 }
 
 /deep/ .el-dialog__header {
-	display: none;
+    display: none;
 }
 
-.tools {
-	position: absolute;
-	top: 0;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	flex-direction: column;
-	right: -70px;
-	width: 70px;
-	padding: 1rem;
-	background-color: $base-light;
-	border-top-right-radius: 23px;
-	border-bottom-right-radius: 23px;
-	opacity: 1;
-	transition: all .2s ease-in-out .2s;
-
-	&.hide {
-		opacity: 0;
-		pointer-events: none;
-	}
+.test-radius {
+    border-radius: 10px;
 }
 
 .tool {
-	position: absolute;
-	top: 1rem;
-	z-index: 10;
-	color: $primary;
-	cursor: pointer;
+    position: absolute;
+    top: 1rem;
+    z-index: 10;
+    color: $primary;
+    cursor: pointer;
 
-	&-show--tools {
-		right: 1.5rem;
-	}
+    &-show--tools {
+        right: 1.5rem;
+    }
 
-	&-close{
-		right: 1.5rem
-	}
+    &-close {
+        position: absolute;
+        width: 104.93px;
+        height: 28px;
+        right: 1.5rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        font-weight: 600;
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 17.5px;
+        color: #fff;
+    }
 }
 
 .user-pdf {
-	background-color: $primary;
-	// clip-path: polygon(0 12%, 10% 0, 100% 0, 100% 100%, 0 100%);
-	clip-path: polygon(10% 0%, 100% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 100%, 0% 10%);
+    background-color: #fff;
+    // clip-path: polygon(0 12%, 10% 0, 100% 0, 100% 100%, 0 100%);
+    /* clip-path: polygon(
+        10% 0%,
+        100% 0,
+        100% 10%,
+        100% 90%,
+        90% 100%,
+        10% 100%,
+        0 100%,
+        0% 10%
+    ); */
+
+    .cover-photo {
+        width: 100%;
+        height: 150px;
+        /* background: $primary; */
+
+        background: linear-gradient(
+                to top,
+                rgba(29, 161, 241, 0.2),
+                rgba(29, 161, 241, 0.2)
+            ),
+            url('https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
+        background-size: cover;
+        background-repeat: no-repeat;
+    }
 }
-</style>
+</style>

package/components/burh-ds/Inputs/HtmlEditor.vue

@@ -116,14 +116,18 @@ export default {
 </script>
 <style lang="scss">
 .ql-clipboard {
-  display: none;
+    display: none;
 }
 .ql-editor {
-  margin-bottom: 1.5rem;
-  resize: vertical;
-  overflow-y: scroll;
+    strong {
+        font-weight: bold;
+    }
+    margin-bottom: 1.5rem;
+    resize: vertical;
+    overflow-y: scroll;
+    font-family: Poppins, Open Sans, sans-serif;
 }
 .ql-container.ql-snow {
-  border: 0;
+    border: 0;
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burh/nuxt-core",
-  "version": "1.0.114",
+  "version": "1.0.115",
   "description": "Design System and Components.",
   "author": "Burh",
   "scripts": {
@@ -72,6 +72,7 @@
     "vue-flatpickr-component": "^8.1.2",
     "vue-form-generator": "^2.3.4",
     "vue-loading-overlay": "^3.3.2",
+    "vue-nav-tabs": "^0.5.7",
     "vue-plain-pagination": "^0.3.0",
     "vue-the-mask": "^0.11.1",
     "vue2-transitions": "^0.3.0",

package/plugins/qrcode/qrcode.js

@@ -1,4 +1,4 @@
 import Vue from 'vue';
 import VueQrcode from '@chenfengyuan/vue-qrcode';
 
-Vue.component(VueQrcode.name, VueQrcode);
+Vue.component(VueQrcode, VueQrcode);