@burh/nuxt-core 1.0.270 → 1.0.272

package/components/burh-ds/Skeleton/BaseCardUniversity.vue

@@ -1,79 +1,79 @@
-<template>
-	<div class="recruitment__user__card">
-		<div
-			class="recruitment__user__card__header"
-		>
-			<skeleton-animate class="user__cover" />
-		</div>
-
-		<div class="recruitment__user__card__content">
-			<skeleton-animate class="user__avatar" :width="120" :height="120" img />
-
-			<skeleton-animate class="user__title" :width="160" :height="20" />
-		</div>
-
-		<div class="recruitment__user__card__footer">
-			<skeleton-animate class="user__footer" :width="200" :height="20" />
-		</div>
-	</div>
-</template>
-
-<script>
-import SkeletonAnimate from './SkeletonAnimate.vue';
-
-export default {
-	name: 'base-card-university',
-	components: {
-		SkeletonAnimate
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-
-.recruitment__user__card {
-    background: #fff;
-    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08);
-    border-radius: 4px;
-    overflow: hidden;
-    cursor: pointer;
-    transition: transform 0.25s;
-
-    &__header {
-        width: 100%;
-        height: 70px;
-        overflow: hidden;
-        position: relative;
-        .user__cover {
-            width: 100%!important;
-            height: 100%!important;
-        }
-    }
-    &__content {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        .user__avatar {
-            margin-top: -20px;
-            border: 4px solid #fff;
-            z-index: 10;
-        }
-        .user__title {
-            margin-top: 40px;
-        }
-    }
-    &__footer {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding-bottom: 20px;
-        .user__footer {
-            margin-top: 40px;
-            margin-bottom: 20px;
-        }
-    }
-}
-
-</style>
-
+<template>
+	<div class="recruitment__user__card">
+		<div
+			class="recruitment__user__card__header"
+		>
+			<skeleton-animate class="user__cover" />
+		</div>
+
+		<div class="recruitment__user__card__content">
+			<skeleton-animate class="user__avatar" :width="120" :height="120" img />
+
+			<skeleton-animate class="user__title" :width="160" :height="20" />
+		</div>
+
+		<div class="recruitment__user__card__footer">
+			<skeleton-animate class="user__footer" :width="200" :height="20" />
+		</div>
+	</div>
+</template>
+
+<script>
+import SkeletonAnimate from './SkeletonAnimate.vue';
+
+export default {
+	name: 'base-card-university',
+	components: {
+		SkeletonAnimate
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+
+.recruitment__user__card {
+    background: #fff;
+    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08);
+    border-radius: 4px;
+    overflow: hidden;
+    cursor: pointer;
+    transition: transform 0.25s;
+
+    &__header {
+        width: 100%;
+        height: 70px;
+        overflow: hidden;
+        position: relative;
+        .user__cover {
+            width: 100%!important;
+            height: 100%!important;
+        }
+    }
+    &__content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        .user__avatar {
+            margin-top: -20px;
+            border: 4px solid #fff;
+            z-index: 10;
+        }
+        .user__title {
+            margin-top: 40px;
+        }
+    }
+    &__footer {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding-bottom: 20px;
+        .user__footer {
+            margin-top: 40px;
+            margin-bottom: 20px;
+        }
+    }
+}
+
+</style>
+

package/components/burh-ds/Skeleton/BaseCardUser.vue

@@ -1,84 +1,84 @@
-<template>
-	<div class="recruitment__user__card">
-		<div
-			class="recruitment__user__card__header"
-		>
-			<skeleton-animate class="user__cover" />
-		</div>
-
-		<div class="recruitment__user__card__content">
-			<skeleton-animate class="user__avatar" :width="120" :height="120" img />
-
-			<skeleton-animate class="user__title" :width="160" :height="20" />
-			<skeleton-animate class="user__age" :width="80" :height="15" />
-
-			<skeleton-animate class="user__city" :width="120" :height="25" />
-
-			<skeleton-animate class="user__text" :width="140" :height="15" />
-			<skeleton-animate class="user__experience" :width="220" :height="20" />
-		</div>
-	</div>
-</template>
-
-<script>
-import SkeletonAnimate from './SkeletonAnimate.vue';
-
-export default {
-	name: 'base-card-user',
-	components: {
-		SkeletonAnimate
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-
-.recruitment__user__card {
-    background: #fff;
-    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08);
-    border-radius: 4px;
-    overflow: hidden;
-    cursor: pointer;
-    transition: transform 0.25s;
-    padding-bottom: 40px;
-
-    &__header {
-        width: 100%;
-        height: 70px;
-        overflow: hidden;
-        position: relative;
-        .user__cover {
-            width: 100%!important;
-            height: 100%!important;
-        }
-    }
-    &__content {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        .user__avatar {
-            margin-top: -20px;
-            border: 4px solid #fff;
-            z-index: 10;
-        }
-        .user__title {
-            margin-top: 20px;
-        }
-        .user__age {
-            margin-top: 10px;
-        }
-        .user__city {
-            margin-top: 40px;
-        }
-        .user__text {
-            margin-top: 40px;
-        }
-        .user__experience {
-            margin-top: 5px;
-        }
-    }
-}
-
-</style>
-
+<template>
+	<div class="recruitment__user__card">
+		<div
+			class="recruitment__user__card__header"
+		>
+			<skeleton-animate class="user__cover" />
+		</div>
+
+		<div class="recruitment__user__card__content">
+			<skeleton-animate class="user__avatar" :width="120" :height="120" img />
+
+			<skeleton-animate class="user__title" :width="160" :height="20" />
+			<skeleton-animate class="user__age" :width="80" :height="15" />
+
+			<skeleton-animate class="user__city" :width="120" :height="25" />
+
+			<skeleton-animate class="user__text" :width="140" :height="15" />
+			<skeleton-animate class="user__experience" :width="220" :height="20" />
+		</div>
+	</div>
+</template>
+
+<script>
+import SkeletonAnimate from './SkeletonAnimate.vue';
+
+export default {
+	name: 'base-card-user',
+	components: {
+		SkeletonAnimate
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+
+.recruitment__user__card {
+    background: #fff;
+    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08);
+    border-radius: 4px;
+    overflow: hidden;
+    cursor: pointer;
+    transition: transform 0.25s;
+    padding-bottom: 40px;
+
+    &__header {
+        width: 100%;
+        height: 70px;
+        overflow: hidden;
+        position: relative;
+        .user__cover {
+            width: 100%!important;
+            height: 100%!important;
+        }
+    }
+    &__content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        .user__avatar {
+            margin-top: -20px;
+            border: 4px solid #fff;
+            z-index: 10;
+        }
+        .user__title {
+            margin-top: 20px;
+        }
+        .user__age {
+            margin-top: 10px;
+        }
+        .user__city {
+            margin-top: 40px;
+        }
+        .user__text {
+            margin-top: 40px;
+        }
+        .user__experience {
+            margin-top: 5px;
+        }
+    }
+}
+
+</style>
+

package/components/burh-ds/Skeleton/BaseCourseInfo.vue

@@ -0,0 +1,65 @@
+<template>
+    <div class="card h-100">
+        <div class="container-fluid container-fluid--bu pt-5">
+            <skeleton-animate :width="220" :height="20" rounded />
+
+            <div class="row card-body px-0">
+                <div
+                    class="col-6 col-sm-3 col-md-3 info-box text-center px-0"
+                    v-for="index in 3"
+                    :key="index"
+                >
+                    <skeleton-animate
+                        :width="80"
+                        :height="80"
+                        class="ml-3"
+                        rounded
+                    />
+
+                    <skeleton-animate
+                        :width="120"
+                        :height="15"
+                        rounded
+                        class="mt-2"
+                    />
+                </div>
+            </div>
+            <div class="d-flex align-items-center justify-content-center">
+                <skeleton-animate :width="80" :height="80" img />
+                <skeleton-animate
+                    :width="120"
+                    :height="15"
+                    rounded
+                    class="ml-2"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import SkeletonAnimate from './SkeletonAnimate.vue';
+export default {
+    name: 'course-info-skeleton',
+    components: { SkeletonAnimate }
+};
+</script>
+
+<style lang="scss" scoped>
+.card-title {
+    font-size: 1rem;
+}
+.info-box {
+    @media (min-width: 576px) {
+        flex: 0 0 50%;
+        max-width: 50%;
+    }
+    @media (min-width: 768px) {
+        flex: 0 0 50%;
+        max-width: 50%;
+    }
+    @media (min-width: 1024px) {
+        flex: 0 0 33%;
+        max-width: 33%;
+    }
+}
+</style>

package/components/burh-ds/Skeleton/BaseTraining.vue

@@ -0,0 +1,29 @@
+<template>
+    <div class="card">
+        <div class="card-header"></div>
+        <div class="card-body">
+            <skeleton-animate :width="160" :height="15" />
+        </div>
+    </div>
+</template>
+
+<script>
+import SkeletonAnimate from './SkeletonAnimate.vue';
+export default {
+    name: 'training-skeleton',
+    components: { SkeletonAnimate }
+};
+</script>
+
+<style lang="scss" scoped>
+.card {
+    width: 100% !important;
+}
+/deep/ .card-header {
+    background: linear-gradient(
+        #ececec 11rem,
+        rgb(255, 255, 255) 20%
+    ) !important;
+    height: 11rem;
+}
+</style>

package/components/burh-ds/Skeleton/BufferFolderSkeleton.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="card-app">
+        <skeleton-animate rounded :width="40" :height="40" />
+        <skeleton-animate
+            rounded
+            :width="80"
+            :height="15"
+            class="text-skeleton"
+        />
+    </div>
+</template>
+
+<script>
+import SkeletonAnimate from './SkeletonAnimate.vue';
+
+export default {
+    name: 'buffer-folder-skeleton',
+    components: {
+        SkeletonAnimate
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.card-app {
+    width: 22%;
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    height: 5.625rem !important;
+    flex-direction: row;
+    padding: 1.875rem 2.18rem !important;
+
+    & + div {
+        margin: 0 1rem;
+    }
+    .text-skeleton {
+        margin-left: 1rem;
+    }
+}
+</style>

package/components/burh-ds/Skeleton/BufferUserSkeleton.vue

@@ -0,0 +1,142 @@
+<template>
+    <div class="box-applicant col-12 col-sm-6 col-md-3">
+        <card
+            :hover="true"
+            :bodyClasses="'mx-auto text-center px-0'"
+            :footerClasses="'mx-auto border-0'"
+            @click.stop
+        >
+            <template>
+                <div class="avatar rounded-circle header-avatar">
+                    <skeleton-animate :width="90" :height="90" img />
+                </div>
+                <div class="applicant__card--info">
+                    <div class="applicant__card--header">
+                        <skeleton-animate :width="120" :height="15" rounded />
+                        <skeleton-animate
+                            class="mt-2"
+                            :width="120"
+                            :height="15"
+                            rounded
+                        />
+                    </div>
+
+                    <p class="applicant__card--city">
+                        <skeleton-animate :width="100" :height="15" rounded />
+                    </p>
+                </div>
+            </template>
+
+            <!-- <div slot="footer">
+                <i v-if="isSeen" class="fa fa-eye"></i>
+                <i v-else class="fa fa-eye-slash"></i>
+            </div> -->
+        </card>
+    </div>
+</template>
+
+<script>
+import SkeletonAnimate from './SkeletonAnimate.vue';
+
+export default {
+    name: 'buffer-user-skeleton',
+    components: {
+        SkeletonAnimate
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.box-applicant {
+    /deep/ .card {
+        background: linear-gradient(
+            #ececec 4rem,
+            rgb(255, 255, 255) 20%
+        ) !important;
+        .card-body {
+            display: grid;
+            grid-template-columns: 90px 1fr;
+            margin-top: 30px;
+            width: 90%;
+            padding-bottom: 0;
+            .header-avatar {
+                width: 90px;
+                height: 90px;
+                max-width: initial;
+                max-height: initial;
+            }
+        }
+    }
+}
+.applicant__card--info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 20px;
+    overflow: hidden;
+    p {
+        margin-bottom: 0px;
+        color: #1d364b;
+        font-weight: 500;
+        font-size: 1rem;
+    }
+    span {
+        color: #525f7f;
+        font-size: 0.875rem;
+    }
+    p,
+    span {
+        text-align: left;
+    }
+
+    .applicant__card--header {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .applicant__card--city {
+        margin-top: 40px;
+    }
+}
+
+.header {
+    &-avatar {
+        position: relative;
+        width: 8rem;
+        height: 8rem;
+        max-width: 100%;
+        max-height: 90%;
+        img {
+            height: 100%;
+        }
+    }
+}
+.box-applicant {
+    .card-body {
+        height: 20.5rem !important;
+    }
+
+    &:hover {
+        .applicant-title {
+            display: block;
+            overflow: initial;
+        }
+    }
+}
+
+.checkbox-applicant {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+}
+
+.applicant {
+    &-title {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+    }
+}
+</style>