Skip to content

Commit b3ea566

Browse files
author
Mikhail
committedAug 23, 2020
Full project localization
1 parent e1386c3 commit b3ea566

29 files changed

+704
-144
lines changed
 

‎.env

+1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
VUE_APP_FIXER=12a815d9cb419f00b9052890e4ff4a0f
2+
VUE_APP_TITLE=Mikhail CRM

‎guide.txt

+29
Original file line numberDiff line numberDiff line change
@@ -591,3 +591,32 @@ Vue.filter('localize', localizeFilter)
591591

592592
Для перерендеринга сайдбара внутри MainLayout.vue добавим динамическое компьютид свойство locale()
593593
Привяжем его к атрибуту :key сайдбара, чтобы форсировать перерендеринг
594+
595+
********** 20 **********
596+
597+
29.
598+
Устанавливаем пакет vue-meta
599+
Он позволяет изменять <title> в блоке <head> для каждой страницы
600+
npm install --save vue-meta
601+
602+
В файле main.js добавляем данный плагин и регистрируем его
603+
import VueMeta from 'vue-meta'
604+
Vue.use(VueMeta)
605+
606+
После чего на каждой странице можно добавлять поле metaInfo в <script>
607+
Если записать его как метод, то <title> будет динамически изменяться
608+
При записи его как свойства такого эффекта нет
609+
610+
Добавляем к <title> название приложения
611+
Прописываем его в глобальной переменной VUE_APP_TITLE внутри .env
612+
613+
Создаём плагин utils/title.plugin.js
614+
Регистрируем его в файле main.js
615+
Vue.use(titlePlugin)
616+
617+
Деплой проекта
618+
npm install -g firebase-tools
619+
620+
firebase login
621+
firebase init
622+
firebase deploy

‎package-lock.json

+15
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"register-service-worker": "^1.7.1",
1616
"vue": "^2.6.11",
1717
"vue-chartjs": "^3.5.0",
18+
"vue-meta": "^2.4.0",
1819
"vue-router": "^3.2.0",
1920
"vuejs-paginate": "^2.1.0",
2021
"vuelidate": "^0.7.5",

‎src/assets/index.css

+188-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,188 @@
1-
.empty-layout{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-ms-flex-align:center;align-items:center;padding-top:5rem;height:100vh}.auth-card{width:500px}.auth-submit{width:100%}.helper-text.invalid{color:#f44336}.app-page{padding:2rem}.app-main-layout{position:relative;min-height:100vh}.app-sidenav{padding-top:5px;position:absolute;top:64px;width:250px;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;bottom:0!important;height:auto!important}.app-sidenav.open{-webkit-transform:translateX(0);transform:translateX(0)}.navbar{position:absolute;top:0;left:0;width:100%;height:64px!important;padding:0 2rem;z-index:1000}.nav-wrapper{-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.nav-wrapper,.navbar-left{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.navbar-left>a{margin-right:1rem}.app-content{padding-top:64px;padding-left:250px;transition:padding-left .3s;position:relative}.app-content.full{padding-left:0}.page-title{-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-ms-flex-align:center;align-items:center;padding-bottom:1rem;border-bottom:solid 1px rgba(51,51,51,.12)}.page-title a{color:#000;opacity:.8}.page-subtitle h4,.page-title h3,.page-title h4{margin:0;font-size:2rem}.page-subtitle h4,.page-title{margin-bottom:2rem}.app-loader,.currency-line,.page-title{display:-webkit-flex;display:-ms-flexbox;display:flex}.app-loader{width:100%;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding-top:2rem}.currency-line{-webkit-align-items:center;-ms-flex-align:center;align-items:center;border-bottom:2px solid #fff;padding-bottom:1rem;padding-top:1.5rem}.currency-line span{font-size:1.5rem}.bill-card{height:310px}.pointer{cursor:pointer}.form{max-width:500px}.breadcrumb-wrap,.breadcrumb-wrap a,.breadcrumb-wrap a:before{-webkit-align-items:center;-ms-flex-align:center;align-items:center}.breadcrumb-wrap{position:relative;display:-webkit-flex;display:-ms-flexbox;display:flex}.breadcrumb-wrap a,.breadcrumb-wrap a:before{display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;color:rgba(0,0,0,.7)!important}.history-chart{max-width:600px;margin:0 auto}
1+
.empty-layout {
2+
display: -webkit-flex;
3+
display: -ms-flexbox;
4+
display: flex;
5+
-webkit-flex-direction: column;
6+
-ms-flex-direction: column;
7+
flex-direction: column;
8+
-webkit-align-items: center;
9+
-ms-flex-align: center;
10+
align-items: center;
11+
padding-top: 5rem;
12+
height: 100vh;
13+
}
14+
15+
.auth-card {
16+
width: 500px;
17+
}
18+
19+
.auth-submit {
20+
width: 100%;
21+
}
22+
23+
.helper-text.invalid {
24+
color: #f44336;
25+
}
26+
27+
.app-page {
28+
padding: 2rem;
29+
}
30+
31+
.app-main-layout {
32+
position: relative;
33+
min-height: 100vh;
34+
}
35+
36+
.app-sidenav {
37+
padding-top: 5px;
38+
position: absolute;
39+
top: 64px;
40+
width: 250px;
41+
transition: transform .3s;
42+
transition: transform .3s, -webkit-transform .3s;
43+
bottom: 0!important;
44+
height: auto!important;
45+
}
46+
47+
.app-sidenav.open {
48+
-webkit-transform: translateX(0);
49+
transform: translateX(0);
50+
}
51+
52+
.navbar {
53+
position: absolute;
54+
top: 0;
55+
left: 0;
56+
width: 100%;
57+
height: 64px!important;
58+
padding: 0 2rem;
59+
z-index: 1000;
60+
}
61+
62+
.nav-wrapper {
63+
-webkit-justify-content: space-between;
64+
-ms-flex-pack: justify;
65+
justify-content: space-between;
66+
}
67+
68+
.nav-wrapper,
69+
.navbar-left {
70+
display: -webkit-flex;
71+
display: -ms-flexbox;
72+
display: flex;
73+
-webkit-align-items: center;
74+
-ms-flex-align: center;
75+
align-items: center;
76+
}
77+
78+
.navbar-left > a {
79+
margin-right: 1rem;
80+
}
81+
82+
.app-content {
83+
padding-top: 64px;
84+
padding-left: 250px;
85+
transition: padding-left .3s;
86+
position: relative;
87+
}
88+
89+
.app-content.full {
90+
padding-left: 0;
91+
}
92+
93+
.page-title {
94+
-webkit-justify-content: space-between;
95+
-ms-flex-pack: justify;
96+
justify-content: space-between;
97+
-webkit-align-items: center;
98+
-ms-flex-align: center;
99+
align-items: center;
100+
padding-bottom: 1rem;
101+
border-bottom: solid 1px rgba(51,51,51,.12);
102+
}
103+
104+
.page-title a {
105+
color: #000;
106+
opacity: .8;
107+
}
108+
109+
.page-subtitle h4,
110+
.page-title h3,
111+
.page-title h4 {
112+
margin: 0;
113+
font-size: 2rem;
114+
}
115+
116+
.page-subtitle h4,
117+
.page-title {
118+
margin-bottom: 2rem;
119+
}
120+
121+
.app-loader,
122+
.currency-line,
123+
.page-title {
124+
display: -webkit-flex;
125+
display: -ms-flexbox;
126+
display: flex;
127+
}
128+
129+
.app-loader {
130+
width: 100%;
131+
-webkit-justify-content: center;
132+
-ms-flex-pack: center;
133+
justify-content: center;
134+
padding-top: 2rem;
135+
}
136+
137+
.currency-line {
138+
-webkit-align-items: center;
139+
-ms-flex-align: center;
140+
align-items: center;
141+
border-bottom: 2px solid #fff;
142+
padding-bottom: 1rem;
143+
padding-top: 1.5rem;
144+
}
145+
146+
.currency-line span {
147+
font-size: 1.5rem;
148+
}
149+
150+
.bill-card {
151+
height: 310px;
152+
}
153+
154+
.pointer {
155+
cursor: pointer;
156+
}
157+
158+
.form {
159+
max-width: 500px;
160+
}
161+
162+
.breadcrumb-wrap,
163+
.breadcrumb-wrap a,
164+
.breadcrumb-wrap a:before {
165+
-webkit-align-items: center;
166+
-ms-flex-align: center;
167+
align-items: center;
168+
}
169+
170+
.breadcrumb-wrap {
171+
position: relative;
172+
display: -webkit-flex;
173+
display: -ms-flexbox;
174+
display: flex;
175+
}
176+
177+
.breadcrumb-wrap a,
178+
.breadcrumb-wrap a:before {
179+
display: -webkit-inline-flex;
180+
display: -ms-inline-flexbox;
181+
display: inline-flex;
182+
color: rgba(0,0,0,.7)!important;
183+
}
184+
185+
.history-chart {
186+
max-width: 600px;
187+
margin: 0 auto;
188+
}

‎src/components/CategoryCreate.vue

+15-10
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="col s12 m6">
33
<div>
44
<div class="page-subtitle">
5-
<h4>Создать</h4>
5+
<h4>{{'Category_Create' | localize}}</h4>
66
</div>
77

88
<form @submit.prevent="submitHandler">
@@ -13,29 +13,33 @@
1313
v-model="title"
1414
:class="{invalid: $v.title.$dirty && !$v.title.required}"
1515
>
16-
<label for="name">Название</label>
16+
<label for="name">{{'Category_Name' | localize}}</label>
1717
<span
1818
v-if="$v.title.$dirty && !$v.title.required"
1919
class="helper-text invalid"
20-
>Введите название категории</span>
20+
>{{'Category_Enter_Name' | localize}}</span>
2121
</div>
2222

2323
<div class="input-field">
2424
<input
2525
id="limit"
2626
type="number"
2727
v-model.number="limit"
28-
:class="{invalid: $v.limit.$dirty && !$v.limit.minValue}"
28+
:class="{invalid: ($v.limit.$dirty && !$v.limit.required) || ($v.limit.$dirty && !$v.limit.minValue)}"
2929
>
30-
<label for="limit">Лимит</label>
30+
<label for="limit">{{'Category_Limit' | localize}}</label>
3131
<span
32-
v-if="$v.limit.$dirty && !$v.limit.minValue"
32+
v-if="$v.limit.$dirty && !$v.limit.required"
3333
class="helper-text invalid"
34-
>Минимальное значение {{$v.limit.$params.minValue.min}}</span>
34+
>{{'Category_Limit_Not_Empty' | localize}}</span>
35+
<span
36+
v-else-if="$v.limit.$dirty && !$v.limit.minValue"
37+
class="helper-text invalid"
38+
>{{'Category_Minimal' | localize}} {{$v.limit.$params.minValue.min}}</span>
3539
</div>
3640

3741
<button class="btn waves-effect waves-light" type="submit">
38-
Создать
42+
{{'Create' | localize}}
3943
<i class="material-icons right">send</i>
4044
</button>
4145
</form>
@@ -45,6 +49,7 @@
4549

4650
<script>
4751
import {required, minValue} from 'vuelidate/lib/validators'
52+
import localizeFilter from '@/filters/localize.filter'
4853
4954
export default {
5055
name: 'category-create',
@@ -54,7 +59,7 @@ export default {
5459
}),
5560
validations: {
5661
title: {required},
57-
limit: {minValue: minValue(100)}
62+
limit: {required, minValue: minValue(100)}
5863
},
5964
mounted() {
6065
window.M.updateTextFields()
@@ -74,7 +79,7 @@ export default {
7479
this.title = ''
7580
this.limit = 100
7681
this.$v.$reset()
77-
this.$message('Категория была создана')
82+
this.$message(localizeFilter('Message_Category_Created'))
7883
this.$emit('created', category)
7984
} catch (e) {}
8085
}

0 commit comments

Comments
 (0)
Please sign in to comment.