[Client] Improve error screen rendering

This commit is contained in:
syuilo 2017-06-11 21:26:09 +09:00
parent 9e94f6097e
commit 6a715c97ca
3 changed files with 24 additions and 21 deletions

View File

@ -52,7 +52,7 @@ common:
no-apps: "No apps"
mk-error:
title: "Cannot connect to the server"
title: "Unable to connect to the server"
description: "インターネット回線に問題があるか、サーバーがダウンまたはメンテナンスしている可能性があります。しばらくしてから再度お試しください。"
thanks: "Thank you for using Misskey."

View File

@ -1,36 +1,25 @@
<mk-error>
<!--i: i.fa.fa-times-circle-->
<img src="/assets/error.jpg" alt=""/>
<h1>%i18n:common.tags.mk-error.title%</h1>
<p class="text">%i18n:common.tags.mk-error.description%</p>
<p class="thanks">%i18n:common.tags.mk-error.thanks%</p>
<style>
:scope
position fixed
z-index 100000
top 0
left 0
display block
width 100%
height 100%
padding 32px 18px
text-align center
background #f8f8f8
> i
display block
margin-top 64px
font-size 5em
color #6998a0
> img
display block
height 200px
margin 64px auto 0 auto
margin 0 auto
pointer-events none
user-select none
> h1
display block
margin 32px auto 16px auto
margin 1.25em auto 0.65em auto
font-size 1.5em
color #555
@ -43,13 +32,25 @@
> .thanks
display block
margin 32px auto 0 auto
padding 32px 0 32px 0
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>
<script>
this.on('mount', () => {
document.documentElement.style.background = '#f8f8f8';
});
</script>
</mk-error>

View File

@ -9,6 +9,7 @@ import api from './common/scripts/api';
import signout from './common/scripts/signout';
import checkForUpdate from './common/scripts/check-for-update';
import Connection from './common/scripts/home-stream';
import Progress from './common/scripts/loading';
import mixin from './common/mixins';
import generateDefaultUserdata from './common/scripts/generate-default-userdata';
import CONFIG from './common/scripts/config';
@ -147,9 +148,10 @@ function fetchme(token, cb) {
me.data ? done() : init();
});
}, () => { // When failure
// Display error screen
riot.mount(document.body.appendChild(
document.createElement('mk-error')));
// Render the error screen
document.body.innerHTML = '<mk-error />';
riot.mount('*');
Progress.done();
});
function done() {