From 8050f772caeedafffab6e3ec2f309205a019f3d0 Mon Sep 17 00:00:00 2001
From: Ben Beltran <ben@nsovocal.com>
Date: Sat, 20 Jun 2020 14:58:26 +0200
Subject: Add internationalized error block

---
 app/components/error_block/error_block.svelte | 31 +++++++++++++++++++++++++++
 app/components/forum_list/forum_list.svelte   |  5 +++++
 app/components/topic_index/topic_index.svelte |  2 ++
 3 files changed, 38 insertions(+)
 create mode 100644 app/components/error_block/error_block.svelte

(limited to 'app/components')

diff --git a/app/components/error_block/error_block.svelte b/app/components/error_block/error_block.svelte
new file mode 100644
index 0000000..d649fb4
--- /dev/null
+++ b/app/components/error_block/error_block.svelte
@@ -0,0 +1,31 @@
+<script>
+  import { _ } from 'svelte-i18n';
+  export let message = $_('error.generic.message');
+</script>
+
+<div>
+  <h2>{$_('error.generic.title')}</h2>
+  <p>{message}</p>
+</div>
+
+<style>
+  div {
+    background: repeating-linear-gradient( -45deg, red, red 5px, black 5px, black 10px );
+    border: 5px solid red;
+    color: yellow;
+    font-family: 'ヒラギノ角ゴ ProN' , 'Hiragino Kaku Gothic ProN' , '游ゴシック' , '游ゴシック体' , YuGothic , 'Yu Gothic' , 'メイリオ' , Meiryo , 'ＭＳ ゴシック' , 'MS Gothic' , HiraKakuProN-W3 , 'TakaoExゴシック' , TakaoExGothic , 'MotoyaLCedar' , 'Droid Sans Japanese' , sans-serif;
+    margin: 0 10px 0 0;
+    padding: 100px 5px;
+    text-align: center;
+  }
+
+  h2, p {
+    background-color: black;
+    font-size: 1em;
+  }
+
+  h2 {
+    text-transform: uppercase;
+  }
+</style>
+
diff --git a/app/components/forum_list/forum_list.svelte b/app/components/forum_list/forum_list.svelte
index f77c79a..c218bac 100644
--- a/app/components/forum_list/forum_list.svelte
+++ b/app/components/forum_list/forum_list.svelte
@@ -1,8 +1,13 @@
 <script>
+  import { _ } from 'svelte-i18n';
   import { forums } from '../../stores/forums.js';
+  import ErrorBlock from '../error_block/error_block.svelte';
 </script>
 
 <nav title="List of Forums">
+  {#if !$forums.length}
+    <ErrorBlock message={$_('forum_list.error.unavailable')} />
+  {/if}
   <ul>
     {#each $forums as forum}
       <li>
diff --git a/app/components/topic_index/topic_index.svelte b/app/components/topic_index/topic_index.svelte
index ea748a6..3de83bb 100644
--- a/app/components/topic_index/topic_index.svelte
+++ b/app/components/topic_index/topic_index.svelte
@@ -1,6 +1,8 @@
 <script>
   export let params;
+  import ErrorBlock from '../error_block/error_block.svelte';
 </script>
 
+<ErrorBlock />
 <h1>Topic Index.</h1>
 <p>This component lists topics for category or tag with id: {params.id}</p>
-- 
cgit