Skip to content

Commit b318110

Browse files
woothuwoothu
committed
columns updated
1 parent f6dc8a3 commit b318110

File tree

7 files changed

+220
-172
lines changed

7 files changed

+220
-172
lines changed

‎src/views/Widgets.vue‎

Lines changed: 108 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,152 @@
11
<template>
22
<div class="animated fadeIn">
33
<b-row>
4-
<widget01 header="89.9%" variant="success"/>
5-
<widget01 header="12.124" variant="info"/>
6-
<widget01 header="$98.111,00" variant="warning"/>
7-
<widget01 header="2 TB" variant="danger"/>
4+
<b-col sm="6" lg="3">
5+
<widget01 header="89.9%" variant="success"/>
6+
</b-col>
7+
<b-col sm="6" lg="3">
8+
<widget01 header="12.124" variant="info"/>
9+
</b-col>
10+
<b-col sm="6" lg="3">
11+
<widget01 header="$98.111,00" variant="warning"/>
12+
</b-col>
13+
<b-col sm="6" lg="3">
14+
<widget01 header="2 TB" variant="danger"/>
15+
</b-col>
816
</b-row><!--/.row-->
917
<b-row>
10-
<widget01 header="89.9%" variant="background-success"/>
11-
<widget01 header="12.124" variant="background-info"/>
12-
<widget01 header="$98.111,00" variant="background-warning"/>
13-
<widget01 header="2 TB" variant="background-danger"/>
18+
<b-col sm="6" lg="3">
19+
<widget01 header="89.9%" variant="background-success"/>
20+
</b-col>
21+
<b-col sm="6" lg="3">
22+
<widget01 header="12.124" variant="background-info"/>
23+
</b-col>
24+
<b-col sm="6" lg="3">
25+
<widget01 header="$98.111,00" variant="background-warning"/>
26+
</b-col>
27+
<b-col sm="6" lg="3">
28+
<widget01 header="2 TB" variant="background-danger"/>
29+
</b-col>
1430
</b-row><!--/.row-->
1531
<b-row>
16-
<widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary"/>
17-
<widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info"/>
18-
<widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
19-
<widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger"/>
32+
<b-col cols="12" sm="6" lg="3">
33+
<widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary"/>
34+
</b-col>
35+
<b-col cols="12" sm="6" lg="3">
36+
<widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info"/>
37+
</b-col>
38+
<b-col cols="12" sm="6" lg="3">
39+
<widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
40+
</b-col>
41+
<b-col cols="12" sm="6" lg="3">
42+
<widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger"/>
43+
</b-col>
2044
</b-row><!--/.row-->
2145
<b-row>
22-
<widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" :showLink="true"/>
23-
<widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" :showLink="true"/>
24-
<widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" :showLink="true"/>
25-
<widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" :showLink="true"/>
46+
<b-col cols="12" sm="6" lg="3">
47+
<widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" :showLink="true"/>
48+
</b-col>
49+
<b-col cols="12" sm="6" lg="3">
50+
<widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" :showLink="true"/>
51+
</b-col>
52+
<b-col cols="12" sm="6" lg="3">
53+
<widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" :showLink="true"/>
54+
</b-col>
55+
<b-col cols="12" sm="6" lg="3">
56+
<widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" :showLink="true"/>
57+
</b-col>
2658
</b-row><!--/.row-->
2759
<b-row>
28-
<widget03 header="$1.999,50" iconClasses="fa fa-cogs bg-primary"/>
29-
<widget03 header="$1.999,50" iconClasses="fa fa-laptop bg-info"/>
30-
<widget03 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
31-
<widget03 header="$1.999,50" iconClasses="fa fa-bell bg-danger"/>
60+
<b-col cols="12" sm="6" lg="3">
61+
<widget03 header="$1.999,50" iconClasses="fa fa-cogs bg-primary"/>
62+
</b-col>
63+
<b-col cols="12" sm="6" lg="3">
64+
<widget03 header="$1.999,50" iconClasses="fa fa-laptop bg-info"/>
65+
</b-col>
66+
<b-col cols="12" sm="6" lg="3">
67+
<widget03 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
68+
</b-col>
69+
<b-col cols="12" sm="6" lg="3">
70+
<widget03 header="$1.999,50" iconClasses="fa fa-bell bg-danger"/>
71+
</b-col>
3272
</b-row><!--/.row-->
3373
<b-row>
34-
<widget03 header="$1.999,50" iconClasses="fa fa-cogs bg-primary px-5"/>
35-
<widget03 header="$1.999,50" iconClasses="fa fa-laptop bg-info px-5"/>
36-
<widget03 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/>
37-
<widget03 header="$1.999,50" iconClasses="fa fa-bell bg-danger px-5"/>
74+
<b-col cols="12" sm="6" lg="3">
75+
<widget03 header="$1.999,50" iconClasses="fa fa-cogs bg-primary px-5"/>
76+
</b-col>
77+
<b-col cols="12" sm="6" lg="3">
78+
<widget03 header="$1.999,50" iconClasses="fa fa-laptop bg-info px-5"/>
79+
</b-col>
80+
<b-col cols="12" sm="6" lg="3">
81+
<widget03 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/>
82+
</b-col>
83+
<b-col cols="12" sm="6" lg="3">
84+
<widget03 header="$1.999,50" iconClasses="fa fa-bell bg-danger px-5"/>
85+
</b-col>
3886
</b-row><!--/.row-->
3987
<b-row>
40-
<social-media-widget type="facebook" :dataPoints="[65, 59, 84, 84, 51, 55, 40]"
41-
rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/>
42-
<social-media-widget type="twitter" :dataPoints="[1, 13, 9, 17, 34, 41, 38]"
43-
rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/>
44-
<social-media-widget type="linkedin" :dataPoints="[78, 81, 80, 45, 34, 12, 40]"
45-
rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/>
46-
<social-media-widget type="google-plus" :dataPoints="[35, 23, 56, 22, 97, 23, 64]"
47-
rightHeader="894" rightFooter="followers" leftHeader="92" leftFooter="circles"/>
88+
<b-col md="3" sm="6">
89+
<widget04 type="facebook" :dataPoints="[65, 59, 84, 84, 51, 55, 40]"
90+
rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/>
91+
</b-col>
92+
<b-col md="3" sm="6">
93+
<widget04 type="twitter" :dataPoints="[1, 13, 9, 17, 34, 41, 38]"
94+
rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/>
95+
</b-col>
96+
<b-col md="3" sm="6">
97+
<widget04 type="linkedin" :dataPoints="[78, 81, 80, 45, 34, 12, 40]"
98+
rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/>
99+
</b-col>
100+
<b-col md="3" sm="6">
101+
<widget04 type="google-plus" :dataPoints="[35, 23, 56, 22, 97, 23, 64]"
102+
rightHeader="894" rightFooter="followers" leftHeader="92" leftFooter="circles"/>
103+
</b-col>
48104
</b-row><!--/.row-->
49105
<b-card-group class="mb-4">
50-
<widget04 iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
51-
<widget04 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
52-
<widget04 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
53-
<widget04 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
54-
<widget04 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
106+
<widget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
107+
<widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
108+
<widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
109+
<widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
110+
<widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
55111
</b-card-group>
56112
<b-row>
57113
<b-col sm="6" md="2">
58-
<widget04 iconClasses="icon-people" header="87.500" text="visitors" variant="info"/>
114+
<widget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info"/>
59115
</b-col>
60116
<b-col sm="6" md="2">
61-
<widget04 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
117+
<widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
62118
</b-col>
63119
<b-col sm="6" md="2">
64-
<widget04 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
120+
<widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
65121
</b-col>
66122
<b-col sm="6" md="2">
67-
<widget04 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
123+
<widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
68124
</b-col>
69125
<b-col sm="6" md="2">
70-
<widget04 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
126+
<widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
71127
</b-col>
72128
<b-col sm="6" md="2">
73-
<widget04 iconClasses="icon-speech" header="972" text="Comments" variant="info"/>
129+
<widget05 iconClasses="icon-speech" header="972" text="Comments" variant="info"/>
74130
</b-col>
75131
</b-row>
76132
<b-row>
77133
<b-col sm="6" md="2">
78-
<widget04 iconClasses="icon-people" header="87.500" text="visitors" variant="background-info"/>
134+
<widget05 iconClasses="icon-people" header="87.500" text="visitors" variant="background-info"/>
79135
</b-col>
80136
<b-col sm="6" md="2">
81-
<widget04 iconClasses="icon-user-follow" header="385" text="New Clients" variant="background-success"/>
137+
<widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="background-success"/>
82138
</b-col>
83139
<b-col sm="6" md="2">
84-
<widget04 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="background-warning"/>
140+
<widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="background-warning"/>
85141
</b-col>
86142
<b-col sm="6" md="2">
87-
<widget04 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors" variant="background-primary"/>
143+
<widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors" variant="background-primary"/>
88144
</b-col>
89145
<b-col sm="6" md="2">
90-
<widget04 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="background-danger"/>
146+
<widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="background-danger"/>
91147
</b-col>
92148
<b-col sm="6" md="2">
93-
<widget04 iconClasses="icon-speech" header="972" text="Comments" variant="background-info"/>
149+
<widget05 iconClasses="icon-speech" header="972" text="Comments" variant="background-info"/>
94150
</b-col>
95151
</b-row>
96152
</div>
@@ -100,17 +156,17 @@
100156
import Widget01 from './widgets/Widget01'
101157
import Widget02 from './widgets/Widget02'
102158
import Widget03 from './widgets/Widget03'
103-
import SocialMediaWidget from './widgets/SocialMediaWidget'
104159
import Widget04 from './widgets/Widget04'
160+
import Widget05 from './widgets/Widget05'
105161
106162
export default {
107163
name: 'widgets',
108164
components: {
109165
Widget01,
110166
Widget02,
111167
Widget03,
112-
SocialMediaWidget,
113-
Widget04
168+
Widget04,
169+
Widget05
114170
},
115171
data () {
116172
return {

‎src/views/widgets/SocialMediaWidget.vue‎

Lines changed: 0 additions & 60 deletions
This file was deleted.

‎src/views/widgets/Widget01.vue‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
<template>
2-
<b-col sm="6" lg="3">
3-
<b-card :class="styleClasses">
4-
<div class="h4 m-0">{{header}}</div>
5-
<div>{{text}}</div>
6-
<b-progress height={} :variant="variant" :value="value"
7-
:class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
8-
<small class="text-muted">{{footer}}</small>
9-
</b-card>
10-
</b-col>
2+
<b-card :class="styleClasses">
3+
<div class="h4 m-0">{{header}}</div>
4+
<div>{{text}}</div>
5+
<b-progress height={} :variant="variant" :value="value"
6+
:class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
7+
<small class="text-muted">{{footer}}</small>
8+
</b-card>
119
</template>
1210

1311
<script>

‎src/views/widgets/Widget02.vue‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
<template>
2-
<b-col cols="12" sm="6" lg="3">
3-
<b-card :no-body="true" footer-class="px-3 py-2">
4-
<b-card-body class="p-3 clearfix">
5-
<i :class="iconClasses" class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
6-
<div class="h5 text-primary mb-0 mt-2">{{header}}</div>
7-
<div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div>
8-
</b-card-body>
9-
<div slot="footer" v-if="showLink">
10-
<b-link class="font-weight-bold font-xs btn-block text-muted" :href="link">View More <i class="fa fa-angle-right float-right font-lg"></i></b-link>
11-
</div>
12-
</b-card>
13-
</b-col>
2+
<b-card :no-body="true" footer-class="px-3 py-2">
3+
<b-card-body class="p-3 clearfix">
4+
<i :class="iconClasses" class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
5+
<div class="h5 text-primary mb-0 mt-2">{{header}}</div>
6+
<div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div>
7+
</b-card-body>
8+
<div slot="footer" v-if="showLink">
9+
<b-link class="font-weight-bold font-xs btn-block text-muted" :href="link">View More <i class="fa fa-angle-right float-right font-lg"></i></b-link>
10+
</div>
11+
</b-card>
1412
</template>
1513

1614
<script>

‎src/views/widgets/Widget03.vue‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
<template>
2-
<b-col cols="12" sm="6" lg="3">
3-
<b-card :no-body="true">
4-
<b-card-body class="p-0 clearfix">
5-
<i :class="iconClasses" class="p-4 font-2xl mr-3 float-left"></i>
6-
<div class="h5 text-primary mb-0 pt-3">{{header}}</div>
7-
<div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div>
8-
</b-card-body>
9-
</b-card>
10-
</b-col>
2+
<b-card :no-body="true">
3+
<b-card-body class="p-0 clearfix">
4+
<i :class="iconClasses" class="p-4 font-2xl mr-3 float-left"></i>
5+
<div class="h5 text-primary mb-0 pt-3">{{header}}</div>
6+
<div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div>
7+
</b-card-body>
8+
</b-card>
119
</template>
1210

1311
<script>

0 commit comments

Comments
 (0)