minor changes

This commit is contained in:
xidedix
2017-08-31 15:09:00 +02:00
parent 1e0317fae9
commit bbd473f0d4
13 changed files with 141 additions and 12747 deletions
+12 -3
View File
@@ -11,7 +11,12 @@ export default {
},
{
title: true,
name: 'UI elements'
name: 'UI elements',
class: '',
wrapper: {
element: '',
attributes: {}
}
},
{
name: 'Components',
@@ -63,7 +68,11 @@ export default {
{
name: 'Font Awesome',
url: '/icons/font-awesome',
icon: 'icon-star'
icon: 'icon-star',
badge: {
variant: 'secondary',
text: '4.7'
}
},
{
name: 'Simple Line Icons',
@@ -77,7 +86,7 @@ export default {
url: '/widgets',
icon: 'icon-calculator',
badge: {
variant: 'danger',
variant: 'primary',
text: 'NEW'
}
},
+1 -1
View File
@@ -5,7 +5,7 @@
<ul class="nav">
<li class="nav-item" v-for="(item, index) in navItems">
<template v-if="item.title">
<SidebarNavTitle :name="item.name"/>
<SidebarNavTitle :name="item.name" :classes="item.class" :wrapper="item.wrapper"/>
</template>
<template v-else-if="item.divider">
<li class="divider"></li>
@@ -1,6 +1,13 @@
<template>
<li class="nav-title">
{{name}}
<li class="nav-title" v-bind:class="classes">
<template v-if="wrapper && wrapper.element">
<component v-bind:is="wrapper.element" v-bind="wrapper.attributes">
{{name}}
</component>
</template>
<template v-else>
{{name}}
</template>
</li>
</template>
@@ -10,6 +17,14 @@ export default {
name: {
type: String,
default: ''
},
classes: {
type: String,
default: ''
},
wrapper: {
type: Object,
default: () => {}
}
}
}
+22 -2
View File
@@ -207,12 +207,18 @@
<Callout variant="info">
<small class="text-muted">New Clients</small><br>
<strong class="h4">9,123</strong>
<div class="chart-wrapper" style="width:60%">
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />
</div>
</Callout>
</div><!--/.col-->
<div class="col-sm-6">
<Callout variant="danger">
<small class="text-muted">Recuring Clients</small><br>
<small class="text-muted">Recurring Clients</small><br>
<strong class="h4">22,643</strong>
<div class="chart-wrapper" style="width:60%">
<callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="#f86c6b" width="80" height="30" />
</div>
</Callout>
</div><!--/.col-->
</div><!--/.row-->
@@ -292,12 +298,18 @@
<Callout variant="warning">
<small class="text-muted">Pageviews</small><br>
<strong class="h4">78,623</strong>
<div class="chart-wrapper" style="width:60%">
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30" />
</div>
</Callout>
</div><!--/.col-->
<div class="col-sm-6">
<Callout variant="success">
<small class="text-muted">Organic</small><br>
<strong class="h4">49,123</strong>
<div class="chart-wrapper" style="width:60%">
<callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80px" height="30" />
</div>
</Callout>
</div><!--/.col-->
</div><!--/.row-->
@@ -363,12 +375,18 @@
<Callout>
<small class="text-muted">CTR</small><br>
<strong class="h4">23%</strong>
<div class="chart-wrapper" style="width:60%">
<callout-chart-example :data="[78, 81, 80, 45, 34, 12, 40]" width="80px" height="30" />
</div>
</Callout>
</div><!--/.col-->
<div class="col-sm-6">
<Callout variant="primary">
<small class="text-muted">Bounce Rate</small><br>
<strong class="h4">5%</strong>
<div class="chart-wrapper" style="width:60%">
<callout-chart-example :data="[1, 13, 9, 17, 34, 41, 38]" variant="#20a8d8" width="80px" height="30" />
</div>
</Callout>
</div><!--/.col-->
</div><!--/.row-->
@@ -534,6 +552,7 @@ import CardLine3ChartExample from './dashboard/CardLine3ChartExample'
import CardBarChartExample from './dashboard/CardBarChartExample'
import MainChartExample from './dashboard/MainChartExample'
import SocialBoxChartExample from './dashboard/SocialBoxChartExample'
import CalloutChartExample from './dashboard/CalloutChartExample'
import { Callout } from '../components/'
export default {
@@ -545,7 +564,8 @@ export default {
CardLine3ChartExample,
CardBarChartExample,
MainChartExample,
SocialBoxChartExample
SocialBoxChartExample,
CalloutChartExample
},
data: function () {
return {
@@ -0,0 +1,50 @@
<script>
import { Line } from 'vue-chartjs'
// const brandPrimary = '#20a8d8'
// const brandSuccess = '#4dbd74'
// const brandInfo = '#63c2de'
// const brandWarning = '#f8cb00'
// const brandDanger = '#f86c6b'
export default Line.extend({
props: ['data', 'height', 'width', 'variant'],
mounted () {
this.renderChart({
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
datasets: [
{
backgroundColor: 'transparent',
borderColor: this.variant ? this.variant : '#c2cfd6',
data: this.data
}
]
}, {
responsive: true,
maintainAspectRatio: true,
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false
}]
},
elements: {
line: {
borderWidth: 2
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
hoverBorderWidth: 3
}
},
legend: {
display: false
}
})
}
})
</script>
@@ -2155,7 +2155,7 @@
<div class="row text-center">
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-circle-o-notch fa-lg mt-4"></i><br>circle-o-notch
<i class="fa fa-circle-o-notch fa-lg mt-4 fa-spin"></i><br>circle-o-notch
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">