sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

columns updated

Browse Source
This commit is contained in:
woothu
2018-10-08 17:46:33 +02:00
parent f6dc8a37fa
commit b318110c7d
7 changed files with 220 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Widgets.vue
+108 -52
View File
@@ -1,96 +1,152 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
<b-row> <b-row>
<widget01 header="89.9%" variant="success"/> <b-col sm="6" lg="3">
<widget01 header="12.124" variant="info"/> <widget01 header="89.9%" variant="success"/>
<widget01 header="$98.111,00" variant="warning"/> </b-col>
<widget01 header="2 TB" variant="danger"/> <b-col sm="6" lg="3">
<widget01 header="12.124" variant="info"/>
</b-col>
<b-col sm="6" lg="3">
<widget01 header="$98.111,00" variant="warning"/>
</b-col>
<b-col sm="6" lg="3">
<widget01 header="2 TB" variant="danger"/>
</b-col>
</b-row><!--/.row--> </b-row><!--/.row-->
<b-row> <b-row>
<widget01 header="89.9%" variant="background-success"/> <b-col sm="6" lg="3">
<widget01 header="12.124" variant="background-info"/> <widget01 header="89.9%" variant="background-success"/>
<widget01 header="$98.111,00" variant="background-warning"/> </b-col>
<widget01 header="2 TB" variant="background-danger"/> <b-col sm="6" lg="3">
<widget01 header="12.124" variant="background-info"/>
</b-col>
<b-col sm="6" lg="3">
<widget01 header="$98.111,00" variant="background-warning"/>
</b-col>
<b-col sm="6" lg="3">
<widget01 header="2 TB" variant="background-danger"/>
</b-col>
</b-row><!--/.row--> </b-row><!--/.row-->
<b-row> <b-row>
<widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary"/> <b-col cols="12" sm="6" lg="3">
<widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info"/> <widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary"/>
<widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary"/> </b-col>
<widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger"/> <b-col cols="12" sm="6" lg="3">
<widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger"/>
</b-col>
</b-row><!--/.row--> </b-row><!--/.row-->
<b-row> <b-row>
<widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" :showLink="true"/> <b-col cols="12" sm="6" lg="3">
<widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" :showLink="true"/> <widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" :showLink="true"/>
<widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" :showLink="true"/> </b-col>
<widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" :showLink="true"/> <b-col cols="12" sm="6" lg="3">
<widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" :showLink="true"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" :showLink="true"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" :showLink="true"/>
</b-col>
</b-row><!--/.row--> </b-row><!--/.row-->
<b-row> <b-row>
<widget03 header="$1.999,50" iconClasses="fa fa-cogs bg-primary"/> <b-col cols="12" sm="6" lg="3">
<widget03 header="$1.999,50" iconClasses="fa fa-laptop bg-info"/> <widget03 header="$1.999,50" iconClasses="fa fa-cogs bg-primary"/>
<widget03 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary"/> </b-col>
<widget03 header="$1.999,50" iconClasses="fa fa-bell bg-danger"/> <b-col cols="12" sm="6" lg="3">
<widget03 header="$1.999,50" iconClasses="fa fa-laptop bg-info"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<widget03 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<widget03 header="$1.999,50" iconClasses="fa fa-bell bg-danger"/>
</b-col>
</b-row><!--/.row--> </b-row><!--/.row-->
<b-row> <b-row>
<widget03 header="$1.999,50" iconClasses="fa fa-cogs bg-primary px-5"/> <b-col cols="12" sm="6" lg="3">
<widget03 header="$1.999,50" iconClasses="fa fa-laptop bg-info px-5"/> <widget03 header="$1.999,50" iconClasses="fa fa-cogs bg-primary px-5"/>
<widget03 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/> </b-col>
<widget03 header="$1.999,50" iconClasses="fa fa-bell bg-danger px-5"/> <b-col cols="12" sm="6" lg="3">
<widget03 header="$1.999,50" iconClasses="fa fa-laptop bg-info px-5"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<widget03 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<widget03 header="$1.999,50" iconClasses="fa fa-bell bg-danger px-5"/>
</b-col>
</b-row><!--/.row--> </b-row><!--/.row-->
<b-row> <b-row>
<social-media-widget type="facebook" :dataPoints="[65, 59, 84, 84, 51, 55, 40]" <b-col md="3" sm="6">
rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/> <widget04 type="facebook" :dataPoints="[65, 59, 84, 84, 51, 55, 40]"
<social-media-widget type="twitter" :dataPoints="[1, 13, 9, 17, 34, 41, 38]" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/>
rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/> </b-col>
<social-media-widget type="linkedin" :dataPoints="[78, 81, 80, 45, 34, 12, 40]" <b-col md="3" sm="6">
rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/> <widget04 type="twitter" :dataPoints="[1, 13, 9, 17, 34, 41, 38]"
<social-media-widget type="google-plus" :dataPoints="[35, 23, 56, 22, 97, 23, 64]" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/>
rightHeader="894" rightFooter="followers" leftHeader="92" leftFooter="circles"/> </b-col>
<b-col md="3" sm="6">
<widget04 type="linkedin" :dataPoints="[78, 81, 80, 45, 34, 12, 40]"
rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/>
</b-col>
<b-col md="3" sm="6">
<widget04 type="google-plus" :dataPoints="[35, 23, 56, 22, 97, 23, 64]"
rightHeader="894" rightFooter="followers" leftHeader="92" leftFooter="circles"/>
</b-col>
</b-row><!--/.row--> </b-row><!--/.row-->
<b-card-group class="mb-4"> <b-card-group class="mb-4">
<widget04 iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/> <widget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
<widget04 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/> <widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
<widget04 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/> <widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
<widget04 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/> <widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
<widget04 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/> <widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
</b-card-group> </b-card-group>
<b-row> <b-row>
<b-col sm="6" md="2"> <b-col sm="6" md="2">
<widget04 iconClasses="icon-people" header="87.500" text="visitors" variant="info"/> <widget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info"/>
</b-col> </b-col>
<b-col sm="6" md="2"> <b-col sm="6" md="2">
<widget04 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/> <widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
</b-col> </b-col>
<b-col sm="6" md="2"> <b-col sm="6" md="2">
<widget04 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/> <widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
</b-col> </b-col>
<b-col sm="6" md="2"> <b-col sm="6" md="2">
<widget04 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/> <widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
</b-col> </b-col>
<b-col sm="6" md="2"> <b-col sm="6" md="2">
<widget04 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/> <widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
</b-col> </b-col>
<b-col sm="6" md="2"> <b-col sm="6" md="2">
<widget04 iconClasses="icon-speech" header="972" text="Comments" variant="info"/> <widget05 iconClasses="icon-speech" header="972" text="Comments" variant="info"/>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col sm="6" md="2"> <b-col sm="6" md="2">
<widget04 iconClasses="icon-people" header="87.500" text="visitors" variant="background-info"/> <widget05 iconClasses="icon-people" header="87.500" text="visitors" variant="background-info"/>
</b-col> </b-col>
<b-col sm="6" md="2"> <b-col sm="6" md="2">
<widget04 iconClasses="icon-user-follow" header="385" text="New Clients" variant="background-success"/> <widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="background-success"/>
</b-col> </b-col>
<b-col sm="6" md="2"> <b-col sm="6" md="2">
<widget04 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="background-warning"/> <widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="background-warning"/>
</b-col> </b-col>
<b-col sm="6" md="2"> <b-col sm="6" md="2">
<widget04 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors" variant="background-primary"/> <widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors" variant="background-primary"/>
</b-col> </b-col>
<b-col sm="6" md="2"> <b-col sm="6" md="2">
<widget04 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="background-danger"/> <widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="background-danger"/>
</b-col> </b-col>
<b-col sm="6" md="2"> <b-col sm="6" md="2">
<widget04 iconClasses="icon-speech" header="972" text="Comments" variant="background-info"/> <widget05 iconClasses="icon-speech" header="972" text="Comments" variant="background-info"/>
</b-col> </b-col>
</b-row> </b-row>
</div> </div>
@@ -100,8 +156,8 @@
import Widget01 from './widgets/Widget01' import Widget01 from './widgets/Widget01'
import Widget02 from './widgets/Widget02' import Widget02 from './widgets/Widget02'
import Widget03 from './widgets/Widget03' import Widget03 from './widgets/Widget03'
import SocialMediaWidget from './widgets/SocialMediaWidget'
import Widget04 from './widgets/Widget04' import Widget04 from './widgets/Widget04'
import Widget05 from './widgets/Widget05'
export default { export default {
name: 'widgets', name: 'widgets',
@@ -109,8 +165,8 @@ export default {
Widget01, Widget01,
Widget02, Widget02,
Widget03, Widget03,
SocialMediaWidget, Widget04,
Widget04 Widget05
}, },
data () { data () {
return { return {
src/views/widgets/SocialMediaWidget.vue
-60
View File
@@ -1,60 +0,0 @@
<template>
<b-col md="3" sm="6">
<div class="brand-card">
<div :class="'bg-' + type" class="brand-card-header bg-facebook">
<i class="fa" :class="'fa-'+ type"></i>
<div class="chart-wrapper">
<social-box-chart-example :data="dataPoints" />
</div>
</div>
<div class="brand-card-body">
<div>
<div class="text-value">{{rightHeader}}</div>
<div class="text-uppercase text-muted small">{{rightFooter}}</div>
</div>
<div>
<div class="text-value">{{leftHeader}}</div>
<div class="text-uppercase text-muted small">{{leftFooter}}</div>
</div>
</div>
</div>
</b-col>
</template>
<script>
import SocialBoxChartExample from './../dashboard/SocialBoxChartExample'
export default {
name: 'SocialMediaWidget',
components: {
SocialBoxChartExample
},
props: {
type: {
type: String,
default: 'facebook'
},
dataPoints: {
type: Array,
default: [65, 59, 84, 84, 51, 55, 40]
},
rightHeader: {
type: String,
default: '89k'
},
rightFooter: {
type: String,
default: 'friends'
},
leftHeader: {
type: String,
default: '459'
},
leftFooter: {
type: String,
default: 'feeds'
},
}
}
</script>
src/views/widgets/Widget01.vue
+7 -9
View File
@@ -1,13 +1,11 @@
<template> <template>
<b-col sm="6" lg="3"> <b-card :class="styleClasses">
<b-card :class="styleClasses"> <div class="h4 m-0">{{header}}</div>
<div class="h4 m-0">{{header}}</div> <div>{{text}}</div>
<div>{{text}}</div> <b-progress height={} :variant="variant" :value="value"
<b-progress height={} :variant="variant" :value="value" :class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
:class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/> <small class="text-muted">{{footer}}</small>
<small class="text-muted">{{footer}}</small> </b-card>
</b-card>
</b-col>
</template> </template>
<script> <script>
src/views/widgets/Widget02.vue
+10 -12
View File
@@ -1,16 +1,14 @@
<template> <template>
<b-col cols="12" sm="6" lg="3"> <b-card :no-body="true" footer-class="px-3 py-2">
<b-card :no-body="true" footer-class="px-3 py-2"> <b-card-body class="p-3 clearfix">
<b-card-body class="p-3 clearfix"> <i :class="iconClasses" class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
<i :class="iconClasses" class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i> <div class="h5 text-primary mb-0 mt-2">{{header}}</div>
<div class="h5 text-primary mb-0 mt-2">{{header}}</div> <div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div> </b-card-body>
</b-card-body> <div slot="footer" v-if="showLink">
<div slot="footer" v-if="showLink"> <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>
<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> </div>
</div> </b-card>
</b-card>
</b-col>
</template> </template>
<script> <script>
src/views/widgets/Widget03.vue
+7 -9
View File
@@ -1,13 +1,11 @@
<template> <template>
<b-col cols="12" sm="6" lg="3"> <b-card :no-body="true">
<b-card :no-body="true"> <b-card-body class="p-0 clearfix">
<b-card-body class="p-0 clearfix"> <i :class="iconClasses" class="p-4 font-2xl mr-3 float-left"></i>
<i :class="iconClasses" class="p-4 font-2xl mr-3 float-left"></i> <div class="h5 text-primary mb-0 pt-3">{{header}}</div>
<div class="h5 text-primary mb-0 pt-3">{{header}}</div> <div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div>
<div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div> </b-card-body>
</b-card-body> </b-card>
</b-card>
</b-col>
</template> </template>
<script> <script>
src/views/widgets/Widget04.vue
+37 -30
View File
@@ -1,50 +1,57 @@
<template> <template>
<b-card :class="styleClasses"> <div class="brand-card">
<div class="h1 text-muted text-right mb-4"> <div :class="'bg-' + type" class="brand-card-header bg-facebook">
<i :class="iconClasses"></i> <i class="fa" :class="'fa-'+ type"></i>
<div class="chart-wrapper">
<social-box-chart-example :data="dataPoints" />
</div> </div>
<div class="h4 mb-0">{{header}}</div> </div>
<small class="text-muted text-uppercase font-weight-bold">{{text}}</small> <div class="brand-card-body">
<b-progress height={} :variant="variant" :value="value" <div>
:class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/> <div class="text-value">{{rightHeader}}</div>
</b-card> <div class="text-uppercase text-muted small">{{rightFooter}}</div>
</div>
<div>
<div class="text-value">{{leftHeader}}</div>
<div class="text-uppercase text-muted small">{{leftFooter}}</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
import SocialBoxChartExample from './../dashboard/SocialBoxChartExample'
export default { export default {
name: 'Widget04', name: 'Widget04',
data () { components: {
return{ SocialBoxChartExample
backgroundColor: '',
styleClasses: '',
}
},
created () {
if(this.variant.includes('background')){
this.backgroundColor = this.variant.replace('background-','');
this.styleClasses = 'text-white bg-' + this.backgroundColor
}
}, },
props: { props: {
iconClasses: { type: {
type: String, type: String,
default: 'icon-people' default: 'facebook'
}, },
header: { dataPoints: {
type: Array,
default: [65, 59, 84, 84, 51, 55, 40]
},
rightHeader: {
type: String, type: String,
default: 'Lorem ipsum...' default: '89k'
}, },
text: { rightFooter: {
type: String, type: String,
default: 'Lorem ipsum...' default: 'friends'
}, },
variant: { leftHeader: {
type: String, type: String,
default: '' default: '459'
}, },
value: { leftFooter: {
type: Number, type: String,
default: 25 default: 'feeds'
}, },
} }
} }
src/views/widgets/Widget05.vue
+51
View File
@@ -0,0 +1,51 @@
<template>
<b-card :class="styleClasses">
<div class="h1 text-muted text-right mb-4">
<i :class="iconClasses"></i>
</div>
<div class="h4 mb-0">{{header}}</div>
<small class="text-muted text-uppercase font-weight-bold">{{text}}</small>
<b-progress height={} :variant="variant" :value="value"
:class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
</b-card>
</template>
<script>
export default {
name: 'Widget05',
data () {
return{
backgroundColor: '',
styleClasses: '',
}
},
created () {
if(this.variant.includes('background')){
this.backgroundColor = this.variant.replace('background-','');
this.styleClasses = 'text-white bg-' + this.backgroundColor
}
},
props: {
iconClasses: {
type: String,
default: 'icon-people'
},
header: {
type: String,
default: 'Lorem ipsum...'
},
text: {
type: String,
default: 'Lorem ipsum...'
},
variant: {
type: String,
default: ''
},
value: {
type: Number,
default: 25
},
}
}
</script>