@burh/nuxt-core 1.0.464 → 1.0.466
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/sass/burh-ds/content/_main-content.scss +25 -25
- package/components/burh-ds/Cards/CourseInfoCard.vue +132 -58
- package/components/burh-ds/Modals/AppConfigModal.vue +67 -12
- package/components/burh-ds/Navbar/BaseNav.vue +0 -13
- package/components/burh-ds/Skeleton/AppHeader.vue +47 -6
- package/components/burh-ds/Skeleton/SkeletonAnimate.vue +146 -146
- package/components/organismos/emptyChart/index.vue +39 -0
- package/package.json +1 -1
- package/plugins/dashboard/dashboard-plugin.js +4 -2
- package/plugins/dashboard/globalComponents.js +0 -6
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
.main-content {
|
|
2
|
-
.container-fluid {
|
|
3
|
-
&--bu {
|
|
4
|
-
width: 90%!important;
|
|
5
|
-
max-width: 1760px!important;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
@for $value-container from 1 through 20 {
|
|
9
|
-
&--#{$value-container * 5} {
|
|
10
|
-
@media (min-width: map-get($grid-breakpoints, "lg")) {
|
|
11
|
-
max-width: calc(100% - #{$value-container * 5vw});
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
.navbar-top {
|
|
17
|
-
padding-right: 1rem !important;
|
|
18
|
-
padding-left: 1rem !important;
|
|
19
|
-
|
|
20
|
-
@include media-breakpoint-up(lg) {
|
|
21
|
-
padding-right: 0 !important;
|
|
22
|
-
padding-left: 0 !important;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
}
|
|
1
|
+
.main-content {
|
|
2
|
+
.container-fluid {
|
|
3
|
+
&--bu {
|
|
4
|
+
width: 90%!important;
|
|
5
|
+
max-width: 1760px!important;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
@for $value-container from 1 through 20 {
|
|
9
|
+
&--#{$value-container * 5} {
|
|
10
|
+
@media (min-width: map-get($grid-breakpoints, "lg")) {
|
|
11
|
+
max-width: calc(100% - #{$value-container * 5vw});
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
.navbar-top {
|
|
17
|
+
padding-right: 1rem !important;
|
|
18
|
+
padding-left: 1rem !important;
|
|
19
|
+
|
|
20
|
+
@include media-breakpoint-up(lg) {
|
|
21
|
+
padding-right: 0 !important;
|
|
22
|
+
padding-left: 0 !important;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
@@ -1,46 +1,93 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="
|
|
3
|
-
<div class="
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
<div class="
|
|
8
|
-
<div class="
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
<img
|
|
21
|
-
v-if="items.icon"
|
|
22
|
-
:src="items.icon"
|
|
23
|
-
style="width: 5rem"
|
|
24
|
-
/>
|
|
25
|
-
<div>
|
|
26
|
-
<span
|
|
27
|
-
v-if="items.number"
|
|
28
|
-
:class="items.color ? items.color : ''"
|
|
29
|
-
class="display-1 font-weight-bold number-value"
|
|
30
|
-
>{{ items.percentage ? items.percentage : items.number}}</span
|
|
31
|
-
>
|
|
32
|
-
<p
|
|
33
|
-
v-if="items.name"
|
|
34
|
-
:class="[
|
|
35
|
-
items.color ? items.color : '',
|
|
36
|
-
hasChart && 'chart-label',
|
|
37
|
-
hasChart && `chart-color-${index}`
|
|
38
|
-
]"
|
|
2
|
+
<div class="w-100 h-100">
|
|
3
|
+
<div class="card h-100">
|
|
4
|
+
<div class="pt-4 pl-4 pr-4">
|
|
5
|
+
<h4 class="card-title font-weight-bold mb-0">{{ title }}</h4>
|
|
6
|
+
</div>
|
|
7
|
+
<div class="container-fluid container-fluid--bu pt-2 pb-2 container--height">
|
|
8
|
+
<div class="card__content">
|
|
9
|
+
<div v-if="hasChart">
|
|
10
|
+
<div v-if="haveDataCoursesProgress">
|
|
11
|
+
<div class="chart__graph">
|
|
12
|
+
<doughnut-chart :data="chartData" />
|
|
13
|
+
</div>
|
|
14
|
+
<div class="row card-body px-0 justify-content-center">
|
|
15
|
+
<div
|
|
16
|
+
class="text-center px-0"
|
|
17
|
+
:class="!items.icon ? 'col-6 col-sm-3 col-md-3' : 'col-12'"
|
|
18
|
+
v-for="(items, index) in coursesProgress"
|
|
19
|
+
:key="items.name"
|
|
39
20
|
>
|
|
40
|
-
{
|
|
41
|
-
|
|
21
|
+
<div :class="{ 'item__with__icon': items.icon }">
|
|
22
|
+
<img
|
|
23
|
+
v-if="items.icon"
|
|
24
|
+
:src="items.icon"
|
|
25
|
+
style="width: 5rem"
|
|
26
|
+
/>
|
|
27
|
+
<div>
|
|
28
|
+
<span
|
|
29
|
+
v-if="items.number"
|
|
30
|
+
:class="items.color ? items.color : ''"
|
|
31
|
+
class="display-1 font-weight-bold number-value"
|
|
32
|
+
>{{ items.percentage ? items.percentage : items.number}}</span
|
|
33
|
+
>
|
|
34
|
+
<p
|
|
35
|
+
v-if="items.name"
|
|
36
|
+
:class="[
|
|
37
|
+
items.color ? items.color : '',
|
|
38
|
+
hasChart && 'chart-label',
|
|
39
|
+
hasChart && `chart-color-${index}`
|
|
40
|
+
]"
|
|
41
|
+
>
|
|
42
|
+
{{ items.name }}
|
|
43
|
+
</p>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
42
47
|
</div>
|
|
43
48
|
</div>
|
|
49
|
+
<div v-else>
|
|
50
|
+
<empty-chart :item="'status dos treinamentos'"/>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
<div v-if="hasIcon">
|
|
54
|
+
<div v-if="haveDataOverview" class="row card-body px-0 justify-content-center">
|
|
55
|
+
<div
|
|
56
|
+
class="text-center px-0"
|
|
57
|
+
:class="!items.icon ? 'col-6 col-sm-3 col-md-3' : 'col-12'"
|
|
58
|
+
v-for="(items, index) in overview"
|
|
59
|
+
:key="items.name"
|
|
60
|
+
>
|
|
61
|
+
<div :class="{ 'item__with__icon': items.icon }">
|
|
62
|
+
<img
|
|
63
|
+
v-if="items.icon"
|
|
64
|
+
:src="items.icon"
|
|
65
|
+
style="width: 5rem"
|
|
66
|
+
/>
|
|
67
|
+
<div>
|
|
68
|
+
<span
|
|
69
|
+
v-if="items.number"
|
|
70
|
+
:class="items.color ? items.color : ''"
|
|
71
|
+
class="display-1 font-weight-bold number-value"
|
|
72
|
+
>{{ items.percentage ? items.percentage : items.number}}</span
|
|
73
|
+
>
|
|
74
|
+
<p
|
|
75
|
+
v-if="items.name"
|
|
76
|
+
:class="[
|
|
77
|
+
items.color ? items.color : '',
|
|
78
|
+
hasChart && 'chart-label',
|
|
79
|
+
hasChart && `chart-color-${index}`
|
|
80
|
+
]"
|
|
81
|
+
>
|
|
82
|
+
{{ items.name }}
|
|
83
|
+
</p>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
<div v-else>
|
|
89
|
+
<empty-chart :item="'resumo geral'"/>
|
|
90
|
+
</div>
|
|
44
91
|
</div>
|
|
45
92
|
</div>
|
|
46
93
|
</div>
|
|
@@ -49,37 +96,64 @@
|
|
|
49
96
|
</template>
|
|
50
97
|
<script>
|
|
51
98
|
import DoughnutChart from '../Chart/DoughnutChart.vue';
|
|
52
|
-
|
|
99
|
+
import EmptyChart from '../../organismos/emptyChart/index.vue';
|
|
53
100
|
export default {
|
|
54
101
|
components: {
|
|
55
|
-
DoughnutChart
|
|
102
|
+
DoughnutChart,
|
|
103
|
+
EmptyChart
|
|
56
104
|
},
|
|
57
105
|
props: {
|
|
58
106
|
title: {
|
|
59
107
|
type: String,
|
|
60
|
-
default:
|
|
108
|
+
default:''
|
|
61
109
|
},
|
|
62
110
|
hasChart: {
|
|
63
111
|
type: Boolean,
|
|
64
112
|
default: false
|
|
65
113
|
},
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
labels: this.coursesInfo.map(item => item.name),
|
|
73
|
-
datasets: [
|
|
74
|
-
{
|
|
75
|
-
label: 'Dataset 1',
|
|
76
|
-
data: this.coursesInfo.map(item => item.number),
|
|
77
|
-
backgroundColor: ['#5865F2', '#9D35FC', '#FF539D', '#FF7D7E', '#FFCF02', '#00b388']
|
|
78
|
-
},
|
|
79
|
-
]
|
|
80
|
-
},
|
|
81
|
-
};
|
|
114
|
+
hasIcon: {
|
|
115
|
+
type: Boolean,
|
|
116
|
+
default: false
|
|
117
|
+
},
|
|
118
|
+
overview: Array,
|
|
119
|
+
coursesProgress: Array,
|
|
82
120
|
},
|
|
121
|
+
computed:{
|
|
122
|
+
chartData(){
|
|
123
|
+
if(this.coursesProgress.length){
|
|
124
|
+
return {
|
|
125
|
+
labels: this.coursesProgress.map(item => item.name),
|
|
126
|
+
datasets: [
|
|
127
|
+
{
|
|
128
|
+
label: 'Dataset 1',
|
|
129
|
+
data: this.coursesProgress.map(item => item.number),
|
|
130
|
+
backgroundColor: ['#5865F2', '#9D35FC', '#FF539D', '#FF7D7E', '#FFCF02', '#00b388']
|
|
131
|
+
},
|
|
132
|
+
]
|
|
133
|
+
};
|
|
134
|
+
}else{
|
|
135
|
+
return {};
|
|
136
|
+
}
|
|
137
|
+
},
|
|
138
|
+
haveDataCoursesProgress(){
|
|
139
|
+
let data = this.coursesProgress;
|
|
140
|
+
if(!data.length){
|
|
141
|
+
return false;
|
|
142
|
+
}else{
|
|
143
|
+
if(data[0].number == 0 && data[1].number == 0 && data[2].number == 0) return false;
|
|
144
|
+
return true;
|
|
145
|
+
}
|
|
146
|
+
},
|
|
147
|
+
haveDataOverview(){
|
|
148
|
+
let data = this.overview.map((e)=>e.number);
|
|
149
|
+
if(!this.overview.length){
|
|
150
|
+
return false;
|
|
151
|
+
}else{
|
|
152
|
+
if(data[0] == 0 && data[1] == 0 && data[2] == 0) return false;
|
|
153
|
+
return true;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
}
|
|
83
157
|
};
|
|
84
158
|
</script>
|
|
85
159
|
<style lang="scss" scoped>
|
|
@@ -101,11 +101,11 @@
|
|
|
101
101
|
<button
|
|
102
102
|
v-if="buttons.id != 8"
|
|
103
103
|
role="button"
|
|
104
|
-
class="tag tag-outline-primary d-block w-100 buttons"
|
|
104
|
+
class="tag tag-outline-primary-teste-online d-block w-100 buttons"
|
|
105
105
|
:value="buttons.value"
|
|
106
106
|
:class="
|
|
107
107
|
buttons.id == currentSelectedButton
|
|
108
|
-
? 'active'
|
|
108
|
+
? 'active-teste-online'
|
|
109
109
|
: ''
|
|
110
110
|
"
|
|
111
111
|
@click="timeSelection(buttons.id)"
|
|
@@ -125,7 +125,7 @@
|
|
|
125
125
|
class="fas fa-check mr-1"
|
|
126
126
|
:class="[currentSelectedButton == 8 ? 'custom-icon': 'custom-time-icon']"
|
|
127
127
|
></i>
|
|
128
|
-
|
|
128
|
+
<div v-if="buttons.id == 8" @click="setInitValue(buttons.id)">
|
|
129
129
|
<el-time-picker
|
|
130
130
|
format="HH:mm:ss"
|
|
131
131
|
value-format="HH:mm:ss"
|
|
@@ -133,9 +133,9 @@
|
|
|
133
133
|
@change="setValueChange()"
|
|
134
134
|
:class="currentSelectedButton == buttons.id ? 'active-custom': 'not-active-custom' "
|
|
135
135
|
class="w-100"
|
|
136
|
-
placeholder="
|
|
137
|
-
|
|
138
|
-
</div>
|
|
136
|
+
placeholder="Tempo personalizado"
|
|
137
|
+
/>
|
|
138
|
+
</div>
|
|
139
139
|
</div>
|
|
140
140
|
</div>
|
|
141
141
|
<div v-else-if="!haveCustomTime">
|
|
@@ -186,6 +186,11 @@
|
|
|
186
186
|
import { mask } from 'vue-the-mask';
|
|
187
187
|
import swal from 'sweetalert2';
|
|
188
188
|
import { Select, Option, TimePicker } from 'element-ui';
|
|
189
|
+
import lang from 'element-ui/lib/locale/lang/pt-br';
|
|
190
|
+
import locale from 'element-ui/lib/locale';
|
|
191
|
+
|
|
192
|
+
locale.use(lang);
|
|
193
|
+
|
|
189
194
|
export default {
|
|
190
195
|
components: {
|
|
191
196
|
[Select.name]: Select,
|
|
@@ -462,6 +467,24 @@ export default {
|
|
|
462
467
|
<style lang="scss">
|
|
463
468
|
@import 'node_modules/@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
|
|
464
469
|
|
|
470
|
+
.el-time-panel{
|
|
471
|
+
width: 161px;
|
|
472
|
+
.el-scrollbar__view:not(.el-autocomplete-suggestion__list) {
|
|
473
|
+
border: 1px solid #fff;
|
|
474
|
+
border-radius: 0.25rem;
|
|
475
|
+
}
|
|
476
|
+
.el-time-panel__btn.cancel{
|
|
477
|
+
display: none;
|
|
478
|
+
}
|
|
479
|
+
.el-time-panel__btn.confirm {
|
|
480
|
+
font-weight: 200;
|
|
481
|
+
color: #00B388;
|
|
482
|
+
}
|
|
483
|
+
.el-scrollbar__wrap{
|
|
484
|
+
margin-bottom: 0 !important;
|
|
485
|
+
overflow-x: hidden;
|
|
486
|
+
}
|
|
487
|
+
}
|
|
465
488
|
.fixed-button {
|
|
466
489
|
.btn {
|
|
467
490
|
font-size: 0.775rem;
|
|
@@ -505,6 +528,30 @@ export default {
|
|
|
505
528
|
}
|
|
506
529
|
</style>
|
|
507
530
|
<style lang="scss" scoped>
|
|
531
|
+
.tag-outline-primary-teste-online:active{
|
|
532
|
+
background-color: #00b388;
|
|
533
|
+
color: #fff;
|
|
534
|
+
border: #00b388;
|
|
535
|
+
height: 51.39px;
|
|
536
|
+
}
|
|
537
|
+
.tag-outline-primary-teste-online{
|
|
538
|
+
background-color: #fff;
|
|
539
|
+
color: #00b388;
|
|
540
|
+
border: 2px solid #00b388;
|
|
541
|
+
height: 51.39px;
|
|
542
|
+
}
|
|
543
|
+
.active-teste-online{
|
|
544
|
+
background-color: #00b388;
|
|
545
|
+
color: #fff;
|
|
546
|
+
border: #00b388;
|
|
547
|
+
height: 51.39px;
|
|
548
|
+
i{
|
|
549
|
+
color:#fff;
|
|
550
|
+
}
|
|
551
|
+
small{
|
|
552
|
+
color: #fff;
|
|
553
|
+
}
|
|
554
|
+
}
|
|
508
555
|
.custom-time::placeholder{
|
|
509
556
|
font-size: 80%;
|
|
510
557
|
color:#00b388;
|
|
@@ -528,7 +575,7 @@ export default {
|
|
|
528
575
|
position:absolute;
|
|
529
576
|
top:1rem;
|
|
530
577
|
z-index: 3;
|
|
531
|
-
left:
|
|
578
|
+
left:1.5rem;
|
|
532
579
|
color:#fff;
|
|
533
580
|
}
|
|
534
581
|
}
|
|
@@ -549,13 +596,13 @@ export default {
|
|
|
549
596
|
}
|
|
550
597
|
.el-input__prefix{
|
|
551
598
|
.el-icon-time:before{
|
|
552
|
-
|
|
599
|
+
display: none;
|
|
553
600
|
}
|
|
554
601
|
}
|
|
555
602
|
.el-input__suffix{
|
|
556
603
|
.el-input__suffix-inner{
|
|
557
604
|
.el-icon-circle-close{
|
|
558
|
-
|
|
605
|
+
display: none;
|
|
559
606
|
}
|
|
560
607
|
}
|
|
561
608
|
}
|
|
@@ -568,22 +615,30 @@ export default {
|
|
|
568
615
|
border: 2px solid #00b388;
|
|
569
616
|
display: block;
|
|
570
617
|
height: 51.39px;
|
|
618
|
+
font-size: 0.8rem;
|
|
619
|
+
padding: 0;
|
|
571
620
|
color:#00b388;
|
|
572
621
|
text-align: center;
|
|
573
622
|
&::placeholder{
|
|
574
623
|
color:#00b388;
|
|
575
624
|
}
|
|
625
|
+
&:hover{
|
|
626
|
+
border: 2px solid #00b388;
|
|
627
|
+
background-color: #00b388;
|
|
628
|
+
&::placeholder{
|
|
629
|
+
color:#fff;
|
|
630
|
+
}
|
|
631
|
+
}
|
|
576
632
|
}
|
|
577
633
|
.el-input__prefix{
|
|
578
634
|
.el-icon-time:before{
|
|
579
|
-
|
|
580
|
-
color:#00b388;
|
|
635
|
+
display: none;
|
|
581
636
|
}
|
|
582
637
|
}
|
|
583
638
|
.el-input__suffix{
|
|
584
639
|
.el-input__suffix-inner{
|
|
585
640
|
.el-icon-circle-close{
|
|
586
|
-
|
|
641
|
+
display: none;
|
|
587
642
|
}
|
|
588
643
|
}
|
|
589
644
|
}
|
|
@@ -4,19 +4,6 @@
|
|
|
4
4
|
<slot name="brand"></slot>
|
|
5
5
|
|
|
6
6
|
<div class="d-flex">
|
|
7
|
-
<slot name="toggle-button">
|
|
8
|
-
<button
|
|
9
|
-
class="navbar-toggler collapsed d-sm-none"
|
|
10
|
-
v-if="hasMenu"
|
|
11
|
-
type="button"
|
|
12
|
-
@click="toggleBodyClass('no-scroll')"
|
|
13
|
-
@click.stop="toggleMenu"
|
|
14
|
-
aria-expanded="false"
|
|
15
|
-
aria-label="Toggle navigation"
|
|
16
|
-
>
|
|
17
|
-
<span class="navbar-toggler-icon"></span>
|
|
18
|
-
</button>
|
|
19
|
-
</slot>
|
|
20
7
|
<div
|
|
21
8
|
class="navbar-collapse navbar-custom-collapse collapse show d-sm-none"
|
|
22
9
|
:class="menuClasses"
|
|
@@ -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="col-8 my-auto header__container"
|
|
6
6
|
>
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
</template>
|
|
12
12
|
|
|
13
13
|
<div class="header__content row">
|
|
14
|
-
<div class="d-flex align-items-center flex-row">
|
|
14
|
+
<div class="d-flex align-items-center flex-row w-100">
|
|
15
15
|
<skeleton-animate :width="300" :height="40" />
|
|
16
16
|
</div>
|
|
17
17
|
<div class="images">
|
|
@@ -22,13 +22,13 @@
|
|
|
22
22
|
</div>
|
|
23
23
|
|
|
24
24
|
<template v-if="hasFooterData">
|
|
25
|
-
<div class="row mt-4">
|
|
25
|
+
<div class="row mt-4 flex-nowrap">
|
|
26
26
|
<template v-for="i in footerActionQuantity">
|
|
27
27
|
<skeleton-animate class="mr-2 mt-2" :key="i" :width="100" :height="30" />
|
|
28
28
|
</template>
|
|
29
29
|
</div>
|
|
30
30
|
|
|
31
|
-
<div class="row mt-4">
|
|
31
|
+
<div class="row mt-4 flex-nowrap">
|
|
32
32
|
<template v-for="i in footerTabsQuantity">
|
|
33
33
|
<skeleton-animate class="mr-2 mt-2" :key="i" :width="130" :height="65" />
|
|
34
34
|
</template>
|
|
@@ -36,9 +36,9 @@
|
|
|
36
36
|
</template>
|
|
37
37
|
</div>
|
|
38
38
|
|
|
39
|
-
<div class="col-4 d-flex justify-content-end align-items-start">
|
|
39
|
+
<div class="col-4 d-flex justify-content-end align-items-start footer__content">
|
|
40
40
|
<div v-for="i in buttonsQuantity" :key="i">
|
|
41
|
-
<skeleton-animate class="mr-2" :width="160" :height="42" img />
|
|
41
|
+
<skeleton-animate class="mr-2 skeleton-button" :width="160" :height="42" img />
|
|
42
42
|
</div>
|
|
43
43
|
</div>
|
|
44
44
|
</div>
|
|
@@ -88,10 +88,51 @@ export default {
|
|
|
88
88
|
|
|
89
89
|
<style lang="scss" scoped>
|
|
90
90
|
|
|
91
|
+
@media (max-width: 850px) {
|
|
92
|
+
.app__header {
|
|
93
|
+
.header__container {
|
|
94
|
+
width: 100%!important;
|
|
95
|
+
max-width: none!important;
|
|
96
|
+
}
|
|
97
|
+
.header__content {
|
|
98
|
+
width: 100%!important;
|
|
99
|
+
max-width: none!important;
|
|
100
|
+
flex-direction: column!important;
|
|
101
|
+
text-align: left!important;
|
|
102
|
+
align-items: flex-start!important;
|
|
103
|
+
justify-content: flex-start!important;
|
|
104
|
+
> .images {
|
|
105
|
+
margin: 0!important;
|
|
106
|
+
margin-top: 10px!important;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
@media (max-width: 600px) {
|
|
113
|
+
.app__header {
|
|
114
|
+
display: flex!important;
|
|
115
|
+
flex-direction: column!important;
|
|
116
|
+
.footer__content {
|
|
117
|
+
margin-top: 20px;
|
|
118
|
+
width: 100%!important;
|
|
119
|
+
max-width: none!important;
|
|
120
|
+
padding: 0 !important;
|
|
121
|
+
display: grid!important;
|
|
122
|
+
grid-template-columns: repeat(auto-fit, minmax(calc(100% / 2), 1fr));
|
|
123
|
+
justify-content: stretch!important;
|
|
124
|
+
.skeleton-button {
|
|
125
|
+
width: 100% !important;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
91
131
|
.app-header {
|
|
92
132
|
width: 100%;
|
|
93
133
|
padding: 40px 0;
|
|
94
134
|
box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15);
|
|
135
|
+
overflow: hidden;
|
|
95
136
|
}
|
|
96
137
|
|
|
97
138
|
.header__container {
|
|
@@ -1,146 +1,146 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div
|
|
3
|
-
class="skeleton skeleton--animate"
|
|
4
|
-
:class="[
|
|
5
|
-
{ 'rounded': rounded },
|
|
6
|
-
{ 'img': img }
|
|
7
|
-
]"
|
|
8
|
-
:style="`--skeleton-w: ${width < (windowWidth - 100) ? `${width}${percentageWidth ? '%' : 'px'}` : '100%'}; --skeleton-h: ${height}${percentageHeight ? '%' : 'px'};`"
|
|
9
|
-
></div>
|
|
10
|
-
</template>
|
|
11
|
-
|
|
12
|
-
<script>
|
|
13
|
-
export default {
|
|
14
|
-
name: 'skeleton-animate',
|
|
15
|
-
props: {
|
|
16
|
-
width: {
|
|
17
|
-
type: Number,
|
|
18
|
-
default: 200
|
|
19
|
-
},
|
|
20
|
-
height: {
|
|
21
|
-
type: Number,
|
|
22
|
-
default: 15
|
|
23
|
-
},
|
|
24
|
-
percentageWidth: {
|
|
25
|
-
type: Boolean,
|
|
26
|
-
default: false
|
|
27
|
-
},
|
|
28
|
-
percentageHeight: {
|
|
29
|
-
type: Boolean,
|
|
30
|
-
default: false
|
|
31
|
-
},
|
|
32
|
-
rounded: {
|
|
33
|
-
type: Boolean,
|
|
34
|
-
default: false
|
|
35
|
-
},
|
|
36
|
-
img: {
|
|
37
|
-
type: Boolean,
|
|
38
|
-
default: false
|
|
39
|
-
}
|
|
40
|
-
},
|
|
41
|
-
data() {
|
|
42
|
-
return {
|
|
43
|
-
windowWidth: 1000
|
|
44
|
-
};
|
|
45
|
-
},
|
|
46
|
-
methods: {
|
|
47
|
-
handleResize() {
|
|
48
|
-
this.windowWidth = window.innerWidth;
|
|
49
|
-
}
|
|
50
|
-
},
|
|
51
|
-
mounted() {
|
|
52
|
-
window.addEventListener('resize', this.handleResize);
|
|
53
|
-
this.handleResize();
|
|
54
|
-
},
|
|
55
|
-
beforeDestroy() {
|
|
56
|
-
window.removeEventListener('resize', this.handleResize);
|
|
57
|
-
}
|
|
58
|
-
};
|
|
59
|
-
</script>
|
|
60
|
-
|
|
61
|
-
<style lang="scss" scoped>
|
|
62
|
-
@keyframes placeholderSkeleton {
|
|
63
|
-
0% {
|
|
64
|
-
background-position: -468px 0;
|
|
65
|
-
}
|
|
66
|
-
100% {
|
|
67
|
-
background-position: 468px 0;
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
@keyframes skeletonAnimate {
|
|
72
|
-
from {
|
|
73
|
-
background-position: top left;
|
|
74
|
-
}
|
|
75
|
-
to {
|
|
76
|
-
background-position: top right;
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
@-webkit-keyframes placeholderSkeleton {
|
|
81
|
-
0% {
|
|
82
|
-
background-position: -468px 0;
|
|
83
|
-
}
|
|
84
|
-
100% {
|
|
85
|
-
background-position: 468px 0;
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
@-webkit-keyframes skeletonAnimate {
|
|
90
|
-
from {
|
|
91
|
-
background-position: top left;
|
|
92
|
-
}
|
|
93
|
-
to {
|
|
94
|
-
background-position: top right;
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
.skeleton {
|
|
99
|
-
width: var(--skeleton-w);
|
|
100
|
-
height: var(--skeleton-h);
|
|
101
|
-
border-radius: 2px;
|
|
102
|
-
&.rounded {
|
|
103
|
-
border-radius: 4px;
|
|
104
|
-
}
|
|
105
|
-
&.img {
|
|
106
|
-
border-radius: 1000px;
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
$skeletonBaseColor: #e0e3e6;
|
|
111
|
-
$skeletonBaseLineColor: #edeef1;
|
|
112
|
-
|
|
113
|
-
.skeleton--animate {
|
|
114
|
-
-webkit-animation-duration: 1s;
|
|
115
|
-
-webkit-animation-fill-mode: forwards;
|
|
116
|
-
-webkit-animation-iteration-count: infinite;
|
|
117
|
-
-webkit-animation-name: placeholderSkeleton;
|
|
118
|
-
-webkit-animation-timing-function: linear;
|
|
119
|
-
|
|
120
|
-
animation-duration: 1s;
|
|
121
|
-
animation-fill-mode: forwards;
|
|
122
|
-
animation-iteration-count: infinite;
|
|
123
|
-
animation-name: placeholderSkeleton;
|
|
124
|
-
animation-timing-function: linear;
|
|
125
|
-
|
|
126
|
-
background: $skeletonBaseColor;
|
|
127
|
-
background-image: -webkit-gradient(
|
|
128
|
-
linear,
|
|
129
|
-
left center,
|
|
130
|
-
right center,
|
|
131
|
-
from($skeletonBaseColor),
|
|
132
|
-
color-stop(0.2, $skeletonBaseLineColor),
|
|
133
|
-
color-stop(0.4, $skeletonBaseColor),
|
|
134
|
-
to($skeletonBaseColor)
|
|
135
|
-
);
|
|
136
|
-
background-image: -webkit-linear-gradient(
|
|
137
|
-
left,
|
|
138
|
-
$skeletonBaseColor 0%,
|
|
139
|
-
$skeletonBaseLineColor 20%,
|
|
140
|
-
$skeletonBaseColor 40%,
|
|
141
|
-
$skeletonBaseColor 100%
|
|
142
|
-
);
|
|
143
|
-
background-repeat: no-repeat;
|
|
144
|
-
background-size: 100% 100%;
|
|
145
|
-
}
|
|
146
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
class="skeleton skeleton--animate"
|
|
4
|
+
:class="[
|
|
5
|
+
{ 'rounded': rounded },
|
|
6
|
+
{ 'img': img }
|
|
7
|
+
]"
|
|
8
|
+
:style="`--skeleton-w: ${width < (windowWidth - 100) ? `${width}${percentageWidth ? '%' : 'px'}` : '100%'}; --skeleton-h: ${height}${percentageHeight ? '%' : 'px'};`"
|
|
9
|
+
></div>
|
|
10
|
+
</template>
|
|
11
|
+
|
|
12
|
+
<script>
|
|
13
|
+
export default {
|
|
14
|
+
name: 'skeleton-animate',
|
|
15
|
+
props: {
|
|
16
|
+
width: {
|
|
17
|
+
type: Number,
|
|
18
|
+
default: 200
|
|
19
|
+
},
|
|
20
|
+
height: {
|
|
21
|
+
type: Number,
|
|
22
|
+
default: 15
|
|
23
|
+
},
|
|
24
|
+
percentageWidth: {
|
|
25
|
+
type: Boolean,
|
|
26
|
+
default: false
|
|
27
|
+
},
|
|
28
|
+
percentageHeight: {
|
|
29
|
+
type: Boolean,
|
|
30
|
+
default: false
|
|
31
|
+
},
|
|
32
|
+
rounded: {
|
|
33
|
+
type: Boolean,
|
|
34
|
+
default: false
|
|
35
|
+
},
|
|
36
|
+
img: {
|
|
37
|
+
type: Boolean,
|
|
38
|
+
default: false
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
data() {
|
|
42
|
+
return {
|
|
43
|
+
windowWidth: 1000
|
|
44
|
+
};
|
|
45
|
+
},
|
|
46
|
+
methods: {
|
|
47
|
+
handleResize() {
|
|
48
|
+
this.windowWidth = window.innerWidth;
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
mounted() {
|
|
52
|
+
window.addEventListener('resize', this.handleResize);
|
|
53
|
+
this.handleResize();
|
|
54
|
+
},
|
|
55
|
+
beforeDestroy() {
|
|
56
|
+
window.removeEventListener('resize', this.handleResize);
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
</script>
|
|
60
|
+
|
|
61
|
+
<style lang="scss" scoped>
|
|
62
|
+
@keyframes placeholderSkeleton {
|
|
63
|
+
0% {
|
|
64
|
+
background-position: -468px 0;
|
|
65
|
+
}
|
|
66
|
+
100% {
|
|
67
|
+
background-position: 468px 0;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
@keyframes skeletonAnimate {
|
|
72
|
+
from {
|
|
73
|
+
background-position: top left;
|
|
74
|
+
}
|
|
75
|
+
to {
|
|
76
|
+
background-position: top right;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
@-webkit-keyframes placeholderSkeleton {
|
|
81
|
+
0% {
|
|
82
|
+
background-position: -468px 0;
|
|
83
|
+
}
|
|
84
|
+
100% {
|
|
85
|
+
background-position: 468px 0;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
@-webkit-keyframes skeletonAnimate {
|
|
90
|
+
from {
|
|
91
|
+
background-position: top left;
|
|
92
|
+
}
|
|
93
|
+
to {
|
|
94
|
+
background-position: top right;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.skeleton {
|
|
99
|
+
width: var(--skeleton-w);
|
|
100
|
+
height: var(--skeleton-h);
|
|
101
|
+
border-radius: 2px;
|
|
102
|
+
&.rounded {
|
|
103
|
+
border-radius: 4px;
|
|
104
|
+
}
|
|
105
|
+
&.img {
|
|
106
|
+
border-radius: 1000px;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
$skeletonBaseColor: #e0e3e6;
|
|
111
|
+
$skeletonBaseLineColor: #edeef1;
|
|
112
|
+
|
|
113
|
+
.skeleton--animate {
|
|
114
|
+
-webkit-animation-duration: 1s;
|
|
115
|
+
-webkit-animation-fill-mode: forwards;
|
|
116
|
+
-webkit-animation-iteration-count: infinite;
|
|
117
|
+
-webkit-animation-name: placeholderSkeleton;
|
|
118
|
+
-webkit-animation-timing-function: linear;
|
|
119
|
+
|
|
120
|
+
animation-duration: 1s;
|
|
121
|
+
animation-fill-mode: forwards;
|
|
122
|
+
animation-iteration-count: infinite;
|
|
123
|
+
animation-name: placeholderSkeleton;
|
|
124
|
+
animation-timing-function: linear;
|
|
125
|
+
|
|
126
|
+
background: $skeletonBaseColor;
|
|
127
|
+
background-image: -webkit-gradient(
|
|
128
|
+
linear,
|
|
129
|
+
left center,
|
|
130
|
+
right center,
|
|
131
|
+
from($skeletonBaseColor),
|
|
132
|
+
color-stop(0.2, $skeletonBaseLineColor),
|
|
133
|
+
color-stop(0.4, $skeletonBaseColor),
|
|
134
|
+
to($skeletonBaseColor)
|
|
135
|
+
);
|
|
136
|
+
background-image: -webkit-linear-gradient(
|
|
137
|
+
left,
|
|
138
|
+
$skeletonBaseColor 0%,
|
|
139
|
+
$skeletonBaseLineColor 20%,
|
|
140
|
+
$skeletonBaseColor 40%,
|
|
141
|
+
$skeletonBaseColor 100%
|
|
142
|
+
);
|
|
143
|
+
background-repeat: no-repeat;
|
|
144
|
+
background-size: 100% 100%;
|
|
145
|
+
}
|
|
146
|
+
</style>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="py-3">
|
|
3
|
+
<img
|
|
4
|
+
src="~/static/img/empty-state-charts.svg"
|
|
5
|
+
class="chart__body-img"
|
|
6
|
+
alt="Imagem de nenhuma data encontrada."
|
|
7
|
+
draggable="false"
|
|
8
|
+
/>
|
|
9
|
+
<span class="chart__body-text mt-3">Não há {{item}} para mostrar neste {{period}}.</span>
|
|
10
|
+
</div>
|
|
11
|
+
</template>
|
|
12
|
+
<script>
|
|
13
|
+
export default {
|
|
14
|
+
props: {
|
|
15
|
+
item: {
|
|
16
|
+
type: String,
|
|
17
|
+
default: 'conteúdo'
|
|
18
|
+
},
|
|
19
|
+
period:{
|
|
20
|
+
type: String,
|
|
21
|
+
default: 'período'
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
</script>
|
|
26
|
+
<style lang="scss" scoped>
|
|
27
|
+
.chart__body-img {
|
|
28
|
+
width: 200px;
|
|
29
|
+
display: block;
|
|
30
|
+
margin-left: auto;
|
|
31
|
+
margin-right: auto;
|
|
32
|
+
}
|
|
33
|
+
.chart__body-text {
|
|
34
|
+
display: flex;
|
|
35
|
+
align-items: center;
|
|
36
|
+
justify-content: center;
|
|
37
|
+
font-size: 14px;
|
|
38
|
+
}
|
|
39
|
+
</style>
|
package/package.json
CHANGED
|
@@ -9,11 +9,13 @@ import VeeValidate from 'vee-validate';
|
|
|
9
9
|
import SideBar from '~/components/argon-core/SidebarPlugin';
|
|
10
10
|
import Vue from 'vue';
|
|
11
11
|
// element ui language configuration
|
|
12
|
-
import lang from 'element-ui/lib/locale/lang/
|
|
12
|
+
import lang from 'element-ui/lib/locale/lang/pt-br';
|
|
13
13
|
import locale from 'element-ui/lib/locale';
|
|
14
|
+
|
|
15
|
+
locale.use(lang);
|
|
16
|
+
|
|
14
17
|
import './globalDirectives';
|
|
15
18
|
import './globalComponents';
|
|
16
|
-
locale.use(lang);
|
|
17
19
|
|
|
18
20
|
Vue.use(SideBar);
|
|
19
21
|
Vue.use(Notifications);
|
|
@@ -16,14 +16,8 @@ import RouteBreadcrumb from '~/components/argon-core/Breadcrumb/RouteBreadcrumb'
|
|
|
16
16
|
import StatsCard from '~/components/argon-core/Cards/StatsCard.vue';
|
|
17
17
|
import ImageWithFallback from '@/components/burh-ds/Img/ImageWithFallback.vue';
|
|
18
18
|
import { Input, Tooltip, Popover } from 'element-ui';
|
|
19
|
-
|
|
20
|
-
import lang from 'element-ui/lib/locale/lang/pt-br';
|
|
21
|
-
import locale from 'element-ui/lib/locale';
|
|
22
|
-
|
|
23
19
|
import Vue from 'vue';
|
|
24
20
|
|
|
25
|
-
locale.use(lang);
|
|
26
|
-
|
|
27
21
|
/**
|
|
28
22
|
* You can register global components here and use them as a plugin in your main Vue instance
|
|
29
23
|
*/
|