@burh/nuxt-core 1.0.411 → 1.0.412
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/images/icons/icon5.svg +3 -3
- package/assets/images/icons/icon6.svg +3 -3
- package/assets/sass/burh-ds/_global.scss +324 -324
- package/assets/sass/burh-ds/content/_interface-spa.scss +306 -306
- package/assets/sass/burh-ds/content/_main-content.scss +25 -25
- package/components/argon-core/BaseDropdown.vue +114 -114
- package/components/argon-core/LoadingPanel.vue +26 -26
- package/components/burh-ds/Cards/BaseCard.vue +194 -194
- package/components/burh-ds/Cards/FeatureBusinessCard.vue +74 -74
- package/components/burh-ds/Cards/PerformanceCard.vue +81 -81
- package/components/burh-ds/Curriculum/UserCurriculum/UserCvRightSideNotAuth.vue +379 -379
- package/components/burh-ds/Filters/BaseFilterContainer.vue +91 -91
- package/components/burh-ds/Headings/AppHeader.vue +222 -222
- package/components/burh-ds/Modals/NewUserModal.vue +87 -87
- package/components/burh-ds/Skeleton/AppHeader.vue +129 -0
- package/components/burh-ds/Skeleton/BaseCardUniversity.vue +79 -79
- package/components/burh-ds/Skeleton/BaseCardUser.vue +84 -84
- package/components/burh-ds/Skeleton/BaseCourseInfo.vue +71 -71
- package/components/burh-ds/Skeleton/Cards.vue +86 -86
- package/components/burh-ds/Skeleton/SkeletonAnimate.vue +25 -0
- package/components/layouts/burh-ds/navbar/PublicNavbar.vue +168 -168
- package/environment.js +221 -221
- package/nuxt.config.js +207 -207
- package/package.json +1 -1
- package/plugins/vClickOutside.js +4 -4
|
@@ -1,71 +1,71 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="card h-100">
|
|
3
|
-
<div class="container-fluid container-fluid--bu pt-5">
|
|
4
|
-
<skeleton-animate :width="220" :height="20" rounded />
|
|
5
|
-
|
|
6
|
-
<div class="row card-body px-0">
|
|
7
|
-
<div
|
|
8
|
-
class="col-6 col-sm-3 col-md-3 info-box text-center px-0"
|
|
9
|
-
v-for="index in 3"
|
|
10
|
-
:key="index"
|
|
11
|
-
>
|
|
12
|
-
<skeleton-animate
|
|
13
|
-
:width="80"
|
|
14
|
-
:height="80"
|
|
15
|
-
class="ml-3"
|
|
16
|
-
rounded
|
|
17
|
-
/>
|
|
18
|
-
|
|
19
|
-
<skeleton-animate
|
|
20
|
-
:width="120"
|
|
21
|
-
:height="15"
|
|
22
|
-
rounded
|
|
23
|
-
class="mt-2"
|
|
24
|
-
/>
|
|
25
|
-
</div>
|
|
26
|
-
</div>
|
|
27
|
-
<div class="d-flex align-items-center justify-content-center" v-if="hasExtra">
|
|
28
|
-
<skeleton-animate :width="80" :height="80" img />
|
|
29
|
-
<skeleton-animate
|
|
30
|
-
:width="120"
|
|
31
|
-
:height="15"
|
|
32
|
-
rounded
|
|
33
|
-
class="ml-2"
|
|
34
|
-
/>
|
|
35
|
-
</div>
|
|
36
|
-
</div>
|
|
37
|
-
</div>
|
|
38
|
-
</template>
|
|
39
|
-
<script>
|
|
40
|
-
import SkeletonAnimate from './SkeletonAnimate.vue';
|
|
41
|
-
export default {
|
|
42
|
-
name: 'course-info-skeleton',
|
|
43
|
-
components: { SkeletonAnimate },
|
|
44
|
-
props: {
|
|
45
|
-
hasExtra: {
|
|
46
|
-
type: Boolean,
|
|
47
|
-
default: false
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
};
|
|
51
|
-
</script>
|
|
52
|
-
|
|
53
|
-
<style lang="scss" scoped>
|
|
54
|
-
.card-title {
|
|
55
|
-
font-size: 1rem;
|
|
56
|
-
}
|
|
57
|
-
.info-box {
|
|
58
|
-
@media (min-width: 576px) {
|
|
59
|
-
flex: 0 0 50%;
|
|
60
|
-
max-width: 50%;
|
|
61
|
-
}
|
|
62
|
-
@media (min-width: 768px) {
|
|
63
|
-
flex: 0 0 50%;
|
|
64
|
-
max-width: 50%;
|
|
65
|
-
}
|
|
66
|
-
@media (min-width: 1024px) {
|
|
67
|
-
flex: 0 0 33%;
|
|
68
|
-
max-width: 33%;
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div class="card h-100">
|
|
3
|
+
<div class="container-fluid container-fluid--bu pt-5">
|
|
4
|
+
<skeleton-animate :width="220" :height="20" rounded />
|
|
5
|
+
|
|
6
|
+
<div class="row card-body px-0">
|
|
7
|
+
<div
|
|
8
|
+
class="col-6 col-sm-3 col-md-3 info-box text-center px-0"
|
|
9
|
+
v-for="index in 3"
|
|
10
|
+
:key="index"
|
|
11
|
+
>
|
|
12
|
+
<skeleton-animate
|
|
13
|
+
:width="80"
|
|
14
|
+
:height="80"
|
|
15
|
+
class="ml-3"
|
|
16
|
+
rounded
|
|
17
|
+
/>
|
|
18
|
+
|
|
19
|
+
<skeleton-animate
|
|
20
|
+
:width="120"
|
|
21
|
+
:height="15"
|
|
22
|
+
rounded
|
|
23
|
+
class="mt-2"
|
|
24
|
+
/>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
<div class="d-flex align-items-center justify-content-center" v-if="hasExtra">
|
|
28
|
+
<skeleton-animate :width="80" :height="80" img />
|
|
29
|
+
<skeleton-animate
|
|
30
|
+
:width="120"
|
|
31
|
+
:height="15"
|
|
32
|
+
rounded
|
|
33
|
+
class="ml-2"
|
|
34
|
+
/>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
</template>
|
|
39
|
+
<script>
|
|
40
|
+
import SkeletonAnimate from './SkeletonAnimate.vue';
|
|
41
|
+
export default {
|
|
42
|
+
name: 'course-info-skeleton',
|
|
43
|
+
components: { SkeletonAnimate },
|
|
44
|
+
props: {
|
|
45
|
+
hasExtra: {
|
|
46
|
+
type: Boolean,
|
|
47
|
+
default: false
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
</script>
|
|
52
|
+
|
|
53
|
+
<style lang="scss" scoped>
|
|
54
|
+
.card-title {
|
|
55
|
+
font-size: 1rem;
|
|
56
|
+
}
|
|
57
|
+
.info-box {
|
|
58
|
+
@media (min-width: 576px) {
|
|
59
|
+
flex: 0 0 50%;
|
|
60
|
+
max-width: 50%;
|
|
61
|
+
}
|
|
62
|
+
@media (min-width: 768px) {
|
|
63
|
+
flex: 0 0 50%;
|
|
64
|
+
max-width: 50%;
|
|
65
|
+
}
|
|
66
|
+
@media (min-width: 1024px) {
|
|
67
|
+
flex: 0 0 33%;
|
|
68
|
+
max-width: 33%;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
</style>
|
|
@@ -1,86 +1,86 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div id="content">
|
|
3
|
-
<div class="skeleton">
|
|
4
|
-
<div class="skeleton-wrapper">
|
|
5
|
-
<div class="skeleton-wrapper-inner">
|
|
6
|
-
<div class="skeleton-wrapper-body">
|
|
7
|
-
<skeleton-animate class="skeleton-avatar" :width="60" :height="60" img />
|
|
8
|
-
<skeleton-animate class="skeleton-author" :width="150" :height="20" />
|
|
9
|
-
<skeleton-animate class="skeleton-label" :width="100" :height="10" />
|
|
10
|
-
<skeleton-animate class="skeleton-content-1" :width="500" :height="10" />
|
|
11
|
-
<skeleton-animate class="skeleton-content-2" :width="500" :height="10" />
|
|
12
|
-
<skeleton-animate class="skeleton-content-3" :width="500" :height="10" />
|
|
13
|
-
</div>
|
|
14
|
-
</div>
|
|
15
|
-
</div>
|
|
16
|
-
</div>
|
|
17
|
-
</div>
|
|
18
|
-
</template>
|
|
19
|
-
|
|
20
|
-
<script>
|
|
21
|
-
import SkeletonAnimate from './SkeletonAnimate.vue';
|
|
22
|
-
|
|
23
|
-
export default {
|
|
24
|
-
name: 'card-skeleton',
|
|
25
|
-
components: {
|
|
26
|
-
SkeletonAnimate
|
|
27
|
-
}
|
|
28
|
-
};
|
|
29
|
-
</script>
|
|
30
|
-
|
|
31
|
-
<style>
|
|
32
|
-
#content {
|
|
33
|
-
width: 100%;
|
|
34
|
-
}
|
|
35
|
-
.skeleton-wrapper {
|
|
36
|
-
background: #fff;
|
|
37
|
-
border-radius: 4px;
|
|
38
|
-
-webkit-border-radius: 4px;
|
|
39
|
-
margin: 10px 15px;
|
|
40
|
-
box-shadow: 0 0 2rem 0 rgb(136 152 170 / 15%);
|
|
41
|
-
padding: 40px 20px;
|
|
42
|
-
border-radius: .375rem;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.skeleton-wrapper-inner {
|
|
46
|
-
height: 150px;
|
|
47
|
-
padding: 15px;
|
|
48
|
-
position: relative;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.skeleton-wrapper-body div {
|
|
52
|
-
position: absolute;
|
|
53
|
-
right: 15px;
|
|
54
|
-
left: 15px;
|
|
55
|
-
top: 15px;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
div.skeleton-avatar {
|
|
59
|
-
right: auto;
|
|
60
|
-
}
|
|
61
|
-
div.skeleton-author {
|
|
62
|
-
top: 20px;
|
|
63
|
-
left: 95px;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
div.skeleton-label {
|
|
67
|
-
left: 95px;
|
|
68
|
-
top: 50px;
|
|
69
|
-
}
|
|
70
|
-
div.skeleton-content-1,
|
|
71
|
-
div.skeleton-content-2,
|
|
72
|
-
div.skeleton-content-3 {
|
|
73
|
-
left: 15px;
|
|
74
|
-
right: 15px;
|
|
75
|
-
width: 98%!important;
|
|
76
|
-
}
|
|
77
|
-
div.skeleton-content-1 {
|
|
78
|
-
top: 100px;
|
|
79
|
-
}
|
|
80
|
-
div.skeleton-content-2 {
|
|
81
|
-
top: 120px;
|
|
82
|
-
}
|
|
83
|
-
div.skeleton-content-3 {
|
|
84
|
-
top: 140px;
|
|
85
|
-
}
|
|
86
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div id="content">
|
|
3
|
+
<div class="skeleton">
|
|
4
|
+
<div class="skeleton-wrapper">
|
|
5
|
+
<div class="skeleton-wrapper-inner">
|
|
6
|
+
<div class="skeleton-wrapper-body">
|
|
7
|
+
<skeleton-animate class="skeleton-avatar" :width="60" :height="60" img />
|
|
8
|
+
<skeleton-animate class="skeleton-author" :width="150" :height="20" />
|
|
9
|
+
<skeleton-animate class="skeleton-label" :width="100" :height="10" />
|
|
10
|
+
<skeleton-animate class="skeleton-content-1" :width="500" :height="10" />
|
|
11
|
+
<skeleton-animate class="skeleton-content-2" :width="500" :height="10" />
|
|
12
|
+
<skeleton-animate class="skeleton-content-3" :width="500" :height="10" />
|
|
13
|
+
</div>
|
|
14
|
+
</div>
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
</template>
|
|
19
|
+
|
|
20
|
+
<script>
|
|
21
|
+
import SkeletonAnimate from './SkeletonAnimate.vue';
|
|
22
|
+
|
|
23
|
+
export default {
|
|
24
|
+
name: 'card-skeleton',
|
|
25
|
+
components: {
|
|
26
|
+
SkeletonAnimate
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
</script>
|
|
30
|
+
|
|
31
|
+
<style>
|
|
32
|
+
#content {
|
|
33
|
+
width: 100%;
|
|
34
|
+
}
|
|
35
|
+
.skeleton-wrapper {
|
|
36
|
+
background: #fff;
|
|
37
|
+
border-radius: 4px;
|
|
38
|
+
-webkit-border-radius: 4px;
|
|
39
|
+
margin: 10px 15px;
|
|
40
|
+
box-shadow: 0 0 2rem 0 rgb(136 152 170 / 15%);
|
|
41
|
+
padding: 40px 20px;
|
|
42
|
+
border-radius: .375rem;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.skeleton-wrapper-inner {
|
|
46
|
+
height: 150px;
|
|
47
|
+
padding: 15px;
|
|
48
|
+
position: relative;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.skeleton-wrapper-body div {
|
|
52
|
+
position: absolute;
|
|
53
|
+
right: 15px;
|
|
54
|
+
left: 15px;
|
|
55
|
+
top: 15px;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
div.skeleton-avatar {
|
|
59
|
+
right: auto;
|
|
60
|
+
}
|
|
61
|
+
div.skeleton-author {
|
|
62
|
+
top: 20px;
|
|
63
|
+
left: 95px;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
div.skeleton-label {
|
|
67
|
+
left: 95px;
|
|
68
|
+
top: 50px;
|
|
69
|
+
}
|
|
70
|
+
div.skeleton-content-1,
|
|
71
|
+
div.skeleton-content-2,
|
|
72
|
+
div.skeleton-content-3 {
|
|
73
|
+
left: 15px;
|
|
74
|
+
right: 15px;
|
|
75
|
+
width: 98%!important;
|
|
76
|
+
}
|
|
77
|
+
div.skeleton-content-1 {
|
|
78
|
+
top: 100px;
|
|
79
|
+
}
|
|
80
|
+
div.skeleton-content-2 {
|
|
81
|
+
top: 120px;
|
|
82
|
+
}
|
|
83
|
+
div.skeleton-content-3 {
|
|
84
|
+
top: 140px;
|
|
85
|
+
}
|
|
86
|
+
</style>
|
|
@@ -34,6 +34,24 @@ export default {
|
|
|
34
34
|
</script>
|
|
35
35
|
|
|
36
36
|
<style lang="scss" scoped>
|
|
37
|
+
@keyframes placeholderSkeleton {
|
|
38
|
+
0% {
|
|
39
|
+
background-position: -468px 0;
|
|
40
|
+
}
|
|
41
|
+
100% {
|
|
42
|
+
background-position: 468px 0;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@keyframes skeletonAnimate {
|
|
47
|
+
from {
|
|
48
|
+
background-position: top left;
|
|
49
|
+
}
|
|
50
|
+
to {
|
|
51
|
+
background-position: top right;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
37
55
|
@-webkit-keyframes placeholderSkeleton {
|
|
38
56
|
0% {
|
|
39
57
|
background-position: -468px 0;
|
|
@@ -73,6 +91,13 @@ $skeletonBaseLineColor: #edeef1;
|
|
|
73
91
|
-webkit-animation-iteration-count: infinite;
|
|
74
92
|
-webkit-animation-name: placeholderSkeleton;
|
|
75
93
|
-webkit-animation-timing-function: linear;
|
|
94
|
+
|
|
95
|
+
animation-duration: 1s;
|
|
96
|
+
animation-fill-mode: forwards;
|
|
97
|
+
animation-iteration-count: infinite;
|
|
98
|
+
animation-name: placeholderSkeleton;
|
|
99
|
+
animation-timing-function: linear;
|
|
100
|
+
|
|
76
101
|
background: $skeletonBaseColor;
|
|
77
102
|
background-image: -webkit-gradient(
|
|
78
103
|
linear,
|