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