forked from tanner/qotnews
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
2.3 KiB
108 lines
2.3 KiB
<script> |
|
import Time from "../components/Time.svelte"; |
|
|
|
export let story; |
|
export let comment; |
|
export let showComments = true; |
|
const author = (comment.author || "").replace(" ", ""); |
|
export let id = `${author}-${comment.date}`; |
|
|
|
export function toggleComments() { |
|
showComments = !showComments; |
|
} |
|
</script> |
|
|
|
<style> |
|
.comment { |
|
margin: 0.5rem 0; |
|
} |
|
.comment:not(:first-of-type) { |
|
margin: 0.5rem 0; |
|
border-top: solid 1px #ddd; |
|
padding: 0.5rem 0 0; |
|
} |
|
.comment-info { |
|
color: #222; |
|
} |
|
.comment-author { |
|
font-weight: 600; |
|
padding: 0 0.4em 0.2em; |
|
border-radius: 0.5em; |
|
background: #f1f1f1; |
|
color: #000; |
|
} |
|
.comment-author.is-op { |
|
background: #333; |
|
color: #fff; |
|
} |
|
.comment-text { |
|
padding: 0 0.5rem; |
|
color: #000; |
|
} |
|
.comment-text.is-collapsed { |
|
height: 3rem; |
|
overflow: hidden; |
|
color: #888; |
|
} |
|
.comment-text.is-collapsed::after { |
|
content: "..."; |
|
font-style: italic; |
|
} |
|
.comment-children { |
|
margin-left: 0.5rem; |
|
padding-left: 0.5rem; |
|
border-left: solid 1px #000; |
|
} |
|
.toggle-children { |
|
background: none; |
|
border: none; |
|
padding: 0 0.25rem; |
|
color: inherit; |
|
cursor: pointer; |
|
} |
|
.time-link { |
|
text-decoration: none; |
|
} |
|
.time-link:hover { |
|
text-decoration: underline; |
|
} |
|
.is-lighter { |
|
color: #888; |
|
} |
|
</style> |
|
|
|
<article class="comment" id="comment-{id}"> |
|
<header class="comment-info"> |
|
<span |
|
class={comment.author === story.author ? 'comment-author is-op' : 'comment-author'}>{comment.author || '[Deleted]'}</span> |
|
• |
|
<a class="time-link" href="{story.id}#comment-{id}"> |
|
<Time date={comment.date} /> |
|
</a> |
|
{#if comment.comments.length} |
|
<button |
|
class="toggle-children" |
|
on:click={toggleComments}>[{showComments ? '-' : '+'}]</button> |
|
{/if} |
|
</header> |
|
|
|
<section class={showComments ? 'comment-text' : 'comment-text is-collapsed'}> |
|
{@html comment.text} |
|
</section> |
|
|
|
{#if !showComments} |
|
<div class="comment-children"> |
|
<button |
|
class="toggle-children is-lighter" |
|
on:click={toggleComments}>[expand]</button> |
|
</div> |
|
{/if} |
|
|
|
{#if showComments && comment.comments.length} |
|
<footer class="comment-children"> |
|
{#each comment.comments as child} |
|
<svelte:self {story} comment={child} /> |
|
{/each} |
|
</footer> |
|
{/if} |
|
</article>
|
|
|