aboutsummaryrefslogtreecommitdiff
path: root/src/lib/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/components')
-rw-r--r--src/lib/components/actions/topic.svelte2
-rw-r--r--src/lib/components/error_block/error_block.svelte32
-rw-r--r--src/lib/components/footer/footer.svelte27
-rw-r--r--src/lib/components/forum/forum.svelte4
-rw-r--r--src/lib/components/forum_list/forum_list.svelte6
-rw-r--r--src/lib/components/header/header.svelte65
-rw-r--r--src/lib/components/language_selector/language_selector.svelte12
-rw-r--r--src/lib/components/post/post.svelte6
-rw-r--r--src/lib/components/tag/tag.svelte4
-rw-r--r--src/lib/components/topic/topic.svelte4
-rw-r--r--src/lib/components/topic_summary/topic_summary.svelte4
11 files changed, 70 insertions, 96 deletions
diff --git a/src/lib/components/actions/topic.svelte b/src/lib/components/actions/topic.svelte
index a3cba3b..9a9cd7e 100644
--- a/src/lib/components/actions/topic.svelte
+++ b/src/lib/components/actions/topic.svelte
@@ -1,5 +1,5 @@
<script lang="ts">
- import type { TopicAction } from '$lib/stores/action';
+ import type { TopicAction } from '$lib/stores/actions';
export let actions: TopicAction;
import { _ } from 'svelte-i18n';
diff --git a/src/lib/components/error_block/error_block.svelte b/src/lib/components/error_block/error_block.svelte
index d25f507..9fad768 100644
--- a/src/lib/components/error_block/error_block.svelte
+++ b/src/lib/components/error_block/error_block.svelte
@@ -5,36 +5,16 @@
import { blink } from '$lib/animations/blink';
</script>
-<div transition:blink>
- <h2>{$_('error.generic.title')}</h2>
- <p>{message || $_('error.generic.message')}</p>
+<div
+ class="font-sans overflow-hidden text-center border-4 border-solid border-red-500 text-amber-300 mx-2.5"
+ transition:blink
+>
+ <h2 class="bg-black text-base uppercase mt-24 mx-1 mb-2.5">{$_('error.generic.title')}</h2>
+ <p class="bg-black text-base mt-2.5 mx-1 mb-24">{message || $_('error.generic.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;
- text-align: center;
- overflow: hidden;
- }
-
- h2,
- p {
- background-color: black;
- font-size: 1em;
- }
-
- h2 {
- text-transform: uppercase;
- margin: 100px 5px 10px;
- }
-
- p {
- margin: 10px 5px 100px;
}
</style>
diff --git a/src/lib/components/footer/footer.svelte b/src/lib/components/footer/footer.svelte
index 5c171d2..e2db937 100644
--- a/src/lib/components/footer/footer.svelte
+++ b/src/lib/components/footer/footer.svelte
@@ -6,25 +6,12 @@
const licenseUrl = 'https://gitlab.com/rbdr/forum/';
</script>
-<footer title={$_('footer.title')}>
- <ul>
- <li>{@html $_('footer.license', { values: { licenseUrl } })}</li>
- <li>{$_('footer.choose_language')}: <LanguageSelector /></li>
+<footer
+ class="col-start-1 col-span-12 border-t-2 border-t-black border-solid"
+ title={$_('footer.title')}
+>
+ <ul class="p-0">
+ <li class="inline m-1">{@html $_('footer.license', { values: { licenseUrl } })}</li>
+ <li class="inline m-1">{$_('footer.choose_language')}: <LanguageSelector /></li>
</ul>
</footer>
-
-<style>
- footer {
- grid-column: col-start 1 / span 12;
- border-top: 1px solid black;
- }
-
- ul {
- padding: 0;
- }
-
- li {
- display: inline;
- margin: 5px;
- }
-</style>
diff --git a/src/lib/components/forum/forum.svelte b/src/lib/components/forum/forum.svelte
index b886428..bcd23a3 100644
--- a/src/lib/components/forum/forum.svelte
+++ b/src/lib/components/forum/forum.svelte
@@ -1,5 +1,7 @@
<script lang="ts">
- export let forum;
+ import type { Forum } from '$lib/data/types';
+
+ export let forum: Forum;
import { _ } from 'svelte-i18n';
import TopicSummary from '$lib/components/topic_summary/topic_summary.svelte';
diff --git a/src/lib/components/forum_list/forum_list.svelte b/src/lib/components/forum_list/forum_list.svelte
index 81a5e4f..250e36e 100644
--- a/src/lib/components/forum_list/forum_list.svelte
+++ b/src/lib/components/forum_list/forum_list.svelte
@@ -1,7 +1,9 @@
<script lang="ts">
- import { _ } from 'svelte-i18n';
- export let forums;
+ import type { Forum } from '$lib/data/types';
+
+ export let forums: Forum[];
+ import { _ } from 'svelte-i18n';
$: sortedForums = forums.slice().sort((a, b) => a.position - b.position);
</script>
diff --git a/src/lib/components/header/header.svelte b/src/lib/components/header/header.svelte
index 51df1c2..3d08913 100644
--- a/src/lib/components/header/header.svelte
+++ b/src/lib/components/header/header.svelte
@@ -5,59 +5,44 @@
import TopicActions from '$lib/components/actions/topic.svelte';
</script>
-<header title={$_('header.title')}>
- <ul>
- <li>
+<header
+ class="col-start-1 col-span-12 border-b-2 border-b-black border-solid"
+ title={$_('header.title')}
+>
+ <ul class="p-0">
+ <li class="inline m-1">
<strong
- ><a href="/" title={$_('header.long_version', { values: { version } })}
+ ><a
+ class="inline-block leading-10 underline text-blue-600"
+ href="/"
+ title={$_('header.long_version', { values: { version } })}
>{$_('header.short_version', { values: { version } })}</a
></strong
>
</li>
- <li>
- <a href="/new" title={$_('header.action.new.title')}
- >{@html $_('header.action.new.display')}</a
+ <li class="inline m-1">
+ <a
+ class="inline-block leading-10 no-underline"
+ href="/new"
+ title={$_('header.action.new.title')}>{@html $_('header.action.new.display')}</a
>
</li>
{#if $topicActions}
<TopicActions actions={$topicActions} />
{/if}
- <li>
- <a href="/search" title={$_('header.action.search.title')}
- >{@html $_('header.action.search.display')}</a
+ <li class="inline m-1">
+ <a
+ class="inline-block leading-10 no-underline"
+ href="/search"
+ title={$_('header.action.search.title')}>{@html $_('header.action.search.display')}</a
>
</li>
- <li>
- <a href="/logout" title={$_('header.action.log_out.title')}
- >{@html $_('header.action.log_out.display')}</a
+ <li class="inline m-1">
+ <a
+ class="inline-block leading-10 no-underline"
+ href="/logout"
+ title={$_('header.action.log_out.title')}>{@html $_('header.action.log_out.display')}</a
>
</li>
</ul>
</header>
-
-<style>
- header {
- grid-column: col-start 1 / span 12;
- border-bottom: 1px solid black;
- }
-
- ul {
- padding: 0;
- }
-
- li {
- display: inline;
- margin: 5px;
- }
-
- a {
- text-decoration: none;
- line-height: 3em;
- display: inline-block;
- }
-
- strong a {
- color: blue;
- text-decoration: underline;
- }
-</style>
diff --git a/src/lib/components/language_selector/language_selector.svelte b/src/lib/components/language_selector/language_selector.svelte
index 4e245f8..c1b8f35 100644
--- a/src/lib/components/language_selector/language_selector.svelte
+++ b/src/lib/components/language_selector/language_selector.svelte
@@ -7,7 +7,17 @@
code,
...getLangNameFromCode(code)
}))
- .sort((a, b) => a.native - b.native);
+ .sort((a, b) => {
+ if (a.native > b.native) {
+ return 1;
+ }
+
+ if (a.native < b.native) {
+ return -1;
+ }
+
+ return 0;
+ });
let selected = $locale;
diff --git a/src/lib/components/post/post.svelte b/src/lib/components/post/post.svelte
index d909be1..535f7ac 100644
--- a/src/lib/components/post/post.svelte
+++ b/src/lib/components/post/post.svelte
@@ -1,12 +1,14 @@
<script lang="ts">
- export let post;
+ import type { Post } from '$lib/data/types';
+
+ export let post: Post;
export let index = 0;
export let count = 1;
import { _ } from 'svelte-i18n';
import Glyph from '$lib/components/glyph/glyph.svelte';
- const timestampToISO = (timestamp) => new Date(timestamp).toISOString();
+ const timestampToISO = (timestamp: number) => new Date(timestamp).toISOString();
</script>
<aside
diff --git a/src/lib/components/tag/tag.svelte b/src/lib/components/tag/tag.svelte
index 86d0b82..b3fe806 100644
--- a/src/lib/components/tag/tag.svelte
+++ b/src/lib/components/tag/tag.svelte
@@ -1,5 +1,7 @@
<script lang="ts">
- export let tag;
+ import type { Tag } from '$lib/data/types';
+
+ export let tag: Tag;
import { _ } from 'svelte-i18n';
import TopicSummary from '$lib/components/topic_summary/topic_summary.svelte';
diff --git a/src/lib/components/topic/topic.svelte b/src/lib/components/topic/topic.svelte
index 5b5ed0b..ec89876 100644
--- a/src/lib/components/topic/topic.svelte
+++ b/src/lib/components/topic/topic.svelte
@@ -1,5 +1,7 @@
<script lang="ts">
- export let topic;
+ import type { Topic } from '$lib/data/types';
+
+ export let topic: Topic;
import { _ } from 'svelte-i18n';
import Post from '$lib/components/post/post.svelte';
diff --git a/src/lib/components/topic_summary/topic_summary.svelte b/src/lib/components/topic_summary/topic_summary.svelte
index 39dad08..337a064 100644
--- a/src/lib/components/topic_summary/topic_summary.svelte
+++ b/src/lib/components/topic_summary/topic_summary.svelte
@@ -1,5 +1,7 @@
<script lang="ts">
- export let topic;
+ import type { Topic } from '$lib/data/types';
+
+ export let topic: Topic;
import { _ } from 'svelte-i18n';
import { readableTime } from '$lib/utils/readable_time';
generated by cgit (git 2.54.0) at 2026-07-22 13:09:37 +0000