From 70897c0e9a0e8b1e99c307d0f0672ac945ce9774 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 20 Oct 2018 09:28:48 +0900
Subject: [PATCH] :art:

---
 locales/ja-JP.yml                                   |  4 ++++
 src/client/app/desktop/views/components/notes.vue   | 13 ++++++++++---
 .../app/desktop/views/pages/deck/deck.notes.vue     | 13 ++++++++++---
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 9d5b052ef..7eced56ef 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -124,6 +124,10 @@ common:
 
   do-not-use-in-production: 'これは開発ビルドです。本番環境で使用しないでください。'
 
+  error:
+    title: '問題が発生しました'
+    retry: 'やり直す'
+
   reversi:
     drawn: "引き分け"
     my-turn: "あなたのターンです"
diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index 38a27a129..023f15bd9 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -4,9 +4,9 @@
 
 	<slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot>
 
-	<div v-if="!fetching && requestInitPromise != null">
-		<p>%i18n:@error%</p>
-		<button @click="resolveInitPromise">%i18n:@retry%</button>
+	<div v-if="!fetching && requestInitPromise != null" class="error">
+		<p>%fa:exclamation-triangle% %i18n:common.error.title%</p>
+		<ui-button @click="resolveInitPromise">%i18n:common.error.retry%</ui-button>
 	</div>
 
 	<div class="placeholder" v-if="fetching">
@@ -215,6 +215,13 @@ export default Vue.extend({
 		> *
 			transition transform .3s ease, opacity .3s ease
 
+	> .error
+		max-width 300px
+		margin 0 auto
+		padding 16px
+		text-align center
+		color var(--text)
+
 	> .placeholder
 		padding 32px
 		opacity 0.3
diff --git a/src/client/app/desktop/views/pages/deck/deck.notes.vue b/src/client/app/desktop/views/pages/deck/deck.notes.vue
index ec1298369..e545f1825 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notes.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notes.vue
@@ -8,9 +8,9 @@
 		</template>
 	</div>
 
-	<div v-if="!fetching && requestInitPromise != null">
-		<p>%i18n:@error%</p>
-		<button @click="resolveInitPromise">%i18n:@retry%</button>
+	<div v-if="!fetching && requestInitPromise != null" class="error">
+		<p>%fa:exclamation-triangle% %i18n:common.error.title%</p>
+		<ui-button @click="resolveInitPromise">%i18n:common.error.retry%</ui-button>
 	</div>
 
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
@@ -226,6 +226,13 @@ export default Vue.extend({
 		> *
 			transition transform .3s ease, opacity .3s ease
 
+	> .error
+		max-width 300px
+		margin 0 auto
+		padding 16px
+		text-align center
+		color var(--text)
+
 	> .placeholder
 		padding 16px
 		opacity 0.3