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

refactor: refactoring template

Browse Source
This commit is contained in:
woothu
2018-11-23 15:26:30 +01:00
parent f7a2634748
commit 74b325afc5
64 changed files with 1261 additions and 1634 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/containers/DefaultAside.vue
+5 -5
View File
@@ -102,7 +102,7 @@
<div class="py-3 pb-5 mr-3 float-left">
<div class="avatar">
<img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
<b-badge variant="success" class="avatar-status"></b-badge>
<CBadge variant="success" class="avatar-status"/>
</div>
</div>
<div>
@@ -117,7 +117,7 @@
<div class="py-3 pb-5 mr-3 float-left">
<div class="avatar">
<img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
<b-badge variant="danger" class="avatar-status"></b-badge>
<c-badge variant="danger" class="avatar-status"></c-badge>
</div>
</div>
<div>
@@ -132,7 +132,7 @@
<div class="py-3 pb-5 mr-3 float-left">
<div class="avatar">
<img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
<b-badge variant="info" class="avatar-status"></b-badge>
<c-badge variant="info" class="avatar-status"></c-badge>
</div>
</div>
<div>
@@ -147,7 +147,7 @@
<div class="py-3 pb-5 mr-3 float-left">
<div class="avatar">
<img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
<b-badge variant="warning" class="avatar-status"></b-badge>
<c-badge variant="warning" class="avatar-status"></c-badge>
</div>
</div>
<div>
@@ -162,7 +162,7 @@
<div class="py-3 pb-5 mr-3 float-left">
<div class="avatar">
<img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
<b-badge variant="dark" class="avatar-status"></b-badge>
<c-badge variant="dark" class="avatar-status"></c-badge>
</div>
</div>
<div>
src/containers/DefaultContainer.vue
+2 -11
View File
@@ -37,7 +37,7 @@
<SidebarMinimizer/>
</AppSidebar>
<main class="main">
<Breadcrumb :list="list"/>
<CBreadcrumbRouter/>
<div class="container-fluid">
<router-view></router-view>
</div>
@@ -63,7 +63,7 @@
<script>
import nav from '@/_nav'
import { Header as AppHeader, SidebarToggler, Sidebar as AppSidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, Aside as AppAside, AsideToggler, Footer as TheFooter, Breadcrumb } from '@coreui/vue'
import { Header as AppHeader, SidebarToggler, Sidebar as AppSidebar, SidebarFooter,SidebarNav, SidebarForm, SidebarHeader, SidebarMinimizer, Aside as AppAside, AsideToggler, Footer as TheFooter } from '@coreui/vue'
import DefaultAside from './DefaultAside'
import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
@@ -75,7 +75,6 @@ export default {
AppSidebar,
AppAside,
TheFooter,
Breadcrumb,
DefaultAside,
DefaultHeaderDropdownAccnt,
SidebarForm,
@@ -89,14 +88,6 @@ export default {
return {
nav: nav.items
}
},
computed: {
name () {
return this.$route.name
},
list () {
return this.$route.matched.filter((route) => route.name || route.meta.label )
}
}
}
</script>
src/containers/DefaultHeaderDropdownAccnt.vue
+35 -39
View File
@@ -1,54 +1,50 @@
<template>
<AppHeaderDropdown right no-caret>
<template slot="header">
<c-nav-item-dropdown no-caret right>
<template slot="button-content">
<img
src="img/avatars/6.jpg"
class="img-avatar"
alt="admin@bootstrapmaster.com" />
</template>\
<template slot="dropdown">
<b-dropdown-header tag="div" class="text-center"><strong>Account</strong></b-dropdown-header>
<b-dropdown-item><i class="fa fa-bell-o" /> Updates
<b-badge variant="info">{{ itemsCount }}</b-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-envelope-o" /> Messages
<b-badge variant="success">{{ itemsCount }}</b-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-tasks" /> Tasks
<b-badge variant="danger">{{ itemsCount }}</b-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-comments" /> Comments
<b-badge variant="warning">{{ itemsCount }}</b-badge>
</b-dropdown-item>
<b-dropdown-header
tag="div"
class="text-center">
<strong>Settings</strong>
</b-dropdown-header>
<b-dropdown-item><i class="fa fa-user" /> Profile</b-dropdown-item>
<b-dropdown-item><i class="fa fa-wrench" /> Settings</b-dropdown-item>
<b-dropdown-item><i class="fa fa-usd" /> Payments
<b-badge variant="secondary">{{ itemsCount }}</b-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-file" /> Projects
<b-badge variant="primary">{{ itemsCount }}</b-badge>
</b-dropdown-item>
<b-dropdown-divider />
<b-dropdown-item><i class="fa fa-shield" /> Lock Account</b-dropdown-item>
<b-dropdown-item><i class="fa fa-lock" /> Logout</b-dropdown-item>
</template>
</AppHeaderDropdown>
<b-dropdown-header tag="div" class="text-center"><strong>Account</strong></b-dropdown-header>
<b-dropdown-item><i class="fa fa-bell-o" /> Updates
<c-badge variant="info" additionalClasses="hehe">{{ itemsCount }}</c-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-envelope-o" /> Messages
<c-badge variant="success">{{ itemsCount }}</c-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-tasks" /> Tasks
<c-badge variant="danger">{{ itemsCount }}</c-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-comments" /> Comments
<c-badge variant="warning">{{ itemsCount }}</c-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" /> Profile</b-dropdown-item>
<b-dropdown-item><i class="fa fa-wrench" /> Settings</b-dropdown-item>
<b-dropdown-item><i class="fa fa-usd" /> Payments
<c-badge variant="secondary">{{ itemsCount }}</c-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-file" /> Projects
<c-badge variant="primary">{{ itemsCount }}</c-badge>
</b-dropdown-item>
<b-dropdown-divider />
<b-dropdown-item><i class="fa fa-shield" /> Lock Account</b-dropdown-item>
<b-dropdown-item><i class="fa fa-lock" /> Logout</b-dropdown-item>
</c-nav-item-dropdown>
</template>
<script>
import { HeaderDropdown as AppHeaderDropdown } from '@coreui/vue'
export default {
name: 'DefaultHeaderDropdownAccnt',
components: {
AppHeaderDropdown
},
data: () => {
return { itemsCount: 42 }
}
},
}
</script>