]>
Commit | Line | Data |
---|---|---|
890274a7 | 1 | <script> |
8050f772 | 2 | import { _ } from 'svelte-i18n'; |
74b03c33 RBR |
3 | import { forums } from '$/stores/forums'; |
4 | import Loader from '$/components/loader/loader.svelte'; | |
5 | import ErrorBlock from '$/components/error_block/error_block.svelte'; | |
890274a7 BB |
6 | </script> |
7 | ||
bd8e98d7 | 8 | <nav title="{$_('forum_list.title')}"> |
c1bc5993 | 9 | {#if $forums.loading} |
74b03c33 | 10 | <Loader /> |
c1bc5993 RBR |
11 | {/if} |
12 | {#if $forums.error} | |
8050f772 BB |
13 | <ErrorBlock message={$_('forum_list.error.unavailable')} /> |
14 | {/if} | |
66dc4cae | 15 | <ul> |
c1bc5993 | 16 | {#each $forums.data as forum} |
66dc4cae BB |
17 | <li> |
18 | <a href="/f/{forum.id}"> | |
19 | <span aria-hidden="true" class="navigation-glyph {forum.glyph}">{forum.glyph}</span> | |
862a5f9c | 20 | <span class="navigation-label">{$_(forum.label)}</span> |
66dc4cae BB |
21 | </a> |
22 | </li> | |
23 | {/each} | |
24 | </ul> | |
25 | </nav> | |
26 | ||
27 | <style> | |
28 | nav { | |
29 | grid-column: col-start 1; | |
30 | grid-row: 2; | |
31 | border-right: 1px solid black; | |
32 | } | |
33 | ||
34 | ul { | |
35 | padding: 0; | |
36 | } | |
37 | ||
38 | li { | |
39 | display: block; | |
40 | text-align: left; | |
41 | margin-bottom: 20px; | |
42 | } | |
43 | ||
44 | .navigation-glyph { | |
45 | font-size: 1.5rem; | |
46 | display: block; | |
47 | } | |
48 | ||
49 | .☽ { | |
50 | font-size: 2rem; | |
51 | } | |
52 | ||
53 | a { | |
54 | text-decoration: none; | |
55 | } | |
56 | </style> |