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

- Update Vue to 2.5.2

Browse Source 
- 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
2017-10-16 16:08:00 +02:00
parent 96f2affe25
commit f244f02585
29 changed files with 249 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Vue_Full_Project/CHANGELOG.md
+8
View File
@@ -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)
Vue_Full_Project/package.json
+26 -26
View File
@@ -1,6 +1,6 @@
{
"name": "@coreui/vue",
"version": "1.0.1",
"version": "1.0.2",
"description": "",
"author": "Łukasz Holeczek <lukasz@holeczek.pl>",
"private": true,
@@ -19,36 +19,36 @@
"font-awesome": "^4.7.0",
"is-url-external": "^1.0.3",
"simple-line-icons": "^2.4.1",
"vue": "2.4.4",
"vue": "^2.5.2",
"vue-chartjs": "2.8.7",
"vue-router": "2.7.0"
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "7.1.4",
"autoprefixer": "7.1.5",
"babel-core": "6.26.0",
"babel-eslint": "8.0.0",
"babel-eslint": "8.0.1",
"babel-loader": "7.1.2",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "1.6.0",
"babel-preset-stage-2": "6.24.1",
"babel-register": "6.26.0",
"chalk": "2.1.0",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"connect-history-api-fallback": "^1.4.0",
"copy-webpack-plugin": "^4.1.1",
"css-loader": "0.28.7",
"eslint": "4.7.2",
"eslint": "^4.9.0",
"eslint-friendly-formatter": "3.0.0",
"eslint-loader": "1.9.0",
"eslint-plugin-html": "3.2.2",
"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-plugin-promise": "3.5.0",
"eslint-plugin-promise": "^3.6.0",
"eslint-plugin-standard": "3.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "4.15.5",
"extract-text-webpack-plugin": "3.0.0",
"file-loader": "0.11.2",
"express": "4.16.2",
"extract-text-webpack-plugin": "3.0.1",
"file-loader": "1.1.5",
"friendly-errors-webpack-plugin": "1.6.1",
"html-webpack-plugin": "2.30.1",
"http-proxy-middleware": "0.17.4",
@@ -62,32 +62,32 @@
"karma-sinon-chai": "1.3.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "2.0.4",
"lolex": "2.1.2",
"mocha": "3.5.3",
"karma-webpack": "^2.0.5",
"lolex": "2.1.3",
"mocha": "4.0.1",
"chai": "4.1.2",
"sinon": "3.3.0",
"sinon-chai": "2.13.0",
"sinon": "4.0.1",
"sinon-chai": "2.14.0",
"inject-loader": "3.0.1",
"babel-plugin-istanbul": "4.1.5",
"phantomjs-prebuilt": "^2.1.15",
"chromedriver": "2.32.3",
"chromedriver": "2.33.1",
"cross-spawn": "^5.0.1",
"nightwatch": "0.9.16",
"selenium-server": "3.5.3",
"selenium-server": "3.6.0",
"semver": "5.4.1",
"shelljs": "0.7.8",
"opn": "5.1.0",
"optimize-css-assets-webpack-plugin": "3.2.0",
"ora": "1.3.0",
"rimraf": "2.6.2",
"url-loader": "0.5.9",
"vue-loader": "13.0.5",
"url-loader": "0.6.2",
"vue-loader": "13.3.0",
"vue-style-loader": "3.0.3",
"vue-template-compiler": "2.4.4",
"webpack": "3.6.0",
"webpack-dev-middleware": "1.12.0",
"webpack-hot-middleware": "2.19.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.7.1",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.20.0",
"webpack-merge": "4.1.0",
"node-sass": "4.5.3",
"sass-loader": "6.0.6"
Vue_Full_Project/scss/core/_footer.scss
+2 -2
View File
@@ -1,9 +1,9 @@
.app-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 0 $spacer;
color: $footer-color;
background: $footer-bg;
flex-wrap: wrap;
align-items: center;
@include borders($footer-borders);
}
Vue_Full_Project/scss/core/_layout.scss
+16 -16
View File
@@ -11,8 +11,8 @@
app-dashboard,
app-root {
display: flex;
min-height: 100vh;
flex-direction: column;
min-height: 100vh;
}
.app-header {
@@ -26,12 +26,12 @@ app-root {
.app-body {
display: flex;
flex-direction: row;
overflow-x: hidden;
flex-grow: 1;
overflow-x: hidden;
.main {
min-width: 0;
flex: 1;
min-width: 0;
}
.sidebar {
@@ -269,9 +269,11 @@ app-root {
.footer-fixed {
.app-footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: $zindex-sticky;
width: 100%;
height: $footer-height;
}
.app-body {
@@ -328,17 +330,26 @@ app-root {
margin-top: $navbar-height;
}
.breadcrumb-fixed {
.main:nth-child(2) .breadcrumb {
right: auto;
left: auto;
width: 100%;
}
}
.sidebar,
.sidebar-fixed .sidebar {
position: fixed;
z-index: $zindex-sticky - 1;
width: $mobile-sidebar-width;
height: 100%;
// height: 100%;
margin-left: - $mobile-sidebar-width;
.sidebar-nav,
.nav {
width: $mobile-sidebar-width !important;
height: calc(100vh - #{$navbar-height});
}
.sidebar-minimizer {
@@ -364,10 +375,6 @@ app-root {
.sidebar {
width: $mobile-sidebar-width;
margin-left: 0;
.sidebar-nav {
height: calc(100vh - #{$navbar-height});
}
}
.main {
@@ -375,11 +382,4 @@ app-root {
margin-left: $mobile-sidebar-width !important;
}
}
.breadcrumb-fixed {
.main .breadcrumb {
right: 0 !important;
left: 0 !important;
}
}
}
Vue_Full_Project/scss/core/_navbar.scss
+12 -2
View File
@@ -1,7 +1,7 @@
.app-header.navbar {
position: relative;
height: $navbar-height;
flex-direction: row;
height: $navbar-height;
padding: 0;
margin: 0;
background-color: $navbar-bg;
@@ -22,7 +22,17 @@
}
.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 {
Vue_Full_Project/scss/core/_sidebar.scss
+1 -1
View File
@@ -78,8 +78,8 @@
.nav {
@include sidebar-width($sidebar-borders, $sidebar-width);
min-height: 100%;
flex-direction: column;
min-height: 100%;
}
.nav-title {
Vue_Full_Project/scss/core/_variables.scss
+3
View File
@@ -69,6 +69,9 @@ $navbar-hover-color: $gray-800 !default;
$navbar-active-color: $gray-800 !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-width: 200px !default;
Vue_Full_Project/scss/style.scss
+2 -1
View File
@@ -1,10 +1,11 @@
/*!
* CoreUI - Open Source Bootstrap Admin Template
* @version v1.0.1
* @version v1.0.2
* @link http://coreui.io
* Copyright (c) 2017 creativeLabs Łukasz Holeczek
* @license MIT
*/
// Override Boostrap variables
@import "bootstrap-variables";
Vue_Full_Project/src/components/Aside.vue
+5 -5
View File
@@ -93,7 +93,7 @@
<div class="py-3 pb-5 mr-3 float-left">
<div class="avatar">
<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>
@@ -108,7 +108,7 @@
<div class="py-3 pb-5 mr-3 float-left">
<div class="avatar">
<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>
@@ -123,7 +123,7 @@
<div class="py-3 pb-5 mr-3 float-left">
<div class="avatar">
<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>
@@ -138,7 +138,7 @@
<div class="py-3 pb-5 mr-3 float-left">
<div class="avatar">
<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>
@@ -153,7 +153,7 @@
<div class="py-3 pb-5 mr-3 float-left">
<div class="avatar">
<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>
Vue_Full_Project/src/components/Breadcrumb.vue
+3 -2
View File
@@ -1,7 +1,8 @@
<template>
<ol class="breadcrumb">
<li class="breadcrumb-item" v-for="(item, index) in list"><span class="active" v-if="isLast(index)">{{ showName(item) }}</span>
<router-link :to="item.path" v-else>{{ showName(item) }}</router-link>
<li class="breadcrumb-item" v-for="(item, index) in list">
<span class="active" v-if="isLast(index)">{{ showName(item) }}</span>
<router-link :to="item" v-else>{{ showName(item) }}</router-link>
</li>
</ol>
</template>
Vue_Full_Project/src/components/Header.vue
+17 -23
View File
@@ -1,8 +1,12 @@
<template>
<header class="app-header navbar">
<button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="mobileSidebarToggle">&#9776;</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>
<button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" @click="sidebarToggle">&#9776;</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-item class="px-3">Dashboard</b-nav-item>
<b-nav-item class="px-3">Users</b-nav-item>
@@ -10,7 +14,8 @@
</b-nav>
<b-nav is-nav-bar class="ml-auto">
<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 class="d-md-down-none">
<i class="icon-list"></i>
@@ -18,32 +23,21 @@
<b-nav-item class="d-md-down-none">
<i class="icon-location-pin"></i>
</b-nav-item>
<b-nav-item-dropdown right>
<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>
<HeaderDropdown/>
</b-nav>
<button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" @click="asideToggle">&#9776;</button>
<button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" @click="asideToggle">
<span class="navbar-toggler-icon"></span>
</button>
</header>
</template>
<script>
import HeaderDropdown from './HeaderDropdown.vue'
export default {
name: 'header',
components: {
HeaderDropdown
},
methods: {
sidebarToggle (e) {
e.preventDefault()
Vue_Full_Project/src/components/HeaderDropdown.vue
+26
View File
@@ -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>
Vue_Full_Project/src/router/index.js
+1 -1
View File
@@ -125,7 +125,7 @@ export default new Router({
},
{
path: '/pages',
redirect: '/pages/p404',
redirect: '/pages/404',
name: 'Pages',
component: {
render (c) { return c('router-view') }
Vue_Full_Project/src/views/Dashboard.vue
+12 -18
View File
@@ -81,12 +81,12 @@
<h4 class="card-title mb-0">Traffic</h4>
<div class="small text-muted">November 2016</div>
</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-toolbar class="float-right" aria-label="Toolbar with button groups">
<b-button-group class="mr-3" aria-label="First group">
<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-group>
</b-button-toolbar>
@@ -288,7 +288,7 @@
</div>
</li>
<li class="legend">
<span class="badge badge-pill badge-info"></span> <small>New clients</small> &nbsp; <span class="badge badge-pill badge-danger"></span> <small>Recurring clients</small>
<b-badge pill variant="info"></b-badge> <small>New clients</small> &nbsp; <b-badge pill variant="danger"></b-badge> <small>Recurring clients</small>
</li>
</ul>
</div><!--/.col-->
@@ -502,13 +502,11 @@
:fields="tableFields"
head-variant="default"
>
<template slot="avatar" scope="item">
<div class="avatar">
<div slot="avatar" class="avatar" slot-scope="item">
<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>
</div>
</template>
<template slot="user" scope="item">
<div slot="user" slot-scope="item">
<div>{{item.value.name}}</div>
<div class="small text-muted">
<span>
@@ -516,11 +514,9 @@
<template v-else>Recurring</template>
</span> | Registered: {{item.value.registered}}
</div>
</template>
<template slot="country" scope="item">
<img :src="item.value.flag" :alt="item.value.name" style="height:24px;">
</template>
<template slot="usage" scope="item">
</div>
<img slot="country" slot-scope="item" :src="item.value.flag" :alt="item.value.name" style="height:24px;">
<div slot="usage" slot-scope="item">
<div class="clearfix">
<div class="float-left">
<strong>{{item.value.value}}%</strong>
@@ -530,14 +526,12 @@
</div>
</div>
<b-progress class="progress-xs" v-model="item.value.value" :variant="variant(item.value.value)"></b-progress>
</template>
<template slot="payment" scope="item">
<i :class="item.value.icon" style="font-size:24px"></i>
</template>
<template slot="activity" scope="item">
</div>
<i slot="payment" slot-scope="item" :class="item.value.icon" style="font-size:24px"></i>
<div slot="activity" slot-scope="item">
<div class="small text-muted">Last login</div>
<strong>{{item.value}}</strong>
</template>
</div>
</b-table>
</b-card>
</div><!--/.col-->
Vue_Full_Project/src/views/components/Buttons.vue
+15 -15
View File
@@ -68,15 +68,15 @@
</b-card>
<b-card>
<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>
<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-button variant="primary" :pressed="true">Primary</b-button>
<b-button variant="secondary" :pressed="true">Secondary</b-button>
<b-button variant="success" :pressed="true">Success</b-button>
<b-button variant="info" :pressed="true">Info</b-button>
<b-button variant="warning" :pressed="true">Warning</b-button>
<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">
@@ -152,14 +152,14 @@
</b-card>
<b-card>
<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>
<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-button variant="outline-primary" :pressed="true">Primary</b-button>
<b-button variant="outline-secondary" :pressed="true">Secondary</b-button>
<b-button variant="outline-success" :pressed="true">Success</b-button>
<b-button variant="outline-info" :pressed="true">Info</b-button>
<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">
Vue_Full_Project/src/views/components/Cards.vue
+2 -2
View File
@@ -34,7 +34,7 @@
<b-card>
<div slot="header">
Card with label
<span class="badge badge-success float-right">Success</span>
<b-badge variant="success" class="float-right">Success</b-badge>
</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.
</b-card>
@@ -43,7 +43,7 @@
<b-card>
<div slot="header">
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>
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>
Vue_Full_Project/src/views/components/Tables.vue
+25 -25
View File
@@ -18,7 +18,7 @@
<td>2012/01/01</td>
<td>Member</td>
<td>
<span class="badge badge-success">Active</span>
<b-badge variant="success">Active</b-badge>
</td>
</tr>
<tr>
@@ -26,7 +26,7 @@
<td>2012/02/01</td>
<td>Staff</td>
<td>
<span class="badge badge-danger">Banned</span>
<b-badge variant="danger">Banned</b-badge>
</td>
</tr>
<tr>
@@ -34,7 +34,7 @@
<td>2012/02/01</td>
<td>Admin</td>
<td>
<span class="badge badge-secondary">Inactive</span>
<b-badge variant="secondary">Inactive</b-badge>
</td>
</tr>
<tr>
@@ -42,7 +42,7 @@
<td>2012/03/01</td>
<td>Member</td>
<td>
<span class="badge badge-warning">Pending</span>
<b-badge variant="warning">Pending</b-badge>
</td>
</tr>
<tr>
@@ -50,7 +50,7 @@
<td>2012/01/21</td>
<td>Staff</td>
<td>
<span class="badge badge-success">Active</span>
<b-badge variant="success">Active</b-badge>
</td>
</tr>
</tbody>
@@ -85,7 +85,7 @@
<td>2012/01/01</td>
<td>Member</td>
<td>
<span class="badge badge-success">Active</span>
<b-badge variant="success">Active</b-badge>
</td>
</tr>
<tr>
@@ -93,7 +93,7 @@
<td>2012/02/01</td>
<td>Staff</td>
<td>
<span class="badge badge-danger">Banned</span>
<b-badge variant="danger">Banned</b-badge>
</td>
</tr>
<tr>
@@ -101,7 +101,7 @@
<td>2012/02/01</td>
<td>Admin</td>
<td>
<span class="badge badge-secondary">Inactive</span>
<b-badge variant="secondary">Inactive</b-badge>
</td>
</tr>
<tr>
@@ -109,7 +109,7 @@
<td>2012/03/01</td>
<td>Member</td>
<td>
<span class="badge badge-warning">Pending</span>
<b-badge variant="warning">Pending</b-badge>
</td>
</tr>
<tr>
@@ -117,7 +117,7 @@
<td>2012/01/21</td>
<td>Staff</td>
<td>
<span class="badge badge-success">Active</span>
<b-badge variant="success">Active</b-badge>
</td>
</tr>
</tbody>
@@ -155,7 +155,7 @@
<td>2012/01/01</td>
<td>Member</td>
<td>
<span class="badge badge-success">Active</span>
<b-badge variant="success">Active</b-badge>
</td>
</tr>
<tr>
@@ -163,7 +163,7 @@
<td>2012/02/01</td>
<td>Staff</td>
<td>
<span class="badge badge-danger">Banned</span>
<b-badge variant="danger">Banned</b-badge>
</td>
</tr>
<tr>
@@ -171,7 +171,7 @@
<td>2012/02/01</td>
<td>Admin</td>
<td>
<span class="badge badge-secondary">Inactive</span>
<b-badge variant="secondary">Inactive</b-badge>
</td>
</tr>
<tr>
@@ -179,7 +179,7 @@
<td>2012/03/01</td>
<td>Member</td>
<td>
<span class="badge badge-warning">Pending</span>
<b-badge variant="warning">Pending</b-badge>
</td>
</tr>
<tr>
@@ -187,7 +187,7 @@
<td>2012/01/21</td>
<td>Staff</td>
<td>
<span class="badge badge-success">Active</span>
<b-badge variant="success">Active</b-badge>
</td>
</tr>
</tbody>
@@ -222,7 +222,7 @@
<td>2012/01/01</td>
<td>Member</td>
<td>
<span class="badge badge-success">Active</span>
<b-badge variant="success">Active</b-badge>
</td>
</tr>
<tr>
@@ -230,7 +230,7 @@
<td>2012/02/01</td>
<td>Staff</td>
<td>
<span class="badge badge-danger">Banned</span>
<b-badge variant="danger">Banned</b-badge>
</td>
</tr>
<tr>
@@ -238,7 +238,7 @@
<td>2012/02/01</td>
<td>Admin</td>
<td>
<span class="badge badge-secondary">Inactive</span>
<b-badge variant="secondary">Inactive</b-badge>
</td>
</tr>
<tr>
@@ -246,7 +246,7 @@
<td>2012/03/01</td>
<td>Member</td>
<td>
<span class="badge badge-warning">Pending</span>
<b-badge variant="warning">Pending</b-badge>
</td>
</tr>
<tr>
@@ -254,7 +254,7 @@
<td>2012/01/21</td>
<td>Staff</td>
<td>
<span class="badge badge-success">Active</span>
<b-badge variant="success">Active</b-badge>
</td>
</tr>
</tbody>
@@ -292,7 +292,7 @@
<td>2012/01/01</td>
<td>Member</td>
<td>
<span class="badge badge-success">Active</span>
<b-badge variant="success">Active</b-badge>
</td>
</tr>
<tr>
@@ -300,7 +300,7 @@
<td>2012/02/01</td>
<td>Staff</td>
<td>
<span class="badge badge-danger">Banned</span>
<b-badge variant="danger">Banned</b-badge>
</td>
</tr>
<tr>
@@ -308,7 +308,7 @@
<td>2012/02/01</td>
<td>Admin</td>
<td>
<span class="badge badge-secondary">Inactive</span>
<b-badge variant="secondary">Inactive</b-badge>
</td>
</tr>
<tr>
@@ -316,7 +316,7 @@
<td>2012/03/01</td>
<td>Member</td>
<td>
<span class="badge badge-warning">Pending</span>
<b-badge variant="warning">Pending</b-badge>
</td>
</tr>
<tr>
@@ -324,7 +324,7 @@
<td>2012/01/21</td>
<td>Staff</td>
<td>
<span class="badge badge-success">Active</span>
<b-badge variant="success">Active</b-badge>
</td>
</tr>
</tbody>
Vue_Starter/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@coreui/vue",
"version": "1.0.1",
"version": "1.0.2",
"description": "",
"author": "Łukasz Holeczek <lukasz@holeczek.pl>",
"private": true,
Vue_Starter/scss/core/_footer.scss
+2 -2
View File
@@ -1,9 +1,9 @@
.app-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 0 $spacer;
color: $footer-color;
background: $footer-bg;
flex-wrap: wrap;
align-items: center;
@include borders($footer-borders);
}
Vue_Starter/scss/core/_layout.scss
+16 -16
View File
@@ -11,8 +11,8 @@
app-dashboard,
app-root {
display: flex;
min-height: 100vh;
flex-direction: column;
min-height: 100vh;
}
.app-header {
@@ -26,12 +26,12 @@ app-root {
.app-body {
display: flex;
flex-direction: row;
overflow-x: hidden;
flex-grow: 1;
overflow-x: hidden;
.main {
min-width: 0;
flex: 1;
min-width: 0;
}
.sidebar {
@@ -269,9 +269,11 @@ app-root {
.footer-fixed {
.app-footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: $zindex-sticky;
width: 100%;
height: $footer-height;
}
.app-body {
@@ -328,17 +330,26 @@ app-root {
margin-top: $navbar-height;
}
.breadcrumb-fixed {
.main:nth-child(2) .breadcrumb {
right: auto;
left: auto;
width: 100%;
}
}
.sidebar,
.sidebar-fixed .sidebar {
position: fixed;
z-index: $zindex-sticky - 1;
width: $mobile-sidebar-width;
height: 100%;
// height: 100%;
margin-left: - $mobile-sidebar-width;
.sidebar-nav,
.nav {
width: $mobile-sidebar-width !important;
height: calc(100vh - #{$navbar-height});
}
.sidebar-minimizer {
@@ -364,10 +375,6 @@ app-root {
.sidebar {
width: $mobile-sidebar-width;
margin-left: 0;
.sidebar-nav {
height: calc(100vh - #{$navbar-height});
}
}
.main {
@@ -375,11 +382,4 @@ app-root {
margin-left: $mobile-sidebar-width !important;
}
}
.breadcrumb-fixed {
.main .breadcrumb {
right: 0 !important;
left: 0 !important;
}
}
}
Vue_Starter/scss/core/_navbar.scss
+12 -2
View File
@@ -1,7 +1,7 @@
.app-header.navbar {
position: relative;
height: $navbar-height;
flex-direction: row;
height: $navbar-height;
padding: 0;
margin: 0;
background-color: $navbar-bg;
@@ -22,7 +22,17 @@
}
.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 {
Vue_Starter/scss/core/_sidebar.scss
+1 -1
View File
@@ -78,8 +78,8 @@
.nav {
@include sidebar-width($sidebar-borders, $sidebar-width);
min-height: 100%;
flex-direction: column;
min-height: 100%;
}
.nav-title {
Vue_Starter/scss/core/_variables.scss
+3
View File
@@ -69,6 +69,9 @@ $navbar-hover-color: $gray-800 !default;
$navbar-active-color: $gray-800 !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-width: 200px !default;
Vue_Starter/scss/style.scss
+2 -1
View File
@@ -1,10 +1,11 @@
/*!
* CoreUI - Open Source Bootstrap Admin Template
* @version v1.0.1
* @version v1.0.2
* @link http://coreui.io
* Copyright (c) 2017 creativeLabs Łukasz Holeczek
* @license MIT
*/
// Override Boostrap variables
@import "bootstrap-variables";
Vue_Starter/src/components/Breadcrumb.vue
+3 -2
View File
@@ -1,7 +1,8 @@
<template>
<ol class="breadcrumb">
<li class="breadcrumb-item" v-for="(item, index) in list"><span class="active" v-if="isLast(index)">{{ showName(item) }}</span>
<router-link :to="item.path" v-else>{{ showName(item) }}</router-link>
<li class="breadcrumb-item" v-for="(item, index) in list">
<span class="active" v-if="isLast(index)">{{ showName(item) }}</span>
<router-link :to="item" v-else>{{ showName(item) }}</router-link>
</li>
</ol>
</template>
Vue_Starter/src/components/Header.vue
+9 -3
View File
@@ -1,9 +1,15 @@
<template>
<header class="app-header navbar">
<button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="mobileSidebarToggle">&#9776;</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>
<button class="navbar-toggler sidebar-toggler d-md-down-none mr-auto" type="button" @click="sidebarToggle">&#9776;</button>
<button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" @click="asideToggle">&#9776;</button>
<button class="navbar-toggler sidebar-toggler d-md-down-none mr-auto" type="button" @click="sidebarToggle">
<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>
</template>
<script>
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@coreui/vue",
"version": "1.0.1",
"version": "1.0.2",
"description": "Open Source Vue Admin Template",
"main": "",
"homepage": "http://coreui.io/vue/",