11<template >
2- <div class =" cms-activation" >
3- <div
4- class =" cms-activation__title d-none d-md-block"
5- >
6- {{ $t('textTitle') }}
7- </div >
8- <div
9- class =" cms-activation__checkbox"
10- :class =" {'cms-activation__checkbox_on': information.status}"
11- @click =" handleClick"
12- >
13- <div >
14- <div
15- v-if =" loading"
16- class =" loader"
17- >
18- <b-spinner />
19- </div >
20- </div >
21- </div >
22- <div class =" cms-activation__status_text" >
23- {{ information.status ? $t('textOn'): $t('textOff') }}
24- </div >
25- <modal
26- v-model =" popup"
27- class =" cms-activation__modal"
28- btn-close
29- >
30- <div class =" text-center" >
31- <img
32- :src =" require('~/assets/img/rocket.png')"
33- class =" cms-activation__modal__image"
34- width =" 200"
35- alt =" "
36- >
37- </div >
38- <div class =" cms-activation__modal__title" >
39- {{ $t('popupTitle') }}
40- </div >
41- <div class =" cms-activation__modal__subtitle" >
42- {{ $t('subTitlePopup') }} <a
43- @click.prevent.stop =" handleSearch"
44- >{{ $t('text_bellow') }}</a >.
45- </div >
46- <!-- eslint-disable vue/no-v-html -->
2+ <div >
3+ <div class =" cms-activation" >
474 <div
48- v-if =" information.htaccess"
49- class =" cms-activation__modal__description"
50- v-html =" $t('descriptionPopup').replace('[path]', `${information.backup}`)"
51- />
52- <div
53- class =" cms-activation__modal__footer_title"
5+ class =" cms-activation__title d-none d-md-block"
546 >
55- {{ $t('footerTitlePopup ') }}
7+ {{ $t('textTitle ') }}
568 </div >
57- <div class =" text-center" >
58- <div
59- v-if =" error"
60- class =" cms-activation__modal__error"
61- >
62- {{ $t(error) }}
9+ <div
10+ class =" cms-activation__checkbox"
11+ :class =" {'cms-activation__checkbox_on': information.status}"
12+ @click =" handleClick"
13+ >
14+ <div >
15+ <div
16+ v-if =" loading"
17+ class =" loader"
18+ >
19+ <b-spinner />
20+ </div >
6321 </div >
6422 </div >
65- <div class =" text-center" >
66- <b-button
67- :disabled =" loading"
68- variant =" success"
69- size =" lg"
70- @click =" handleConfirm"
71- >
72- <b-spinner
73- v-if =" loading"
74- type =" grow"
75- />
76- {{ $t('buttonConfirm') }}
77- </b-button >
23+ <div class =" cms-activation__status_text" >
24+ {{ information.status ? $t('textOn'): $t('textOff') }}
7825 </div >
79- <div class =" text-center" >
26+ <modal
27+ v-model =" popup"
28+ class =" cms-activation__modal"
29+ btn-close
30+ >
31+ <div class =" text-center" >
32+ <img
33+ :src =" require('~/assets/img/rocket.png')"
34+ class =" cms-activation__modal__image"
35+ width =" 200"
36+ alt =" "
37+ >
38+ </div >
39+ <div class =" cms-activation__modal__title" >
40+ {{ $t('popupTitle') }}
41+ </div >
42+ <div class =" cms-activation__modal__subtitle" >
43+ {{ $t('subTitlePopup') }} <a
44+ @click.prevent.stop =" handleSearch"
45+ >{{ $t('text_bellow') }}</a >.
46+ </div >
47+ <!-- eslint-disable vue/no-v-html -->
8048 <div
81- class =" cms-activation__modal__footer_link"
82- @click =" popup = false"
49+ v-if =" information.htaccess"
50+ class =" cms-activation__modal__description"
51+ v-html =" $t('descriptionPopup').replace('[path]', `${information.backup}`)"
52+ />
53+ <div
54+ class =" cms-activation__modal__footer_title"
8355 >
84- {{ $t('buttonAbort ') }}
56+ {{ $t('footerTitlePopup ') }}
8557 </div >
86- </div >
87- <div class =" text-center" >
88- <img
89- :src =" require('~/assets/img/footer-modal.svg')"
90- class =" cms-activation__modal__footer_image"
91- alt =" "
92- >
93- </div >
94- </modal >
58+ <div class =" text-center" >
59+ <div
60+ v-if =" error"
61+ class =" cms-activation__modal__error"
62+ >
63+ {{ $t(error) }}
64+ </div >
65+ </div >
66+ <div class =" text-center" >
67+ <b-button
68+ :disabled =" loading"
69+ variant =" success"
70+ size =" lg"
71+ @click =" handleConfirm"
72+ >
73+ <b-spinner
74+ v-if =" loading"
75+ type =" grow"
76+ />
77+ {{ $t('buttonConfirm') }}
78+ </b-button >
79+ </div >
80+ <div class =" text-center" >
81+ <div
82+ class =" cms-activation__modal__footer_link"
83+ @click =" popup = false"
84+ >
85+ {{ $t('buttonAbort') }}
86+ </div >
87+ </div >
88+ <div class =" text-center" >
89+ <img
90+ :src =" require('~/assets/img/footer-modal.svg')"
91+ class =" cms-activation__modal__footer_image"
92+ alt =" "
93+ >
94+ </div >
95+ </modal >
96+ </div >
9597 </div >
9698</template >
9799<script >
@@ -118,7 +120,7 @@ export default {
118120 methods: {
119121 async handleClick () {
120122 if (! this .information .status ) {
121- this .popup = true
123+ this .popup = true
122124 } else {
123125 this .loading = true
124126 await this .$store .dispatch (' information/deActivateVueFront' , {url: this .cms .downloadUrl })
@@ -147,7 +149,7 @@ export default {
147149}
148150 </script >
149151<i18n locale="en">
150- {
152+ {
151153 "textTitle":"Frontend Web App status",
152154 "textOn":"On",
153155 "textOff":"Off",
@@ -159,7 +161,7 @@ export default {
159161 "buttonAbort": "Abort",
160162 "footerTitlePopup": "Ready to turn your website into a PWA and SPA?",
161163 "not_writable_htaccess": "File permissions. Please add writing permissions to the following files and folder: .htaccess"
162- }
164+ }
163165</i18n >
164166<style lang="scss">
165167 .cms-activation {
@@ -264,58 +266,58 @@ export default {
264266 user-select : none ;
265267 }
266268 & __checkbox {
267- width : 87px ;
268- height : 48px ;
269- border-radius : 25px ;
270- border : solid 1px #d4d4d4 ;
271- background-color : $white ;
272- margin-right : 13px ;
273- padding : 0 5px ;
274- display : flex ;
275- align-items : center ;
276- justify-content : flex-start ;
277- cursor : pointer ;
278- user-select : none ;
269+ width : 87px ;
270+ height : 48px ;
271+ border-radius : 25px ;
272+ border : solid 1px #d4d4d4 ;
273+ background-color : $white ;
274+ margin-right : 13px ;
275+ padding : 0 5px ;
276+ display : flex ;
277+ align-items : center ;
278+ justify-content : flex-start ;
279+ cursor : pointer ;
280+ user-select : none ;
279281
280- div {
281- display : block ;
282- width : 38px ;
283- height : 38px ;
284- background-color : #c5c5c5 ;
285- border-radius : 50% ;
286- position : relative ;
287- .loader {
288- display : flex ;
289- justify-content : center ;
290- align-items : center ;
291- position : absolute ;
292- top : 0 ;
293- left : 0 ;
294- width : 100% ;
295- height : 100% ;
296- color : #fff ;
297- }
282+ div {
283+ display : block ;
284+ width : 38px ;
285+ height : 38px ;
286+ background-color : #c5c5c5 ;
287+ border-radius : 50% ;
288+ position : relative ;
289+ .loader {
290+ display : flex ;
291+ justify-content : center ;
292+ align-items : center ;
293+ position : absolute ;
294+ top : 0 ;
295+ left : 0 ;
296+ width : 100% ;
297+ height : 100% ;
298+ color : #fff ;
298299 }
300+ }
299301
300- & _on {
301- justify-content : flex-end ;
302- div {
303- background-color : $dark-mint ;
304- }
302+ & _on {
303+ justify-content : flex-end ;
304+ div {
305+ background-color : $dark-mint ;
305306 }
307+ }
306308 }
307309 & __status_text {
308- font-family : ' Open Sans' , sans-serif ;
309- font-size : 24px ;
310- font-weight : normal ;
311- font-stretch : normal ;
312- font-style : normal ;
313- line-height : 1.38 ;
314- letter-spacing : 0.24px ;
315- text-align : left ;
316- color : $black ;
317- user-select : none ;
318- min-width : 35px ;
310+ font-family : ' Open Sans' , sans-serif ;
311+ font-size : 24px ;
312+ font-weight : normal ;
313+ font-stretch : normal ;
314+ font-style : normal ;
315+ line-height : 1.38 ;
316+ letter-spacing : 0.24px ;
317+ text-align : left ;
318+ color : $black ;
319+ user-select : none ;
320+ min-width : 35px ;
319321 }
320322 }
321323 </style >
0 commit comments