sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 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/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>