Skip to content

Commit bdcca8d

Browse files
BelchenkovBelchenkov
committed
Layouts for Auth & Other Pages
1 parent 96addfa commit bdcca8d

File tree

13 files changed

+297
-6
lines changed

13 files changed

+297
-6
lines changed

‎package-lock.json

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
},
99
"dependencies": {
1010
"core-js": "^3.3.2",
11+
"materialize-css": "^1.0.0-rc.2",
1112
"register-service-worker": "^1.6.2",
1213
"vue": "^2.6.10",
1314
"vue-router": "^3.1.3",

‎public/index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
78
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8-
<title>money_crm_vue</title>
9+
<title>Домашняя бухгалтерия</title>
910
</head>
1011
<body>
1112
<noscript>

‎src/App.vue

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,30 @@
11
<template>
22
<div id="app">
3-
<router-view/>
3+
<component :is="layout">
4+
<router-view />
5+
</component>
46
</div>
57
</template>
68

7-
<style lang="scss">
9+
<script>
10+
import EmptyLayout from "./layouts/EmptyLayout";
11+
import MainLayout from "./layouts/MainLayout";
812
13+
export default {
14+
computed: {
15+
layout() {
16+
return (this.$route.meta.layout || 'empty') + '-layout';
17+
}
18+
},
19+
components: {
20+
EmptyLayout,
21+
MainLayout
22+
}
23+
}
24+
</script>
25+
26+
<style>
27+
@import "~materialize-css/dist/css/materialize.min.css";
28+
@import "assets/index.css";
29+
@import "assets/custom.css";
930
</style>

‎src/assets/custom.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@import url('https://fonts.googleapis.com/css?family=Cuprum:400,400i,700&display=swap&subset=cyrillic');
2+
3+
body {
4+
font-family: 'Cuprum', sans-serif;
5+
font-size: 18px;
6+
}

‎src/assets/index.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/layouts/EmptyLayout.vue

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<div class="grey darken-1 empty-layout">
3+
<router-view />
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: "EmptyLayout"
10+
}
11+
</script>
12+
13+
<style scoped>
14+
15+
</style>

‎src/layouts/MainLayout.vue

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<template>
2+
<div class="app-main-layout">
3+
<nav class="navbar grey lighten-1">
4+
<div class="nav-wrapper">
5+
<div class="navbar-left">
6+
<a href="#">
7+
<i class="material-icons black-text">dehaze</i>
8+
</a>
9+
<span class="black-text">12.12.12</span>
10+
</div>
11+
12+
<ul class="right hide-on-small-and-down">
13+
<li>
14+
<a
15+
class="dropdown-trigger black-text"
16+
href="#"
17+
data-target="dropdown"
18+
>
19+
USER NAME
20+
<i class="material-icons right">arrow_drop_down</i>
21+
</a>
22+
23+
<ul id='dropdown' class='dropdown-content'>
24+
<li>
25+
<a href="#" class="black-text">
26+
<i class="material-icons">account_circle</i>Профиль
27+
</a>
28+
</li>
29+
<li class="divider" tabindex="-1"></li>
30+
<li>
31+
<a href="#" class="black-text">
32+
<i class="material-icons">assignment_return</i>Выйти
33+
</a>
34+
</li>
35+
</ul>
36+
</li>
37+
</ul>
38+
</div>
39+
</nav>
40+
41+
<ul class="sidenav app-sidenav open">
42+
<li>
43+
<a href="#" class="waves-effect waves-orange pointer">Счет</a>
44+
</li>
45+
<li>
46+
<a href="#" class="waves-effect waves-orange pointer">История</a>
47+
</li>
48+
<li>
49+
<a href="#" class="waves-effect waves-orange pointer">Планирование</a>
50+
</li>
51+
<li>
52+
<a href="#" class="waves-effect waves-orange pointer">Новая запись</a>
53+
</li>
54+
<li>
55+
<a href="#" class="waves-effect waves-orange pointer">Категории</a>
56+
</li>
57+
</ul>
58+
59+
<main class="app-content">
60+
<div class="app-page">
61+
<router-view />
62+
</div>
63+
</main>
64+
65+
<div class="fixed-action-btn">
66+
<a class="btn-floating btn-large blue" href="#">
67+
<i class="large material-icons">add</i>
68+
</a>
69+
</div>
70+
</div>
71+
</template>
72+
73+
<script>
74+
export default {
75+
name: "MainLayout"
76+
}
77+
</script>
78+
79+
<style scoped>
80+
81+
</style>

‎src/main.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ import './registerServiceWorker'
44
import router from './router'
55
import store from './store'
66

7+
// Materialize
8+
import 'materialize-css/dist/js/materialize.min'
9+
710
Vue.config.productionTip = false
811

912
new Vue({

‎src/router/index.js

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,24 @@ const routes = [
99
path: '/',
1010
name: 'home',
1111
component: Home
12-
}
13-
]
12+
},
13+
{
14+
path: '/login',
15+
name: 'login',
16+
meta: {
17+
layout: 'empty'
18+
},
19+
component: () => import('../views/Login.vue')
20+
},
21+
{
22+
path: '/categories',
23+
name: 'categories',
24+
meta: {
25+
layout: 'main'
26+
},
27+
component: () => import('../views/Categories.vue')
28+
},
29+
];
1430

1531
const router = new VueRouter({
1632
mode: 'history',

0 commit comments

Comments
 (0)