amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Client] Improve error screen rendering

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
locales/en.yml
View File

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

37
src/web/app/common/tags/error.tag
View File

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

8
src/web/app/init.js
View File

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