- Update Vue to 2.5.2
- Update Vue Router to 3.0.0 - Fix height and position problems with .fixed-footer - Fix mobile sidebar height - Fix mobile breadcrumb position with .fixed-breadcrumb - Add new navbar toggler icon - Update old bootstrap classes ex. `hidden-sm-down`
This commit is contained in:
Łukasz Holeczek
@@ -0,0 +1,8 @@
|
|||||||
|
## [vue](./README.md) version `changelog`
|
||||||
|
|
||||||
|
###### `v1.0.2`
|
||||||
|
- moved to vue: `^2.5.x`
|
||||||
|
- (vue `v2.5.x`) deprecated `<template scope="props">` replaced with `<div slot-scope="props">`
|
||||||
|
- `HeaderDropdown` component added to `Header`
|
||||||
|
- moved to component `b-badge` (bootstrap-vue)
|
||||||
|
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@coreui/vue",
|
"name": "@coreui/vue",
|
||||||
"version": "1.0.1",
|
"version": "1.0.2",
|
||||||
"description": "",
|
"description": "",
|
||||||
"author": "Łukasz Holeczek <lukasz@holeczek.pl>",
|
"author": "Łukasz Holeczek <lukasz@holeczek.pl>",
|
||||||
"private": true,
|
"private": true,
|
||||||
@@ -19,36 +19,36 @@
|
|||||||
"font-awesome": "^4.7.0",
|
"font-awesome": "^4.7.0",
|
||||||
"is-url-external": "^1.0.3",
|
"is-url-external": "^1.0.3",
|
||||||
"simple-line-icons": "^2.4.1",
|
"simple-line-icons": "^2.4.1",
|
||||||
"vue": "2.4.4",
|
"vue": "^2.5.2",
|
||||||
"vue-chartjs": "2.8.7",
|
"vue-chartjs": "2.8.7",
|
||||||
"vue-router": "2.7.0"
|
"vue-router": "^3.0.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"autoprefixer": "7.1.4",
|
"autoprefixer": "7.1.5",
|
||||||
"babel-core": "6.26.0",
|
"babel-core": "6.26.0",
|
||||||
"babel-eslint": "8.0.0",
|
"babel-eslint": "8.0.1",
|
||||||
"babel-loader": "7.1.2",
|
"babel-loader": "7.1.2",
|
||||||
"babel-plugin-transform-runtime": "^6.22.0",
|
"babel-plugin-transform-runtime": "^6.22.0",
|
||||||
"babel-preset-env": "1.6.0",
|
"babel-preset-env": "1.6.0",
|
||||||
"babel-preset-stage-2": "6.24.1",
|
"babel-preset-stage-2": "6.24.1",
|
||||||
"babel-register": "6.26.0",
|
"babel-register": "6.26.0",
|
||||||
"chalk": "2.1.0",
|
"chalk": "2.1.0",
|
||||||
"connect-history-api-fallback": "^1.3.0",
|
"connect-history-api-fallback": "^1.4.0",
|
||||||
"copy-webpack-plugin": "^4.0.1",
|
"copy-webpack-plugin": "^4.1.1",
|
||||||
"css-loader": "0.28.7",
|
"css-loader": "0.28.7",
|
||||||
"eslint": "4.7.2",
|
"eslint": "^4.9.0",
|
||||||
"eslint-friendly-formatter": "3.0.0",
|
"eslint-friendly-formatter": "3.0.0",
|
||||||
"eslint-loader": "1.9.0",
|
"eslint-loader": "1.9.0",
|
||||||
"eslint-plugin-html": "3.2.2",
|
"eslint-plugin-html": "3.2.2",
|
||||||
"eslint-plugin-import": "2.7.0",
|
"eslint-plugin-import": "2.7.0",
|
||||||
"eslint-plugin-node": "5.1.1",
|
"eslint-plugin-node": "5.2.0",
|
||||||
"eslint-config-standard": "10.2.1",
|
"eslint-config-standard": "10.2.1",
|
||||||
"eslint-plugin-promise": "3.5.0",
|
"eslint-plugin-promise": "^3.6.0",
|
||||||
"eslint-plugin-standard": "3.0.1",
|
"eslint-plugin-standard": "3.0.1",
|
||||||
"eventsource-polyfill": "^0.9.6",
|
"eventsource-polyfill": "^0.9.6",
|
||||||
"express": "4.15.5",
|
"express": "4.16.2",
|
||||||
"extract-text-webpack-plugin": "3.0.0",
|
"extract-text-webpack-plugin": "3.0.1",
|
||||||
"file-loader": "0.11.2",
|
"file-loader": "1.1.5",
|
||||||
"friendly-errors-webpack-plugin": "1.6.1",
|
"friendly-errors-webpack-plugin": "1.6.1",
|
||||||
"html-webpack-plugin": "2.30.1",
|
"html-webpack-plugin": "2.30.1",
|
||||||
"http-proxy-middleware": "0.17.4",
|
"http-proxy-middleware": "0.17.4",
|
||||||
@@ -62,32 +62,32 @@
|
|||||||
"karma-sinon-chai": "1.3.2",
|
"karma-sinon-chai": "1.3.2",
|
||||||
"karma-sourcemap-loader": "^0.3.7",
|
"karma-sourcemap-loader": "^0.3.7",
|
||||||
"karma-spec-reporter": "0.0.31",
|
"karma-spec-reporter": "0.0.31",
|
||||||
"karma-webpack": "2.0.4",
|
"karma-webpack": "^2.0.5",
|
||||||
"lolex": "2.1.2",
|
"lolex": "2.1.3",
|
||||||
"mocha": "3.5.3",
|
"mocha": "4.0.1",
|
||||||
"chai": "4.1.2",
|
"chai": "4.1.2",
|
||||||
"sinon": "3.3.0",
|
"sinon": "4.0.1",
|
||||||
"sinon-chai": "2.13.0",
|
"sinon-chai": "2.14.0",
|
||||||
"inject-loader": "3.0.1",
|
"inject-loader": "3.0.1",
|
||||||
"babel-plugin-istanbul": "4.1.5",
|
"babel-plugin-istanbul": "4.1.5",
|
||||||
"phantomjs-prebuilt": "^2.1.15",
|
"phantomjs-prebuilt": "^2.1.15",
|
||||||
"chromedriver": "2.32.3",
|
"chromedriver": "2.33.1",
|
||||||
"cross-spawn": "^5.0.1",
|
"cross-spawn": "^5.0.1",
|
||||||
"nightwatch": "0.9.16",
|
"nightwatch": "0.9.16",
|
||||||
"selenium-server": "3.5.3",
|
"selenium-server": "3.6.0",
|
||||||
"semver": "5.4.1",
|
"semver": "5.4.1",
|
||||||
"shelljs": "0.7.8",
|
"shelljs": "0.7.8",
|
||||||
"opn": "5.1.0",
|
"opn": "5.1.0",
|
||||||
"optimize-css-assets-webpack-plugin": "3.2.0",
|
"optimize-css-assets-webpack-plugin": "3.2.0",
|
||||||
"ora": "1.3.0",
|
"ora": "1.3.0",
|
||||||
"rimraf": "2.6.2",
|
"rimraf": "2.6.2",
|
||||||
"url-loader": "0.5.9",
|
"url-loader": "0.6.2",
|
||||||
"vue-loader": "13.0.5",
|
"vue-loader": "13.3.0",
|
||||||
"vue-style-loader": "3.0.3",
|
"vue-style-loader": "3.0.3",
|
||||||
"vue-template-compiler": "2.4.4",
|
"vue-template-compiler": "^2.5.2",
|
||||||
"webpack": "3.6.0",
|
"webpack": "^3.7.1",
|
||||||
"webpack-dev-middleware": "1.12.0",
|
"webpack-dev-middleware": "^1.12.0",
|
||||||
"webpack-hot-middleware": "2.19.1",
|
"webpack-hot-middleware": "^2.20.0",
|
||||||
"webpack-merge": "4.1.0",
|
"webpack-merge": "4.1.0",
|
||||||
"node-sass": "4.5.3",
|
"node-sass": "4.5.3",
|
||||||
"sass-loader": "6.0.6"
|
"sass-loader": "6.0.6"
|
||||||
|
|||||||
@@ -5,4 +5,4 @@
|
|||||||
right: auto;
|
right: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
.app-footer {
|
.app-footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
padding: 0 $spacer;
|
padding: 0 $spacer;
|
||||||
color: $footer-color;
|
color: $footer-color;
|
||||||
background: $footer-bg;
|
background: $footer-bg;
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
@include borders($footer-borders);
|
@include borders($footer-borders);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,8 +11,8 @@
|
|||||||
app-dashboard,
|
app-dashboard,
|
||||||
app-root {
|
app-root {
|
||||||
display: flex;
|
display: flex;
|
||||||
min-height: 100vh;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-header {
|
.app-header {
|
||||||
@@ -26,12 +26,12 @@ app-root {
|
|||||||
.app-body {
|
.app-body {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
overflow-x: hidden;
|
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
overflow-x: hidden;
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
min-width: 0;
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
@@ -269,9 +269,11 @@ app-root {
|
|||||||
.footer-fixed {
|
.footer-fixed {
|
||||||
.app-footer {
|
.app-footer {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
z-index: $zindex-sticky;
|
z-index: $zindex-sticky;
|
||||||
width: 100%;
|
height: $footer-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-body {
|
.app-body {
|
||||||
@@ -328,17 +330,26 @@ app-root {
|
|||||||
margin-top: $navbar-height;
|
margin-top: $navbar-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.breadcrumb-fixed {
|
||||||
|
.main:nth-child(2) .breadcrumb {
|
||||||
|
right: auto;
|
||||||
|
left: auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar,
|
.sidebar,
|
||||||
.sidebar-fixed .sidebar {
|
.sidebar-fixed .sidebar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: $zindex-sticky - 1;
|
z-index: $zindex-sticky - 1;
|
||||||
width: $mobile-sidebar-width;
|
width: $mobile-sidebar-width;
|
||||||
height: 100%;
|
// height: 100%;
|
||||||
margin-left: - $mobile-sidebar-width;
|
margin-left: - $mobile-sidebar-width;
|
||||||
|
|
||||||
.sidebar-nav,
|
.sidebar-nav,
|
||||||
.nav {
|
.nav {
|
||||||
width: $mobile-sidebar-width !important;
|
width: $mobile-sidebar-width !important;
|
||||||
|
height: calc(100vh - #{$navbar-height});
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-minimizer {
|
.sidebar-minimizer {
|
||||||
@@ -364,10 +375,6 @@ app-root {
|
|||||||
.sidebar {
|
.sidebar {
|
||||||
width: $mobile-sidebar-width;
|
width: $mobile-sidebar-width;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
|
|
||||||
.sidebar-nav {
|
|
||||||
height: calc(100vh - #{$navbar-height});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
@@ -375,11 +382,4 @@ app-root {
|
|||||||
margin-left: $mobile-sidebar-width !important;
|
margin-left: $mobile-sidebar-width !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb-fixed {
|
|
||||||
.main .breadcrumb {
|
|
||||||
right: 0 !important;
|
|
||||||
left: 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
.app-header.navbar {
|
.app-header.navbar {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: $navbar-height;
|
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
height: $navbar-height;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background-color: $navbar-bg;
|
background-color: $navbar-bg;
|
||||||
@@ -22,7 +22,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.navbar-toggler {
|
.navbar-toggler {
|
||||||
color: $navbar-color;
|
min-width: 50px;
|
||||||
|
padding: $navbar-toggler-padding-y 0;
|
||||||
|
|
||||||
|
&:hover .navbar-toggler-icon {
|
||||||
|
background-image: $navbar-toggler-icon-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-toggler-icon {
|
||||||
|
height: 23px;
|
||||||
|
background-image: $navbar-toggler-icon;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-nav {
|
.navbar-nav {
|
||||||
|
|||||||
@@ -78,8 +78,8 @@
|
|||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
@include sidebar-width($sidebar-borders, $sidebar-width);
|
@include sidebar-width($sidebar-borders, $sidebar-width);
|
||||||
min-height: 100%;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
min-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-title {
|
.nav-title {
|
||||||
|
|||||||
@@ -69,6 +69,9 @@ $navbar-hover-color: $gray-800 !default;
|
|||||||
$navbar-active-color: $gray-800 !default;
|
$navbar-active-color: $gray-800 !default;
|
||||||
$navbar-disabled-color: $gray-300 !default;
|
$navbar-disabled-color: $gray-300 !default;
|
||||||
|
|
||||||
|
$navbar-toggler-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||||
|
$navbar-toggler-icon-hover: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-hover-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||||
|
|
||||||
// Sidebar
|
// Sidebar
|
||||||
|
|
||||||
$sidebar-width: 200px !default;
|
$sidebar-width: 200px !default;
|
||||||
|
|||||||
@@ -1,10 +1,11 @@
|
|||||||
/*!
|
/*!
|
||||||
* CoreUI - Open Source Bootstrap Admin Template
|
* CoreUI - Open Source Bootstrap Admin Template
|
||||||
* @version v1.0.1
|
* @version v1.0.2
|
||||||
* @link http://coreui.io
|
* @link http://coreui.io
|
||||||
* Copyright (c) 2017 creativeLabs Łukasz Holeczek
|
* Copyright (c) 2017 creativeLabs Łukasz Holeczek
|
||||||
* @license MIT
|
* @license MIT
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Override Boostrap variables
|
// Override Boostrap variables
|
||||||
@import "bootstrap-variables";
|
@import "bootstrap-variables";
|
||||||
|
|
||||||
|
|||||||
@@ -93,7 +93,7 @@
|
|||||||
<div class="py-3 pb-5 mr-3 float-left">
|
<div class="py-3 pb-5 mr-3 float-left">
|
||||||
<div class="avatar">
|
<div class="avatar">
|
||||||
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||||
<span class="avatar-status badge-success"></span>
|
<b-badge variant="success" class="avatar-status" ></b-badge>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@@ -108,7 +108,7 @@
|
|||||||
<div class="py-3 pb-5 mr-3 float-left">
|
<div class="py-3 pb-5 mr-3 float-left">
|
||||||
<div class="avatar">
|
<div class="avatar">
|
||||||
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||||
<span class="avatar-status badge-success"></span>
|
<b-badge variant="success" class="avatar-status" ></b-badge>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@@ -123,7 +123,7 @@
|
|||||||
<div class="py-3 pb-5 mr-3 float-left">
|
<div class="py-3 pb-5 mr-3 float-left">
|
||||||
<div class="avatar">
|
<div class="avatar">
|
||||||
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||||
<span class="avatar-status badge-success"></span>
|
<b-badge variant="success" class="avatar-status" ></b-badge>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@@ -138,7 +138,7 @@
|
|||||||
<div class="py-3 pb-5 mr-3 float-left">
|
<div class="py-3 pb-5 mr-3 float-left">
|
||||||
<div class="avatar">
|
<div class="avatar">
|
||||||
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||||
<span class="avatar-status badge-success"></span>
|
<b-badge variant="success" class="avatar-status" ></b-badge>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@@ -153,7 +153,7 @@
|
|||||||
<div class="py-3 pb-5 mr-3 float-left">
|
<div class="py-3 pb-5 mr-3 float-left">
|
||||||
<div class="avatar">
|
<div class="avatar">
|
||||||
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||||
<span class="avatar-status badge-success"></span>
|
<b-badge variant="success" class="avatar-status" ></b-badge>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@@ -1,7 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<ol class="breadcrumb">
|
<ol class="breadcrumb">
|
||||||
<li class="breadcrumb-item" v-for="(item, index) in list"><span class="active" v-if="isLast(index)">{{ showName(item) }}</span>
|
<li class="breadcrumb-item" v-for="(item, index) in list">
|
||||||
<router-link :to="item.path" v-else>{{ showName(item) }}</router-link>
|
<span class="active" v-if="isLast(index)">{{ showName(item) }}</span>
|
||||||
|
<router-link :to="item" v-else>{{ showName(item) }}</router-link>
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,8 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<header class="app-header navbar">
|
<header class="app-header navbar">
|
||||||
<button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="mobileSidebarToggle">☰</button>
|
<button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="mobileSidebarToggle">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
<b-link class="navbar-brand" to="#"></b-link>
|
<b-link class="navbar-brand" to="#"></b-link>
|
||||||
<button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" @click="sidebarToggle">☰</button>
|
<button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" @click="sidebarToggle">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
<b-nav is-nav-bar class="d-md-down-none">
|
<b-nav is-nav-bar class="d-md-down-none">
|
||||||
<b-nav-item class="px-3">Dashboard</b-nav-item>
|
<b-nav-item class="px-3">Dashboard</b-nav-item>
|
||||||
<b-nav-item class="px-3">Users</b-nav-item>
|
<b-nav-item class="px-3">Users</b-nav-item>
|
||||||
@@ -10,7 +14,8 @@
|
|||||||
</b-nav>
|
</b-nav>
|
||||||
<b-nav is-nav-bar class="ml-auto">
|
<b-nav is-nav-bar class="ml-auto">
|
||||||
<b-nav-item class="d-md-down-none">
|
<b-nav-item class="d-md-down-none">
|
||||||
<i class="icon-bell"></i><span class="badge badge-pill badge-danger">5</span>
|
<i class="icon-bell"></i>
|
||||||
|
<b-badge pill variant="danger">5</b-badge>
|
||||||
</b-nav-item>
|
</b-nav-item>
|
||||||
<b-nav-item class="d-md-down-none">
|
<b-nav-item class="d-md-down-none">
|
||||||
<i class="icon-list"></i>
|
<i class="icon-list"></i>
|
||||||
@@ -18,49 +23,38 @@
|
|||||||
<b-nav-item class="d-md-down-none">
|
<b-nav-item class="d-md-down-none">
|
||||||
<i class="icon-location-pin"></i>
|
<i class="icon-location-pin"></i>
|
||||||
</b-nav-item>
|
</b-nav-item>
|
||||||
<b-nav-item-dropdown right>
|
<HeaderDropdown/>
|
||||||
<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<span class="badge badge-info">42</span></b-dropdown-item>
|
|
||||||
<b-dropdown-item><i class="fa fa-envelope-o"></i> Messages<span class="badge badge-success">42</span></b-dropdown-item>
|
|
||||||
<b-dropdown-item><i class="fa fa-tasks"></i> Tasks<span class="badge badge-danger">42</span></b-dropdown-item>
|
|
||||||
<b-dropdown-item><i class="fa fa-comments"></i> Comments<span class="badge badge-warning">42</span></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<span class="badge badge-default">42</span></b-dropdown-item>
|
|
||||||
<b-dropdown-item><i class="fa fa-file"></i> Projects<span class="badge badge-primary">42</span></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>
|
|
||||||
</b-nav-item-dropdown>
|
|
||||||
</b-nav>
|
</b-nav>
|
||||||
<button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" @click="asideToggle">☰</button>
|
<button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" @click="asideToggle">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
</header>
|
</header>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
import HeaderDropdown from './HeaderDropdown.vue'
|
||||||
name: 'header',
|
|
||||||
methods: {
|
export default {
|
||||||
sidebarToggle (e) {
|
name: 'header',
|
||||||
e.preventDefault()
|
components: {
|
||||||
document.body.classList.toggle('sidebar-hidden')
|
HeaderDropdown
|
||||||
},
|
},
|
||||||
sidebarMinimize (e) {
|
methods: {
|
||||||
e.preventDefault()
|
sidebarToggle (e) {
|
||||||
document.body.classList.toggle('sidebar-minimized')
|
e.preventDefault()
|
||||||
},
|
document.body.classList.toggle('sidebar-hidden')
|
||||||
mobileSidebarToggle (e) {
|
},
|
||||||
e.preventDefault()
|
sidebarMinimize (e) {
|
||||||
document.body.classList.toggle('sidebar-mobile-show')
|
e.preventDefault()
|
||||||
},
|
document.body.classList.toggle('sidebar-minimized')
|
||||||
asideToggle (e) {
|
},
|
||||||
e.preventDefault()
|
mobileSidebarToggle (e) {
|
||||||
document.body.classList.toggle('aside-menu-hidden')
|
e.preventDefault()
|
||||||
|
document.body.classList.toggle('sidebar-mobile-show')
|
||||||
|
},
|
||||||
|
asideToggle (e) {
|
||||||
|
e.preventDefault()
|
||||||
|
document.body.classList.toggle('aside-menu-hidden')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -0,0 +1,26 @@
|
|||||||
|
<template>
|
||||||
|
<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-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-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>
|
||||||
|
</b-nav-item-dropdown>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'header-dropdown'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -125,7 +125,7 @@ export default new Router({
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/pages',
|
path: '/pages',
|
||||||
redirect: '/pages/p404',
|
redirect: '/pages/404',
|
||||||
name: 'Pages',
|
name: 'Pages',
|
||||||
component: {
|
component: {
|
||||||
render (c) { return c('router-view') }
|
render (c) { return c('router-view') }
|
||||||
|
|||||||
@@ -81,12 +81,12 @@
|
|||||||
<h4 class="card-title mb-0">Traffic</h4>
|
<h4 class="card-title mb-0">Traffic</h4>
|
||||||
<div class="small text-muted">November 2016</div>
|
<div class="small text-muted">November 2016</div>
|
||||||
</div><!--/.col-->
|
</div><!--/.col-->
|
||||||
<div class="col-sm-7 hidden-sm-down">
|
<div class="col-sm-7 d-none d-md-block">
|
||||||
<b-button type="button" variant="primary" class="float-right"><i class="icon-cloud-download"></i></b-button>
|
<b-button type="button" variant="primary" class="float-right"><i class="icon-cloud-download"></i></b-button>
|
||||||
<b-button-toolbar class="float-right" aria-label="Toolbar with button groups">
|
<b-button-toolbar class="float-right" aria-label="Toolbar with button groups">
|
||||||
<b-button-group class="mr-3" aria-label="First group">
|
<b-button-group class="mr-3" aria-label="First group">
|
||||||
<b-button variant="outline-secondary">Day</b-button>
|
<b-button variant="outline-secondary">Day</b-button>
|
||||||
<b-button variant="outline-secondary" :active="true">Month</b-button>
|
<b-button variant="outline-secondary" :pressed="true">Month</b-button>
|
||||||
<b-button variant="outline-secondary">Year</b-button>
|
<b-button variant="outline-secondary">Year</b-button>
|
||||||
</b-button-group>
|
</b-button-group>
|
||||||
</b-button-toolbar>
|
</b-button-toolbar>
|
||||||
@@ -288,7 +288,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="legend">
|
<li class="legend">
|
||||||
<span class="badge badge-pill badge-info"></span> <small>New clients</small> <span class="badge badge-pill badge-danger"></span> <small>Recurring clients</small>
|
<b-badge pill variant="info"></b-badge> <small>New clients</small> <b-badge pill variant="danger"></b-badge> <small>Recurring clients</small>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div><!--/.col-->
|
</div><!--/.col-->
|
||||||
@@ -502,13 +502,11 @@
|
|||||||
:fields="tableFields"
|
:fields="tableFields"
|
||||||
head-variant="default"
|
head-variant="default"
|
||||||
>
|
>
|
||||||
<template slot="avatar" scope="item">
|
<div slot="avatar" class="avatar" slot-scope="item">
|
||||||
<div class="avatar">
|
<img :src="item.value.url" class="img-avatar" alt="">
|
||||||
<img :src="item.value.url" class="img-avatar" alt="">
|
<span class="avatar-status" v-bind:class="{ 'bg-success': item.value.status == 'success', 'bg-warning': item.value.status == 'warning', 'bg-danger': item.value.status == 'danger', 'bg-secondary': item.value.status == '' }"></span>
|
||||||
<span class="avatar-status" v-bind:class="{ 'bg-success': item.value.status == 'success', 'bg-warning': item.value.status == 'warning', 'bg-danger': item.value.status == 'danger', 'bg-secondary': item.value.status == '' }"></span>
|
</div>
|
||||||
</div>
|
<div slot="user" slot-scope="item">
|
||||||
</template>
|
|
||||||
<template slot="user" scope="item">
|
|
||||||
<div>{{item.value.name}}</div>
|
<div>{{item.value.name}}</div>
|
||||||
<div class="small text-muted">
|
<div class="small text-muted">
|
||||||
<span>
|
<span>
|
||||||
@@ -516,11 +514,9 @@
|
|||||||
<template v-else>Recurring</template>
|
<template v-else>Recurring</template>
|
||||||
</span> | Registered: {{item.value.registered}}
|
</span> | Registered: {{item.value.registered}}
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
<template slot="country" scope="item">
|
<img slot="country" slot-scope="item" :src="item.value.flag" :alt="item.value.name" style="height:24px;">
|
||||||
<img :src="item.value.flag" :alt="item.value.name" style="height:24px;">
|
<div slot="usage" slot-scope="item">
|
||||||
</template>
|
|
||||||
<template slot="usage" scope="item">
|
|
||||||
<div class="clearfix">
|
<div class="clearfix">
|
||||||
<div class="float-left">
|
<div class="float-left">
|
||||||
<strong>{{item.value.value}}%</strong>
|
<strong>{{item.value.value}}%</strong>
|
||||||
@@ -530,14 +526,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<b-progress class="progress-xs" v-model="item.value.value" :variant="variant(item.value.value)"></b-progress>
|
<b-progress class="progress-xs" v-model="item.value.value" :variant="variant(item.value.value)"></b-progress>
|
||||||
</template>
|
</div>
|
||||||
<template slot="payment" scope="item">
|
<i slot="payment" slot-scope="item" :class="item.value.icon" style="font-size:24px"></i>
|
||||||
<i :class="item.value.icon" style="font-size:24px"></i>
|
<div slot="activity" slot-scope="item">
|
||||||
</template>
|
|
||||||
<template slot="activity" scope="item">
|
|
||||||
<div class="small text-muted">Last login</div>
|
<div class="small text-muted">Last login</div>
|
||||||
<strong>{{item.value}}</strong>
|
<strong>{{item.value}}</strong>
|
||||||
</template>
|
</div>
|
||||||
</b-table>
|
</b-table>
|
||||||
</b-card>
|
</b-card>
|
||||||
</div><!--/.col-->
|
</div><!--/.col-->
|
||||||
|
|||||||
@@ -68,15 +68,15 @@
|
|||||||
</b-card>
|
</b-card>
|
||||||
<b-card>
|
<b-card>
|
||||||
<div slot="header">
|
<div slot="header">
|
||||||
<strong>Active state</strong> <small>Add this <code>:active="true"</code></small>
|
<strong>Active state</strong> <small>Add this <code>:pressed="true"</code></small>
|
||||||
</div>
|
</div>
|
||||||
<b-button variant="primary" :active="true">Primary</b-button>
|
<b-button variant="primary" :pressed="true">Primary</b-button>
|
||||||
<b-button variant="secondary" :active="true">Secondary</b-button>
|
<b-button variant="secondary" :pressed="true">Secondary</b-button>
|
||||||
<b-button variant="success" :active="true">Success</b-button>
|
<b-button variant="success" :pressed="true">Success</b-button>
|
||||||
<b-button variant="info" :active="true">Info</b-button>
|
<b-button variant="info" :pressed="true">Info</b-button>
|
||||||
<b-button variant="warning" :active="true">Warning</b-button>
|
<b-button variant="warning" :pressed="true">Warning</b-button>
|
||||||
<b-button variant="danger" :active="true">Danger</b-button>
|
<b-button variant="danger" :pressed="true">Danger</b-button>
|
||||||
<b-button variant="link" :active="true">Link</b-button>
|
<b-button variant="link" :pressed="true">Link</b-button>
|
||||||
</b-card>
|
</b-card>
|
||||||
<b-card>
|
<b-card>
|
||||||
<div slot="header">
|
<div slot="header">
|
||||||
@@ -152,14 +152,14 @@
|
|||||||
</b-card>
|
</b-card>
|
||||||
<b-card>
|
<b-card>
|
||||||
<div slot="header">
|
<div slot="header">
|
||||||
<strong>Active state</strong> <small>Add this <code>:active="true"</code></small>
|
<strong>Active state</strong> <small>Add this <code>:pressed="true"</code></small>
|
||||||
</div>
|
</div>
|
||||||
<b-button variant="outline-primary" :active="true">Primary</b-button>
|
<b-button variant="outline-primary" :pressed="true">Primary</b-button>
|
||||||
<b-button variant="outline-secondary" :active="true">Secondary</b-button>
|
<b-button variant="outline-secondary" :pressed="true">Secondary</b-button>
|
||||||
<b-button variant="outline-success" :active="true">Success</b-button>
|
<b-button variant="outline-success" :pressed="true">Success</b-button>
|
||||||
<b-button variant="outline-info" :active="true">Info</b-button>
|
<b-button variant="outline-info" :pressed="true">Info</b-button>
|
||||||
<b-button variant="outline-warning" :active="true">Warning</b-button>
|
<b-button variant="outline-warning" :pressed="true">Warning</b-button>
|
||||||
<b-button variant="outline-danger" :active="true">Danger</b-button>
|
<b-button variant="outline-danger" :pressed="true">Danger</b-button>
|
||||||
</b-card>
|
</b-card>
|
||||||
<b-card>
|
<b-card>
|
||||||
<div slot="header">
|
<div slot="header">
|
||||||
|
|||||||
@@ -34,7 +34,7 @@
|
|||||||
<b-card>
|
<b-card>
|
||||||
<div slot="header">
|
<div slot="header">
|
||||||
Card with label
|
Card with label
|
||||||
<span class="badge badge-success float-right">Success</span>
|
<b-badge variant="success" class="float-right">Success</b-badge>
|
||||||
</div>
|
</div>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
</b-card>
|
</b-card>
|
||||||
@@ -43,7 +43,7 @@
|
|||||||
<b-card>
|
<b-card>
|
||||||
<div slot="header">
|
<div slot="header">
|
||||||
Card with label
|
Card with label
|
||||||
<span class="badge badge-pill badge-danger float-right">42</span>
|
<b-badge pill variant="danger" class="float-right">42</b-badge>
|
||||||
</div>
|
</div>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
</b-card>
|
</b-card>
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
<td>2012/01/01</td>
|
<td>2012/01/01</td>
|
||||||
<td>Member</td>
|
<td>Member</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="badge badge-success">Active</span>
|
<b-badge variant="success">Active</b-badge>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -26,7 +26,7 @@
|
|||||||
<td>2012/02/01</td>
|
<td>2012/02/01</td>
|
||||||
<td>Staff</td>
|
<td>Staff</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="badge badge-danger">Banned</span>
|
<b-badge variant="danger">Banned</b-badge>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -34,7 +34,7 @@
|
|||||||
<td>2012/02/01</td>
|
<td>2012/02/01</td>
|
||||||
<td>Admin</td>
|
<td>Admin</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="badge badge-secondary">Inactive</span>
|
<b-badge variant="secondary">Inactive</b-badge>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -42,7 +42,7 @@
|
|||||||
<td>2012/03/01</td>
|
<td>2012/03/01</td>
|
||||||
<td>Member</td>
|
<td>Member</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="badge badge-warning">Pending</span>
|
<b-badge variant="warning">Pending</b-badge>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -50,7 +50,7 @@
|
|||||||
<td>2012/01/21</td>
|
<td>2012/01/21</td>
|
||||||
<td>Staff</td>
|
<td>Staff</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="badge badge-success">Active</span>
|
<b-badge variant="success">Active</b-badge>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
@@ -85,7 +85,7 @@
|
|||||||
<td>2012/01/01</td>
|
<td>2012/01/01</td>
|
||||||
<td>Member</td>
|
<td>Member</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="badge badge-success">Active</span>
|
<b-badge variant="success">Active</b-badge>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -93,7 +93,7 @@
|
|||||||
<td>2012/02/01</td>
|
<td>2012/02/01</td>
|
||||||
<td>Staff</td>
|
<td>Staff</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="badge badge-danger">Banned</span>
|
<b-badge variant="danger">Banned</b-badge>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -101,7 +101,7 @@
|
|||||||
<td>2012/02/01</td>
|
<td>2012/02/01</td>
|
||||||
<td>Admin</td>
|
<td>Admin</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="badge badge-secondary">Inactive</span>
|
<b-badge variant="secondary">Inactive</b-badge>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -109,7 +109,7 @@
|
|||||||
<td>2012/03/01</td>
|
<td>2012/03/01</td>
|
||||||
<td>Member</td>
|
<td>Member</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="badge badge-warning">Pending</span>
|
<b-badge variant="warning">Pending</b-badge>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -117,7 +117,7 @@
|
|||||||
<td>2012/01/21</td>
|
<td>2012/01/21</td>
|
||||||
<td>Staff</td>
|
<td>Staff</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="badge badge-success">Active</span>
|
<b-badge variant="success">Active</b-badge>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
@@ -155,7 +155,7 @@
|
|||||||
<td>2012/01/01</td>
|
<td>2012/01/01</td>
|
||||||
<td>Member</td>
|
<td>Member</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="badge badge-success">Active</span>
|
<b-badge variant="success">Active</b-badge>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -163,7 +163,7 @@
|
|||||||
<td>2012/02/01</td>
|
<td>2012/02/01</td>
|
||||||
<td>Staff</td>
|
<td>Staff</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="badge badge-danger">Banned</span>
|
<b-badge variant="danger">Banned</b-badge>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -171,7 +171,7 @@
|
|||||||
<td>2012/02/01</td>
|
<td>2012/02/01</td>
|
||||||
<td>Admin</td>
|
<td>Admin</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="badge badge-secondary">Inactive</span>
|
<b-badge variant="secondary">Inactive</b-badge>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -179,7 +179,7 @@
|
|||||||
<td>2012/03/01</td>
|
<td>2012/03/01</td>
|
||||||
<td>Member</td>
|
<td>Member</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="badge badge-warning">Pending</span>
|
<b-badge variant="warning">Pending</b-badge>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -187,7 +187,7 @@
|
|||||||
<td>2012/01/21</td>
|
<td>2012/01/21</td>
|
||||||
<td>Staff</td>
|
<td>Staff</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="badge badge-success">Active</span>
|
<b-badge variant="success">Active</b-badge>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
@@ -222,7 +222,7 @@
|
|||||||
<td>2012/01/01</td>
|
<td>2012/01/01</td>
|
||||||
<td>Member</td>
|
<td>Member</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="badge badge-success">Active</span>
|
<b-badge variant="success">Active</b-badge>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -230,7 +230,7 @@
|
|||||||
<td>2012/02/01</td>
|
<td>2012/02/01</td>
|
||||||
<td>Staff</td>
|
<td>Staff</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="badge badge-danger">Banned</span>
|
<b-badge variant="danger">Banned</b-badge>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -238,7 +238,7 @@
|
|||||||
<td>2012/02/01</td>
|
<td>2012/02/01</td>
|
||||||
<td>Admin</td>
|
<td>Admin</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="badge badge-secondary">Inactive</span>
|
<b-badge variant="secondary">Inactive</b-badge>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -246,7 +246,7 @@
|
|||||||
<td>2012/03/01</td>
|
<td>2012/03/01</td>
|
||||||
<td>Member</td>
|
<td>Member</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="badge badge-warning">Pending</span>
|
<b-badge variant="warning">Pending</b-badge>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -254,7 +254,7 @@
|
|||||||
<td>2012/01/21</td>
|
<td>2012/01/21</td>
|
||||||
<td>Staff</td>
|
<td>Staff</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="badge badge-success">Active</span>
|
<b-badge variant="success">Active</b-badge>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
@@ -292,7 +292,7 @@
|
|||||||
<td>2012/01/01</td>
|
<td>2012/01/01</td>
|
||||||
<td>Member</td>
|
<td>Member</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="badge badge-success">Active</span>
|
<b-badge variant="success">Active</b-badge>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -300,7 +300,7 @@
|
|||||||
<td>2012/02/01</td>
|
<td>2012/02/01</td>
|
||||||
<td>Staff</td>
|
<td>Staff</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="badge badge-danger">Banned</span>
|
<b-badge variant="danger">Banned</b-badge>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -308,7 +308,7 @@
|
|||||||
<td>2012/02/01</td>
|
<td>2012/02/01</td>
|
||||||
<td>Admin</td>
|
<td>Admin</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="badge badge-secondary">Inactive</span>
|
<b-badge variant="secondary">Inactive</b-badge>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -316,7 +316,7 @@
|
|||||||
<td>2012/03/01</td>
|
<td>2012/03/01</td>
|
||||||
<td>Member</td>
|
<td>Member</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="badge badge-warning">Pending</span>
|
<b-badge variant="warning">Pending</b-badge>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -324,7 +324,7 @@
|
|||||||
<td>2012/01/21</td>
|
<td>2012/01/21</td>
|
||||||
<td>Staff</td>
|
<td>Staff</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="badge badge-success">Active</span>
|
<b-badge variant="success">Active</b-badge>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@coreui/vue",
|
"name": "@coreui/vue",
|
||||||
"version": "1.0.1",
|
"version": "1.0.2",
|
||||||
"description": "",
|
"description": "",
|
||||||
"author": "Łukasz Holeczek <lukasz@holeczek.pl>",
|
"author": "Łukasz Holeczek <lukasz@holeczek.pl>",
|
||||||
"private": true,
|
"private": true,
|
||||||
|
|||||||
@@ -5,4 +5,4 @@
|
|||||||
right: auto;
|
right: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
.app-footer {
|
.app-footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
padding: 0 $spacer;
|
padding: 0 $spacer;
|
||||||
color: $footer-color;
|
color: $footer-color;
|
||||||
background: $footer-bg;
|
background: $footer-bg;
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
@include borders($footer-borders);
|
@include borders($footer-borders);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,8 +11,8 @@
|
|||||||
app-dashboard,
|
app-dashboard,
|
||||||
app-root {
|
app-root {
|
||||||
display: flex;
|
display: flex;
|
||||||
min-height: 100vh;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-header {
|
.app-header {
|
||||||
@@ -26,12 +26,12 @@ app-root {
|
|||||||
.app-body {
|
.app-body {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
overflow-x: hidden;
|
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
overflow-x: hidden;
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
min-width: 0;
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
@@ -269,9 +269,11 @@ app-root {
|
|||||||
.footer-fixed {
|
.footer-fixed {
|
||||||
.app-footer {
|
.app-footer {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
z-index: $zindex-sticky;
|
z-index: $zindex-sticky;
|
||||||
width: 100%;
|
height: $footer-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-body {
|
.app-body {
|
||||||
@@ -328,17 +330,26 @@ app-root {
|
|||||||
margin-top: $navbar-height;
|
margin-top: $navbar-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.breadcrumb-fixed {
|
||||||
|
.main:nth-child(2) .breadcrumb {
|
||||||
|
right: auto;
|
||||||
|
left: auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar,
|
.sidebar,
|
||||||
.sidebar-fixed .sidebar {
|
.sidebar-fixed .sidebar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: $zindex-sticky - 1;
|
z-index: $zindex-sticky - 1;
|
||||||
width: $mobile-sidebar-width;
|
width: $mobile-sidebar-width;
|
||||||
height: 100%;
|
// height: 100%;
|
||||||
margin-left: - $mobile-sidebar-width;
|
margin-left: - $mobile-sidebar-width;
|
||||||
|
|
||||||
.sidebar-nav,
|
.sidebar-nav,
|
||||||
.nav {
|
.nav {
|
||||||
width: $mobile-sidebar-width !important;
|
width: $mobile-sidebar-width !important;
|
||||||
|
height: calc(100vh - #{$navbar-height});
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-minimizer {
|
.sidebar-minimizer {
|
||||||
@@ -364,10 +375,6 @@ app-root {
|
|||||||
.sidebar {
|
.sidebar {
|
||||||
width: $mobile-sidebar-width;
|
width: $mobile-sidebar-width;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
|
|
||||||
.sidebar-nav {
|
|
||||||
height: calc(100vh - #{$navbar-height});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
@@ -375,11 +382,4 @@ app-root {
|
|||||||
margin-left: $mobile-sidebar-width !important;
|
margin-left: $mobile-sidebar-width !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb-fixed {
|
|
||||||
.main .breadcrumb {
|
|
||||||
right: 0 !important;
|
|
||||||
left: 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
.app-header.navbar {
|
.app-header.navbar {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: $navbar-height;
|
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
height: $navbar-height;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background-color: $navbar-bg;
|
background-color: $navbar-bg;
|
||||||
@@ -22,7 +22,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.navbar-toggler {
|
.navbar-toggler {
|
||||||
color: $navbar-color;
|
min-width: 50px;
|
||||||
|
padding: $navbar-toggler-padding-y 0;
|
||||||
|
|
||||||
|
&:hover .navbar-toggler-icon {
|
||||||
|
background-image: $navbar-toggler-icon-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-toggler-icon {
|
||||||
|
height: 23px;
|
||||||
|
background-image: $navbar-toggler-icon;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-nav {
|
.navbar-nav {
|
||||||
|
|||||||
@@ -78,8 +78,8 @@
|
|||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
@include sidebar-width($sidebar-borders, $sidebar-width);
|
@include sidebar-width($sidebar-borders, $sidebar-width);
|
||||||
min-height: 100%;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
min-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-title {
|
.nav-title {
|
||||||
|
|||||||
@@ -69,6 +69,9 @@ $navbar-hover-color: $gray-800 !default;
|
|||||||
$navbar-active-color: $gray-800 !default;
|
$navbar-active-color: $gray-800 !default;
|
||||||
$navbar-disabled-color: $gray-300 !default;
|
$navbar-disabled-color: $gray-300 !default;
|
||||||
|
|
||||||
|
$navbar-toggler-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||||
|
$navbar-toggler-icon-hover: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-hover-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||||
|
|
||||||
// Sidebar
|
// Sidebar
|
||||||
|
|
||||||
$sidebar-width: 200px !default;
|
$sidebar-width: 200px !default;
|
||||||
|
|||||||
@@ -1,10 +1,11 @@
|
|||||||
/*!
|
/*!
|
||||||
* CoreUI - Open Source Bootstrap Admin Template
|
* CoreUI - Open Source Bootstrap Admin Template
|
||||||
* @version v1.0.1
|
* @version v1.0.2
|
||||||
* @link http://coreui.io
|
* @link http://coreui.io
|
||||||
* Copyright (c) 2017 creativeLabs Łukasz Holeczek
|
* Copyright (c) 2017 creativeLabs Łukasz Holeczek
|
||||||
* @license MIT
|
* @license MIT
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Override Boostrap variables
|
// Override Boostrap variables
|
||||||
@import "bootstrap-variables";
|
@import "bootstrap-variables";
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<ol class="breadcrumb">
|
<ol class="breadcrumb">
|
||||||
<li class="breadcrumb-item" v-for="(item, index) in list"><span class="active" v-if="isLast(index)">{{ showName(item) }}</span>
|
<li class="breadcrumb-item" v-for="(item, index) in list">
|
||||||
<router-link :to="item.path" v-else>{{ showName(item) }}</router-link>
|
<span class="active" v-if="isLast(index)">{{ showName(item) }}</span>
|
||||||
|
<router-link :to="item" v-else>{{ showName(item) }}</router-link>
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,9 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<header class="app-header navbar">
|
<header class="app-header navbar">
|
||||||
<button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="mobileSidebarToggle">☰</button>
|
<button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="mobileSidebarToggle">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
<b-link class="navbar-brand" to="#"></b-link>
|
<b-link class="navbar-brand" to="#"></b-link>
|
||||||
<button class="navbar-toggler sidebar-toggler d-md-down-none mr-auto" type="button" @click="sidebarToggle">☰</button>
|
<button class="navbar-toggler sidebar-toggler d-md-down-none mr-auto" type="button" @click="sidebarToggle">
|
||||||
<button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" @click="asideToggle">☰</button>
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" @click="asideToggle">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
</header>
|
</header>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
+1
-1
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@coreui/vue",
|
"name": "@coreui/vue",
|
||||||
"version": "1.0.1",
|
"version": "1.0.2",
|
||||||
"description": "Open Source Vue Admin Template",
|
"description": "Open Source Vue Admin Template",
|
||||||
"main": "",
|
"main": "",
|
||||||
"homepage": "http://coreui.io/vue/",
|
"homepage": "http://coreui.io/vue/",
|
||||||
|
|||||||
Reference in New Issue
Block a user