- 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:
Łukasz Holeczek
2017-10-22 19:22:38 +02:00
parent f244f02585
commit 923dc4ac3c
157 changed files with 2398 additions and 1832 deletions
@@ -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
}
}
}
}
+4 -4
View File
@@ -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="">
+1 -1
View File
@@ -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>
+1 -1
View File
@@ -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>