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/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
+35 -41
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,49 +23,38 @@
<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>
export default {
name: 'header',
methods: {
sidebarToggle (e) {
e.preventDefault()
document.body.classList.toggle('sidebar-hidden')
import HeaderDropdown from './HeaderDropdown.vue'
export default {
name: 'header',
components: {
HeaderDropdown
},
sidebarMinimize (e) {
e.preventDefault()
document.body.classList.toggle('sidebar-minimized')
},
mobileSidebarToggle (e) {
e.preventDefault()
document.body.classList.toggle('sidebar-mobile-show')
},
asideToggle (e) {
e.preventDefault()
document.body.classList.toggle('aside-menu-hidden')
methods: {
sidebarToggle (e) {
e.preventDefault()
document.body.classList.toggle('sidebar-hidden')
},
sidebarMinimize (e) {
e.preventDefault()
document.body.classList.toggle('sidebar-minimized')
},
mobileSidebarToggle (e) {
e.preventDefault()
document.body.classList.toggle('sidebar-mobile-show')
},
asideToggle (e) {
e.preventDefault()
document.body.classList.toggle('aside-menu-hidden')
}
}
}
}
</script>
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>