2018-02-21 06:34:49 -06:00
|
|
|
<template>
|
|
|
|
|
<div class="mk-connect-failed">
|
|
|
|
|
<img src="data:image/jpeg;base64,%base64:/assets/error.jpg%" alt=""/>
|
2018-04-14 11:04:40 -05:00
|
|
|
<h1>%i18n:@title%</h1>
|
2018-02-21 06:34:49 -06:00
|
|
|
<p class="text">
|
2018-05-20 06:26:38 -05:00
|
|
|
<span>{{ '%i18n:@description%'.substr(0, '%i18n:@description%'.indexOf('{')) }}</span>
|
|
|
|
|
<a @click="reload">{{ '%i18n:@description%'.match(/\{(.+?)\}/)[1] }}</a>
|
|
|
|
|
<span>{{ '%i18n:@description%'.substr('%i18n:@description%'.indexOf('}') + 1) }}</span>
|
2018-02-21 06:34:49 -06:00
|
|
|
</p>
|
2018-04-14 11:04:40 -05:00
|
|
|
<button v-if="!troubleshooting" @click="troubleshooting = true">%i18n:@troubleshoot%</button>
|
2018-02-21 06:34:49 -06:00
|
|
|
<x-troubleshooter v-if="troubleshooting"/>
|
2018-04-14 11:04:40 -05:00
|
|
|
<p class="thanks">%i18n:@thanks%</p>
|
2018-02-21 06:34:49 -06:00
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
|
import Vue from 'vue';
|
|
|
|
|
import XTroubleshooter from './connect-failed.troubleshooter.vue';
|
|
|
|
|
|
|
|
|
|
export default Vue.extend({
|
|
|
|
|
components: {
|
|
|
|
|
XTroubleshooter
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
troubleshooting: false
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
document.title = 'Oops!';
|
|
|
|
|
document.documentElement.style.background = '#f8f8f8';
|
2018-02-21 14:16:38 -06:00
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
reload() {
|
2018-04-16 01:39:35 -05:00
|
|
|
location.reload(true);
|
2018-02-21 14:16:38 -06:00
|
|
|
}
|
2018-02-21 06:34:49 -06:00
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="stylus" scoped>
|
2018-03-02 22:47:55 -06:00
|
|
|
@import '~const.styl'
|
|
|
|
|
|
2018-02-21 06:34:49 -06:00
|
|
|
.mk-connect-failed
|
|
|
|
|
width 100%
|
|
|
|
|
padding 32px 18px
|
|
|
|
|
text-align center
|
|
|
|
|
|
|
|
|
|
> img
|
|
|
|
|
display block
|
|
|
|
|
height 200px
|
|
|
|
|
margin 0 auto
|
|
|
|
|
pointer-events none
|
|
|
|
|
user-select none
|
|
|
|
|
|
|
|
|
|
> h1
|
|
|
|
|
display block
|
|
|
|
|
margin 1.25em auto 0.65em auto
|
|
|
|
|
font-size 1.5em
|
|
|
|
|
color #555
|
|
|
|
|
|
|
|
|
|
> .text
|
|
|
|
|
display block
|
|
|
|
|
margin 0 auto
|
|
|
|
|
max-width 600px
|
|
|
|
|
font-size 1em
|
|
|
|
|
color #666
|
|
|
|
|
|
|
|
|
|
> button
|
|
|
|
|
display block
|
|
|
|
|
margin 1em auto 0 auto
|
|
|
|
|
padding 8px 10px
|
|
|
|
|
color $theme-color-foreground
|
|
|
|
|
background $theme-color
|
|
|
|
|
|
|
|
|
|
&:focus
|
|
|
|
|
outline solid 3px rgba($theme-color, 0.3)
|
|
|
|
|
|
|
|
|
|
&:hover
|
|
|
|
|
background lighten($theme-color, 10%)
|
|
|
|
|
|
|
|
|
|
&:active
|
|
|
|
|
background darken($theme-color, 10%)
|
|
|
|
|
|
|
|
|
|
> .thanks
|
|
|
|
|
display block
|
|
|
|
|
margin 2em auto 0 auto
|
|
|
|
|
padding 2em 0 0 0
|
|
|
|
|
max-width 600px
|
|
|
|
|
font-size 0.9em
|
|
|
|
|
font-style oblique
|
|
|
|
|
color #aaa
|
|
|
|
|
border-top solid 1px #eee
|
|
|
|
|
|
|
|
|
|
@media (max-width 500px)
|
|
|
|
|
padding 24px 18px
|
|
|
|
|
font-size 80%
|
|
|
|
|
|
|
|
|
|
> img
|
|
|
|
|
height 150px
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
