@burh/nuxt-core 1.0.435 → 1.0.436
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.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<base-header class="app-header" :type="'white'">
|
|
3
|
-
<div class="row justify-content-between">
|
|
3
|
+
<div class="row justify-content-between app__header">
|
|
4
4
|
<div
|
|
5
5
|
:class="{ 'images__container': users.length }"
|
|
6
6
|
class="col-8 my-auto header__container"
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
<slot name="header-top" />
|
|
9
9
|
|
|
10
10
|
<div class="header__content">
|
|
11
|
-
<div class="d-flex align-items-center justify-content-center flex-row">
|
|
11
|
+
<div class="d-flex align-items-center justify-content-center flex-row header__title" :class="{ hasBackButton }">
|
|
12
12
|
<button class="back__button" v-if="hasBackButton" @click="goBack()">
|
|
13
13
|
<i class="fas fa-arrow-left"></i>
|
|
14
14
|
</button>
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
</div>
|
|
26
26
|
<div class="images" v-if="users.length">
|
|
27
27
|
<el-tooltip
|
|
28
|
-
v-for="user in users"
|
|
28
|
+
v-for="user in users.slice(0, 5)"
|
|
29
29
|
:key="user.id"
|
|
30
30
|
placement="top"
|
|
31
31
|
:content="user.name"
|
|
@@ -42,6 +42,33 @@
|
|
|
42
42
|
:style=" `--avatar-color: #${avatarColor}` "
|
|
43
43
|
/>
|
|
44
44
|
</el-tooltip>
|
|
45
|
+
|
|
46
|
+
<template v-if="users.length > 5">
|
|
47
|
+
<el-dropdown trigger="click" class="ml-4">
|
|
48
|
+
<span class="app__header__dropdown__title" :class="{ 'app__header__dropdown__title--active': users.map(user => user.id).includes(activeUserId) }" draggable="false">
|
|
49
|
+
+ {{ users.slice(5).length }}
|
|
50
|
+
</span>
|
|
51
|
+
<el-dropdown-menu slot="dropdown" class="app__header__imagems__dropdown">
|
|
52
|
+
<el-dropdown-item
|
|
53
|
+
v-for="user in users.slice(5)"
|
|
54
|
+
:key="user.id"
|
|
55
|
+
@click.native="setActiveUser(user.id)"
|
|
56
|
+
>
|
|
57
|
+
<div class="dropdown__user__data" :class="{ 'dropdown__user__data--active': activeUserId === user.id }">
|
|
58
|
+
<image-with-fallback
|
|
59
|
+
:src="user.avatar"
|
|
60
|
+
:alt="user.name"
|
|
61
|
+
:fallbackText="user.name"
|
|
62
|
+
:fallbackBackground="avatarColor"
|
|
63
|
+
fallbackSize="200x200"
|
|
64
|
+
:style=" `--avatar-color: #${avatarColor}` "
|
|
65
|
+
/>
|
|
66
|
+
<span>{{ user.name }} {{ user.last_name }}</span>
|
|
67
|
+
</div>
|
|
68
|
+
</el-dropdown-item>
|
|
69
|
+
</el-dropdown-menu>
|
|
70
|
+
</el-dropdown>
|
|
71
|
+
</template>
|
|
45
72
|
</div>
|
|
46
73
|
</div>
|
|
47
74
|
|
|
@@ -52,7 +79,7 @@
|
|
|
52
79
|
<slot name="header-bottom" />
|
|
53
80
|
</div>
|
|
54
81
|
|
|
55
|
-
<div class="col-4 d-flex justify-content-end align-items-start">
|
|
82
|
+
<div class="col-4 d-flex justify-content-end align-items-start footer__content">
|
|
56
83
|
<el-tooltip v-for="(item, index) in icons" :key="index"
|
|
57
84
|
v-show="!item.disabled"
|
|
58
85
|
class="item" effect="dark" :content="item.title" placement="top">
|
|
@@ -70,7 +97,13 @@
|
|
|
70
97
|
</base-header>
|
|
71
98
|
</template>
|
|
72
99
|
<script>
|
|
100
|
+
import { Dropdown, DropdownMenu, DropdownItem } from 'element-ui';
|
|
73
101
|
export default {
|
|
102
|
+
components: {
|
|
103
|
+
ElDropdown: Dropdown,
|
|
104
|
+
ElDropdownMenu: DropdownMenu,
|
|
105
|
+
ElDropdownItem: DropdownItem,
|
|
106
|
+
},
|
|
74
107
|
data(){
|
|
75
108
|
return{
|
|
76
109
|
default: '',
|
|
@@ -131,7 +164,119 @@ export default {
|
|
|
131
164
|
}
|
|
132
165
|
};
|
|
133
166
|
</script>
|
|
167
|
+
<style lang="scss">
|
|
168
|
+
.app__header__imagems__dropdown {
|
|
169
|
+
max-height: 300px;
|
|
170
|
+
overflow: hidden;
|
|
171
|
+
overflow-y: scroll;
|
|
172
|
+
&::-webkit-scrollbar {
|
|
173
|
+
width: 8px;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
&::-webkit-scrollbar-track {
|
|
177
|
+
background: #f5f5f5;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
&::-webkit-scrollbar-thumb {
|
|
181
|
+
background: #e9e8e8;
|
|
182
|
+
border-radius: 10px;
|
|
183
|
+
}
|
|
184
|
+
.dropdown__user__data {
|
|
185
|
+
display: grid;
|
|
186
|
+
grid-template-columns: 40px 1fr;
|
|
187
|
+
align-items: center;
|
|
188
|
+
margin-bottom: 5px;
|
|
189
|
+
img {
|
|
190
|
+
width: 32px;
|
|
191
|
+
height: 32px;
|
|
192
|
+
border-radius: 100px;
|
|
193
|
+
display: block;
|
|
194
|
+
border: 2px solid transparent;
|
|
195
|
+
}
|
|
196
|
+
span {
|
|
197
|
+
font-weight: 500;
|
|
198
|
+
}
|
|
199
|
+
&--active {
|
|
200
|
+
img {
|
|
201
|
+
border-color: #1F8CEB;
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
</style>
|
|
207
|
+
|
|
134
208
|
<style lang="scss" scoped>
|
|
209
|
+
@media (max-width: 850px) {
|
|
210
|
+
.app__header {
|
|
211
|
+
.header__container {
|
|
212
|
+
width: 100%!important;
|
|
213
|
+
max-width: none!important;
|
|
214
|
+
}
|
|
215
|
+
.hasBackButton {
|
|
216
|
+
flex-direction: row!important;
|
|
217
|
+
justify-content: flex-start!important;
|
|
218
|
+
}
|
|
219
|
+
.header__content {
|
|
220
|
+
width: 100%!important;
|
|
221
|
+
max-width: none!important;
|
|
222
|
+
flex-direction: column!important;
|
|
223
|
+
text-align: left!important;
|
|
224
|
+
align-items: flex-start!important;
|
|
225
|
+
justify-content: flex-start!important;
|
|
226
|
+
> .images {
|
|
227
|
+
margin: 0!important;
|
|
228
|
+
margin-top: 10px!important;
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
@media (max-width: 600px) {
|
|
234
|
+
.app__header {
|
|
235
|
+
display: flex!important;
|
|
236
|
+
flex-direction: column!important;
|
|
237
|
+
.header__content {
|
|
238
|
+
.header__title {
|
|
239
|
+
width: 100%!important;
|
|
240
|
+
max-width: none!important;
|
|
241
|
+
text-align: left!important;
|
|
242
|
+
align-items: flex-start!important;
|
|
243
|
+
justify-content: flex-start!important;
|
|
244
|
+
&:not(:has(.hasBackButton)) {
|
|
245
|
+
flex-direction: column!important;
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
.footer__content {
|
|
250
|
+
width: 100%!important;
|
|
251
|
+
max-width: none!important;
|
|
252
|
+
padding: 0!important;
|
|
253
|
+
display: grid!important;
|
|
254
|
+
grid-template-columns: repeat(auto-fit, minmax(calc(100% / 2), 1fr));
|
|
255
|
+
justify-content: stretch!important;
|
|
256
|
+
/deep/ button {
|
|
257
|
+
width: 100%!important;
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.app__header__dropdown__title {
|
|
264
|
+
background: #8DA2B5;
|
|
265
|
+
color: #fff;
|
|
266
|
+
width: 42px;
|
|
267
|
+
height: 42px;
|
|
268
|
+
display: grid;
|
|
269
|
+
place-items: center;
|
|
270
|
+
border-radius: 100px;
|
|
271
|
+
border: 2px solid #fff;
|
|
272
|
+
margin-left: -34px;
|
|
273
|
+
font-size: 0.7rem;
|
|
274
|
+
user-select: none;
|
|
275
|
+
&--active {
|
|
276
|
+
border-color: #1F8CEB;
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
|
|
135
280
|
#credits-amount {
|
|
136
281
|
margin: 0!important;
|
|
137
282
|
min-width: 8em;
|