- update: Bootstrap version to v4.0.0-beta.2
- update: vue-chartjs version to 3.0.0 - refactor: Remove old SCSS variables - refactor: Breadcrumb Menu styles - fix: External links issue - fix: Mobile sidebar-nav height issue
This commit is contained in:
@@ -2,18 +2,17 @@
|
||||
<b-nav-item-dropdown right no-caret>
|
||||
<template slot="button-content">
|
||||
<img src="static/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<span class="d-md-down-none">admin</span>
|
||||
</template>
|
||||
<b-dropdown-header tag="div" class="text-center"><strong>Account</strong></b-dropdown-header>
|
||||
<b-dropdown-item><i class="fa fa-bell-o"></i> Updates<b-badge variant="info">42</b-badge></b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-envelope-o"></i> Messages<b-badge variant="success">42</b-badge></b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-tasks"></i> Tasks<b-badge variant="danger">42</b-badge></b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-comments"></i> Comments<b-badge variant="warning">42</b-badge></b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-bell-o"></i> Updates<b-badge variant="info">{{itemsCount}}</b-badge></b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-envelope-o"></i> Messages<b-badge variant="success">{{itemsCount}}</b-badge></b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-tasks"></i> Tasks<b-badge variant="danger">{{itemsCount}}</b-badge></b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-comments"></i> Comments<b-badge variant="warning">{{itemsCount}}</b-badge></b-dropdown-item>
|
||||
<b-dropdown-header tag="div" class="text-center"><strong>Settings</strong></b-dropdown-header>
|
||||
<b-dropdown-item><i class="fa fa-user"></i> Profile</b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-wrench"></i> Settings</b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-usd"></i> Payments<b-badge variant="default">42</b-badge></b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-file"></i> Projects<b-badge variant="primary">42</b-badge></b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-usd"></i> Payments<b-badge variant="default">{{itemsCount}}</b-badge></b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-file"></i> Projects<b-badge variant="primary">{{itemsCount}}</b-badge></b-dropdown-item>
|
||||
<b-dropdown-divider></b-dropdown-divider>
|
||||
<b-dropdown-item><i class="fa fa-shield"></i> Lock Account</b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-lock"></i> Logout</b-dropdown-item>
|
||||
@@ -21,6 +20,10 @@
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'header-dropdown'
|
||||
name: 'header-dropdown',
|
||||
data: () => {
|
||||
return { itemsCount: 42 }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div v-if="linkExternal">
|
||||
<div v-if="isExternalLink">
|
||||
<a :href="url" :class="classList">
|
||||
<i :class="icon"></i> {{name}}
|
||||
<b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
|
||||
@@ -14,8 +14,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import isExternal from 'is-url-external'
|
||||
|
||||
export default {
|
||||
name: 'sidebar-nav-link',
|
||||
props: {
|
||||
@@ -50,8 +48,12 @@
|
||||
linkVariant () {
|
||||
return this.variant ? `nav-link-${this.variant}` : ''
|
||||
},
|
||||
linkExternal () {
|
||||
return isExternal(this.url)
|
||||
isExternalLink () {
|
||||
if (this.url.substring(0, 4) === 'http') {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,9 +22,9 @@
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<b-card class="bg-info" :no-body="true">
|
||||
<div class="card-body pb-0">
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right no-caret>
|
||||
<template slot="button-content">
|
||||
<i class="icon-settings"></i>
|
||||
<i class="icon-location-pin"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
@@ -497,10 +497,10 @@
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<br/>
|
||||
<b-table class="table-outline mb-0" hover responsive outline
|
||||
<b-table class="table-outline table-responsive-sm b-0" hover
|
||||
:items="tableItems"
|
||||
:fields="tableFields"
|
||||
head-variant="default"
|
||||
head-variant="light"
|
||||
>
|
||||
<div slot="avatar" class="avatar" slot-scope="item">
|
||||
<img :src="item.value.url" class="img-avatar" alt="">
|
||||
|
||||
@@ -290,7 +290,7 @@
|
||||
</div><!--/social-box-->
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="card-group">
|
||||
<div class="card-group mb-4">
|
||||
<b-card>
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-people"></i>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<script>
|
||||
import { Bar } from 'vue-chartjs'
|
||||
|
||||
export default Bar.extend({
|
||||
export default {
|
||||
extends: Bar,
|
||||
mounted () {
|
||||
// Overwriting base render method with actual data.
|
||||
this.renderChart({
|
||||
@@ -15,5 +16,5 @@ export default Bar.extend({
|
||||
]
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<script>
|
||||
import { Doughnut } from 'vue-chartjs'
|
||||
|
||||
export default Doughnut.extend({
|
||||
export default {
|
||||
extends: Doughnut,
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
|
||||
@@ -18,5 +19,5 @@ export default Doughnut.extend({
|
||||
]
|
||||
}, {responsive: true, maintainAspectRatio: false})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<script>
|
||||
import { Line } from 'vue-chartjs'
|
||||
|
||||
export default Line.extend({
|
||||
export default {
|
||||
extends: Line,
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
@@ -14,5 +15,5 @@ export default Line.extend({
|
||||
]
|
||||
}, {responsive: true, maintainAspectRatio: false})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<script>
|
||||
import { Pie } from 'vue-chartjs'
|
||||
|
||||
export default Pie.extend({
|
||||
export default {
|
||||
extends: Pie,
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
|
||||
@@ -18,5 +19,5 @@ export default Pie.extend({
|
||||
]
|
||||
}, {responsive: true, maintainAspectRatio: false})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<script>
|
||||
import { PolarArea } from 'vue-chartjs'
|
||||
|
||||
export default PolarArea.extend({
|
||||
export default {
|
||||
extends: PolarArea,
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
|
||||
@@ -27,5 +28,5 @@ export default PolarArea.extend({
|
||||
]
|
||||
}, {responsive: true, maintainAspectRatio: false})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<script>
|
||||
import { Radar } from 'vue-chartjs'
|
||||
|
||||
export default Radar.extend({
|
||||
export default {
|
||||
extends: Radar,
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
|
||||
@@ -29,5 +30,5 @@ export default Radar.extend({
|
||||
]
|
||||
}, {responsive: true, maintainAspectRatio: false})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -68,7 +68,19 @@
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Active state</strong> <small>Add this <code>:pressed="true"</code></small>
|
||||
<strong>Active state</strong> <small>Add this <code>:active="true"</code></small>
|
||||
</div>
|
||||
<b-button variant="primary" :active="true">Primary</b-button>
|
||||
<b-button variant="secondary" :active="true">Secondary</b-button>
|
||||
<b-button variant="success" :active="true">Success</b-button>
|
||||
<b-button variant="info" :active="true">Info</b-button>
|
||||
<b-button variant="warning" :active="true">Warning</b-button>
|
||||
<b-button variant="danger" :active="true">Danger</b-button>
|
||||
<b-button variant="link" :active="true">Link</b-button>
|
||||
</b-card>
|
||||
<b-card header-tag="header">
|
||||
<div slot="header">
|
||||
<strong>Pressed state</strong> <small>Add this <code>:pressed="true"</code></small>
|
||||
</div>
|
||||
<b-button variant="primary" :pressed="true">Primary</b-button>
|
||||
<b-button variant="secondary" :pressed="true">Secondary</b-button>
|
||||
@@ -78,6 +90,18 @@
|
||||
<b-button variant="danger" :pressed="true">Danger</b-button>
|
||||
<b-button variant="link" :pressed="true">Link</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Toggle pressed state</strong>
|
||||
</div>
|
||||
<b-button variant="primary" :pressed.sync="myToggle">Primary {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="secondary" :pressed.sync="myToggle">Secondary {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="success" :pressed.sync="myToggle">Success {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="info" :pressed.sync="myToggle">Info {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="warning" :pressed.sync="myToggle">Warning {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="danger" :pressed.sync="myToggle">Danger {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
</b-card>
|
||||
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Block Level Buttons</strong> <small>Add this <code>:block="true"</code></small>
|
||||
@@ -130,7 +154,7 @@
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Size Small</strong> <small>Add this <code>size="sm"</code></small></small>
|
||||
<strong>Size Small</strong> <small>Add this <code>size="sm"</code></small>
|
||||
</div>
|
||||
<b-button size="sm" variant="outline-primary">Primary</b-button>
|
||||
<b-button size="sm" variant="outline-secondary">Secondary</b-button>
|
||||
@@ -152,7 +176,18 @@
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Active state</strong> <small>Add this <code>:pressed="true"</code></small>
|
||||
<strong>Active state</strong> <small>Add this <code>:active="true"</code></small>
|
||||
</div>
|
||||
<b-button variant="outline-primary" :active="true">Primary</b-button>
|
||||
<b-button variant="outline-secondary" :active="true">Secondary</b-button>
|
||||
<b-button variant="outline-success" :active="true">Success</b-button>
|
||||
<b-button variant="outline-info" :active="true">Info</b-button>
|
||||
<b-button variant="outline-warning" :active="true">Warning</b-button>
|
||||
<b-button variant="outline-danger" :active="true">Danger</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Pressed state</strong> <small>Add this <code>:pressed="true"</code></small>
|
||||
</div>
|
||||
<b-button variant="outline-primary" :pressed="true">Primary</b-button>
|
||||
<b-button variant="outline-secondary" :pressed="true">Secondary</b-button>
|
||||
@@ -161,6 +196,17 @@
|
||||
<b-button variant="outline-warning" :pressed="true">Warning</b-button>
|
||||
<b-button variant="outline-danger" :pressed="true">Danger</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Toggle pressed state</strong>
|
||||
</div>
|
||||
<b-button variant="outline-primary" :pressed.sync="myToggle">Primary {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="outline-secondary" :pressed.sync="myToggle">Secondary {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="outline-success" :pressed.sync="myToggle">Success {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="outline-info" :pressed.sync="myToggle">Info {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="outline-warning" :pressed.sync="myToggle">Warning {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="outline-danger" :pressed.sync="myToggle">Danger {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Block Level Buttons</strong> <small>Add this <code>:block="true"</code></small>
|
||||
@@ -179,6 +225,9 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'buttons'
|
||||
name: 'buttons',
|
||||
data: () => {
|
||||
return { myToggle: false }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -460,11 +460,11 @@
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label class="form-form-control-label" for="inputSuccess1">Input with success</label>
|
||||
<label class="form-col-form-label" for="inputSuccess1">Input with success</label>
|
||||
<input type="text" class="form-control is-valid" id="inputSuccess1">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-form-control-label" for="inputError1">Input with error</label>
|
||||
<label class="form-col-form-label" for="inputError1">Input with error</label>
|
||||
<input type="text" class="form-control is-invalid" id="inputError1">
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid informations.
|
||||
|
||||
@@ -7,7 +7,8 @@ import { Line } from 'vue-chartjs'
|
||||
// const brandWarning = '#f8cb00'
|
||||
// const brandDanger = '#f86c6b'
|
||||
|
||||
export default Line.extend({
|
||||
export default {
|
||||
extends: Line,
|
||||
props: ['data', 'height', 'width', 'variant'],
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
@@ -46,5 +47,5 @@ export default Line.extend({
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -10,7 +10,8 @@ const datasets = [
|
||||
}
|
||||
]
|
||||
|
||||
export default Bar.extend({
|
||||
export default {
|
||||
extends: Bar,
|
||||
props: ['height'],
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
@@ -33,5 +34,5 @@ export default Bar.extend({
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -11,7 +11,8 @@ const datasets = [
|
||||
}
|
||||
]
|
||||
|
||||
export default Line.extend({
|
||||
export default {
|
||||
extends: Line,
|
||||
props: ['height'],
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
@@ -54,5 +55,5 @@ export default Line.extend({
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -11,7 +11,8 @@ const datasets = [
|
||||
}
|
||||
]
|
||||
|
||||
export default Line.extend({
|
||||
export default {
|
||||
extends: Line,
|
||||
props: ['height'],
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
@@ -56,5 +57,5 @@ export default Line.extend({
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -10,7 +10,8 @@ const datasets = [
|
||||
}
|
||||
]
|
||||
|
||||
export default Line.extend({
|
||||
export default {
|
||||
extends: Line,
|
||||
props: ['height'],
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
@@ -41,5 +42,5 @@ export default Line.extend({
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -20,7 +20,8 @@ function random (min, max) {
|
||||
return Math.floor(Math.random() * (max - min + 1) + min)
|
||||
}
|
||||
|
||||
export default Line.extend({
|
||||
export default {
|
||||
extends: Line,
|
||||
props: ['height'],
|
||||
mounted () {
|
||||
var elements = 27
|
||||
@@ -95,5 +96,5 @@ export default Line.extend({
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<script>
|
||||
import { Line } from 'vue-chartjs'
|
||||
|
||||
export default Line.extend({
|
||||
export default {
|
||||
extends: Line,
|
||||
props: ['data', 'height'],
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
@@ -39,5 +40,5 @@ export default Line.extend({
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card-group mb-0">
|
||||
<div class="card-group">
|
||||
<div class="card p-4">
|
||||
<div class="card-body">
|
||||
<h1>Login</h1>
|
||||
|
||||
Reference in New Issue
Block a user