@burh/nuxt-core 1.0.260 → 1.0.262
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.
|
@@ -31,7 +31,10 @@
|
|
|
31
31
|
|
|
32
32
|
<section class="recruitment__card__content">
|
|
33
33
|
<span class="recruitment__card__content__date">Publicada {{fromNow(job.published_at)}}</span>
|
|
34
|
-
<h2 class="recruitment__card__content__title">
|
|
34
|
+
<h2 class="recruitment__card__content__title">
|
|
35
|
+
{{ job.title }}
|
|
36
|
+
<i v-if="job.handicapped" class="fas fa-wheelchair pcd"></i>
|
|
37
|
+
</h2>
|
|
35
38
|
<span class="recruitment__card__content__id">{{ job.id }}</span>
|
|
36
39
|
|
|
37
40
|
<div class="recruitment__card__info">
|
|
@@ -45,13 +48,13 @@
|
|
|
45
48
|
<p class="recruitment__card__footer__title">EQUIPE RESPONSÁVEL</p>
|
|
46
49
|
<div class="recruitment__card__footer__images">
|
|
47
50
|
<el-tooltip
|
|
48
|
-
v-for="
|
|
49
|
-
:key="
|
|
51
|
+
v-for="user in job.team"
|
|
52
|
+
:key="user.id"
|
|
50
53
|
placement="top"
|
|
51
54
|
:content="user.name"
|
|
52
55
|
>
|
|
53
56
|
<img
|
|
54
|
-
:src="user.
|
|
57
|
+
:src="user.avatar"
|
|
55
58
|
:alt="user.name"
|
|
56
59
|
>
|
|
57
60
|
</el-tooltip>
|
|
@@ -128,7 +131,7 @@ export default {
|
|
|
128
131
|
background: transparent;
|
|
129
132
|
border: 0;
|
|
130
133
|
position: relative;
|
|
131
|
-
&:hover {
|
|
134
|
+
&:not(:disabled):hover {
|
|
132
135
|
background: rgba(0, 0, 0, 0.08);
|
|
133
136
|
}
|
|
134
137
|
&:focus {
|
|
@@ -155,6 +158,10 @@ export default {
|
|
|
155
158
|
font-size: 1.275rem;
|
|
156
159
|
color: #1D364B;
|
|
157
160
|
margin-bottom: 0;
|
|
161
|
+
.pcd {
|
|
162
|
+
color: #1F8CEB;
|
|
163
|
+
margin-left: 5px;
|
|
164
|
+
}
|
|
158
165
|
}
|
|
159
166
|
&__id {
|
|
160
167
|
font-size: 0.875rem;
|
|
@@ -5,7 +5,14 @@
|
|
|
5
5
|
</div>
|
|
6
6
|
|
|
7
7
|
<div class="university__user__card__content">
|
|
8
|
-
<img
|
|
8
|
+
<img
|
|
9
|
+
v-if="universityData.urlLogo"
|
|
10
|
+
:src="universityData.urlLogo"
|
|
11
|
+
:alt="universityData.name"
|
|
12
|
+
/>
|
|
13
|
+
<div v-if="!universityData.urlLogo" class="no-image">
|
|
14
|
+
{{ handleGetPrefixes(universityData.name) }}
|
|
15
|
+
</div>
|
|
9
16
|
<span class="name">
|
|
10
17
|
{{ universityData.initials }}
|
|
11
18
|
</span>
|
|
@@ -48,6 +55,7 @@
|
|
|
48
55
|
|
|
49
56
|
<script>
|
|
50
57
|
import { Checkbox } from 'element-ui';
|
|
58
|
+
import getPrefixes from '~/util/getPrefixes.js';
|
|
51
59
|
|
|
52
60
|
export default {
|
|
53
61
|
name: 'university-card',
|
|
@@ -70,6 +78,11 @@ export default {
|
|
|
70
78
|
default: '',
|
|
71
79
|
description: 'University cover'
|
|
72
80
|
}
|
|
81
|
+
},
|
|
82
|
+
methods: {
|
|
83
|
+
handleGetPrefixes(name = '') {
|
|
84
|
+
return getPrefixes(name);
|
|
85
|
+
}
|
|
73
86
|
}
|
|
74
87
|
};
|
|
75
88
|
</script>
|
|
@@ -161,7 +174,6 @@ export default {
|
|
|
161
174
|
width: 120px;
|
|
162
175
|
height: 120px;
|
|
163
176
|
border-radius: 100px;
|
|
164
|
-
object-fit: cover;
|
|
165
177
|
margin-top: -20px;
|
|
166
178
|
z-index: 10;
|
|
167
179
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
|
|
@@ -198,6 +210,20 @@ export default {
|
|
|
198
210
|
text-transform: uppercase;
|
|
199
211
|
}
|
|
200
212
|
}
|
|
213
|
+
.no-image {
|
|
214
|
+
width: 120px;
|
|
215
|
+
height: 120px;
|
|
216
|
+
border-radius: 100px;
|
|
217
|
+
margin-top: -20px;
|
|
218
|
+
z-index: 10;
|
|
219
|
+
|
|
220
|
+
background: #adb5bd;
|
|
221
|
+
color: #fff;
|
|
222
|
+
|
|
223
|
+
display: flex;
|
|
224
|
+
justify-content: center;
|
|
225
|
+
align-items: center;
|
|
226
|
+
}
|
|
201
227
|
}
|
|
202
228
|
&__footer {
|
|
203
229
|
display: flex;
|
|
@@ -2,23 +2,26 @@
|
|
|
2
2
|
<base-header class="app-header" :type="'white'">
|
|
3
3
|
<div class="row justify-content-center">
|
|
4
4
|
<div
|
|
5
|
-
:class="{ 'images__container':
|
|
5
|
+
:class="{ 'images__container': users.length }"
|
|
6
6
|
class="col-6 my-auto header__container"
|
|
7
7
|
>
|
|
8
8
|
<slot name="header-top" />
|
|
9
9
|
|
|
10
10
|
<div class="header__content">
|
|
11
11
|
<h2 class="font-weight-bold display-3">{{name}}</h2>
|
|
12
|
-
<div class="images" v-if="
|
|
12
|
+
<div class="images" v-if="users.length">
|
|
13
13
|
<el-tooltip
|
|
14
|
-
v-for="
|
|
15
|
-
:key="
|
|
14
|
+
v-for="user in users"
|
|
15
|
+
:key="user.id"
|
|
16
16
|
placement="top"
|
|
17
|
-
:content="
|
|
17
|
+
:content="user.name"
|
|
18
|
+
class="user__avatar"
|
|
19
|
+
:class="{ 'user__avatar--active': activeUserId === user.id }"
|
|
18
20
|
>
|
|
19
21
|
<img
|
|
20
|
-
|
|
21
|
-
:
|
|
22
|
+
@click="setActiveUser(user.id)"
|
|
23
|
+
:src="user.avatar"
|
|
24
|
+
:alt="user.name"
|
|
22
25
|
>
|
|
23
26
|
</el-tooltip>
|
|
24
27
|
</div>
|
|
@@ -52,7 +55,8 @@
|
|
|
52
55
|
export default {
|
|
53
56
|
data(){
|
|
54
57
|
return{
|
|
55
|
-
default: ''
|
|
58
|
+
default: '',
|
|
59
|
+
activeUserId: null
|
|
56
60
|
};
|
|
57
61
|
},
|
|
58
62
|
props:{
|
|
@@ -68,11 +72,22 @@ export default {
|
|
|
68
72
|
type: Number,
|
|
69
73
|
default: null
|
|
70
74
|
},
|
|
71
|
-
|
|
75
|
+
users: {
|
|
72
76
|
type: Array,
|
|
73
77
|
default: () => []
|
|
74
78
|
}
|
|
75
79
|
},
|
|
80
|
+
methods: {
|
|
81
|
+
setActiveUser(userId) {
|
|
82
|
+
if (this.activeUserId !== userId) {
|
|
83
|
+
this.activeUserId = userId;
|
|
84
|
+
this.$emit('active-user', userId);
|
|
85
|
+
} else {
|
|
86
|
+
this.activeUserId = null;
|
|
87
|
+
this.$emit('active-user', null);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
76
91
|
};
|
|
77
92
|
</script>
|
|
78
93
|
<style lang="scss" scoped>
|
|
@@ -120,6 +135,15 @@ export default {
|
|
|
120
135
|
display: flex;
|
|
121
136
|
align-items: center;
|
|
122
137
|
user-select: none;
|
|
138
|
+
.user__avatar {
|
|
139
|
+
cursor: pointer;
|
|
140
|
+
border: 2px solid transparent;
|
|
141
|
+
transition: border-color 0.5s;
|
|
142
|
+
&--active {
|
|
143
|
+
border-color: #1da1f1;
|
|
144
|
+
z-index: 10;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
123
147
|
img {
|
|
124
148
|
$size: 32px;
|
|
125
149
|
display: block;
|
|
@@ -0,0 +1,194 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="recruitment__card">
|
|
3
|
+
<div>
|
|
4
|
+
<div class="recruitment__card__header">
|
|
5
|
+
<div class="recruitment__card__header__status">
|
|
6
|
+
<div class="skeleton--animate select"></div>
|
|
7
|
+
</div>
|
|
8
|
+
</div>
|
|
9
|
+
|
|
10
|
+
<div class="recruitment__card__content">
|
|
11
|
+
<span class="recruitment__card__content__date">
|
|
12
|
+
<div class="skeleton--animate date"></div>
|
|
13
|
+
</span>
|
|
14
|
+
<h2 class="recruitment__card__content__title">
|
|
15
|
+
<div class="skeleton--animate title"></div>
|
|
16
|
+
</h2>
|
|
17
|
+
<span class="recruitment__card__content__id">
|
|
18
|
+
<div class="skeleton--animate id"></div>
|
|
19
|
+
</span>
|
|
20
|
+
|
|
21
|
+
<div class="recruitment__card__info">
|
|
22
|
+
<p class="recruitment__card__info__text">
|
|
23
|
+
<div class="skeleton--animate number"></div>
|
|
24
|
+
</p>
|
|
25
|
+
<p class="recruitment__card__info__text">
|
|
26
|
+
<div class="skeleton--animate number"></div>
|
|
27
|
+
</p>
|
|
28
|
+
<p class="recruitment__card__info__text">
|
|
29
|
+
<div class="skeleton--animate number"></div>
|
|
30
|
+
</p>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
<div class="recruitment__card__footer">
|
|
35
|
+
<p class="recruitment__card__footer__title">EQUIPE RESPONSÁVEL</p>
|
|
36
|
+
<div class="recruitment__card__footer__images">
|
|
37
|
+
<div class="skeleton--animate img"></div>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
</template>
|
|
43
|
+
|
|
44
|
+
<script>
|
|
45
|
+
export default {
|
|
46
|
+
name: 'recruitment-card-skeleton'
|
|
47
|
+
};
|
|
48
|
+
</script>
|
|
49
|
+
|
|
50
|
+
<style lang="scss" scoped>
|
|
51
|
+
@-webkit-keyframes placeholderSkeleton {
|
|
52
|
+
0% {
|
|
53
|
+
background-position: -468px 0;
|
|
54
|
+
}
|
|
55
|
+
100% {
|
|
56
|
+
background-position: 468px 0;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@-webkit-keyframes skeletonAnimate {
|
|
61
|
+
from {
|
|
62
|
+
background-position: top left;
|
|
63
|
+
}
|
|
64
|
+
to {
|
|
65
|
+
background-position: top right;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.select {
|
|
70
|
+
display: block;
|
|
71
|
+
width: 100px;
|
|
72
|
+
height: 20px;
|
|
73
|
+
margin-top: 10px;
|
|
74
|
+
}
|
|
75
|
+
.date {
|
|
76
|
+
display: block;
|
|
77
|
+
width: 150px;
|
|
78
|
+
height: 10px;
|
|
79
|
+
margin-top: 10px;
|
|
80
|
+
}
|
|
81
|
+
.title {
|
|
82
|
+
display: block;
|
|
83
|
+
width: 250px;
|
|
84
|
+
height: 20px;
|
|
85
|
+
margin-top: 10px;
|
|
86
|
+
}
|
|
87
|
+
.id {
|
|
88
|
+
display: block;
|
|
89
|
+
width: 110px;
|
|
90
|
+
height: 15px;
|
|
91
|
+
margin-top: 10px;
|
|
92
|
+
}
|
|
93
|
+
.number {
|
|
94
|
+
display: block;
|
|
95
|
+
width: 120px;
|
|
96
|
+
height: 15px;
|
|
97
|
+
}
|
|
98
|
+
.img {
|
|
99
|
+
display: block;
|
|
100
|
+
width: 32px;
|
|
101
|
+
height: 32px;
|
|
102
|
+
border-radius: 100px;
|
|
103
|
+
margin-top: 10px;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.skeleton--animate {
|
|
107
|
+
-webkit-animation-duration: 1s;
|
|
108
|
+
-webkit-animation-fill-mode: forwards;
|
|
109
|
+
-webkit-animation-iteration-count: infinite;
|
|
110
|
+
-webkit-animation-name: placeholderSkeleton;
|
|
111
|
+
-webkit-animation-timing-function: linear;
|
|
112
|
+
background: #e0e3e6;
|
|
113
|
+
background-image: -webkit-gradient(
|
|
114
|
+
linear,
|
|
115
|
+
left center,
|
|
116
|
+
right center,
|
|
117
|
+
from(#e0e3e6),
|
|
118
|
+
color-stop(0.2, #edeef1),
|
|
119
|
+
color-stop(0.4, #e0e3e6),
|
|
120
|
+
to(#e0e3e6)
|
|
121
|
+
);
|
|
122
|
+
background-image: -webkit-linear-gradient(
|
|
123
|
+
left,
|
|
124
|
+
#e0e3e6 0%,
|
|
125
|
+
#edeef1 20%,
|
|
126
|
+
#e0e3e6 40%,
|
|
127
|
+
#e0e3e6 100%
|
|
128
|
+
);
|
|
129
|
+
background-repeat: no-repeat;
|
|
130
|
+
background-size: 800px 104px;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.recruitment__card {
|
|
134
|
+
cursor: pointer;
|
|
135
|
+
background: #fff;
|
|
136
|
+
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08);
|
|
137
|
+
padding: 20px;
|
|
138
|
+
border-radius: 4px;
|
|
139
|
+
border: none;
|
|
140
|
+
text-align: initial;
|
|
141
|
+
color: #1D364B;
|
|
142
|
+
transition: transform 0.25s;
|
|
143
|
+
|
|
144
|
+
&__header {
|
|
145
|
+
display: flex;
|
|
146
|
+
align-items: center;
|
|
147
|
+
justify-content: space-between;
|
|
148
|
+
padding: 5px 0;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
&__content {
|
|
152
|
+
&__date {
|
|
153
|
+
font-size: 0.875rem;
|
|
154
|
+
font-weight: 400;
|
|
155
|
+
color: #AEB6BE;
|
|
156
|
+
}
|
|
157
|
+
&__title {
|
|
158
|
+
font-size: 1.275rem;
|
|
159
|
+
color: #1D364B;
|
|
160
|
+
margin-bottom: 0;
|
|
161
|
+
}
|
|
162
|
+
&__id {
|
|
163
|
+
font-size: 0.875rem;
|
|
164
|
+
font-weight: 600;
|
|
165
|
+
color: #525F7F;
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
&__info {
|
|
170
|
+
padding: 20px 0;
|
|
171
|
+
&__text {
|
|
172
|
+
margin-bottom: 0;
|
|
173
|
+
font-size: 1rem;
|
|
174
|
+
font-weight: 500;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
&__footer {
|
|
179
|
+
border-top: 1px solid #E9E9E9;
|
|
180
|
+
padding-top: 10px;
|
|
181
|
+
&__title {
|
|
182
|
+
color: #525F7F;
|
|
183
|
+
font-size: 0.875rem;
|
|
184
|
+
font-weight: 600;
|
|
185
|
+
margin-bottom: 0;
|
|
186
|
+
}
|
|
187
|
+
&__images {
|
|
188
|
+
display: flex;
|
|
189
|
+
align-items: center;
|
|
190
|
+
user-select: none;
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
</style>
|