blisstown/campfire
blisstown/campfire
2
0
Fork 0
Code Issues 20 Pull requests Projects 1 Releases Activity

made content warnings actually hide the content

Browse source
This commit is contained in:
ari melody 2024-06-21 06:01:31 +01:00
parent 919b1f6ebb
commit 0f2a021622
Signed by: ari
GPG key ID: CF99829C92678188
1 changed files with 44 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
src/post/Body.svelte
View file

@ -3,27 +3,41 @@
let rich_text; let rich_text;
post.rich_text().then(res => {rich_text = res}); post.rich_text().then(res => {rich_text = res});
let open_warned = false;
</script> </script>
<div class="post-body"> <div class="post-body">
{#if post.warning} {#if post.warning}
<p class="post-warning"><strong>{post.warning}</strong></p> <p class="post-warning" on:click={() => { open_warned = !open_warned }}>
<strong>
{post.warning}
<span class="warning-instructions">
{#if !open_warned}
(click to reveal)
{:else}
(click to hide)
{/if}
</span>
</strong>
</p>
{/if} {/if}
{#if post.text} {#if !post.warning || open_warned}
<span class="post-text">{@html rich_text}</span> {#if post.text}
{/if} <span class="post-text">{@html rich_text}</span>
<div class="post-media-container" data-count={post.files.length}> {/if}
{#each post.files as file} <div class="post-media-container" data-count={post.files.length}>
<div class="post-media image"> {#each post.files as file}
<a href={file.url}> <div class="post-media image">
<img src={file.url} alt={file.alt} height="200" loading="lazy" decoding="async"> <a href={file.url}>
</a> <img src={file.url} alt={file.alt} height="200" loading="lazy" decoding="async">
</div> </a>
{/each} </div>
</div> {/each}
{#if post.boost && post.text} </div>
<p class="post-warning"><strong>this is quoting a post! quotes are not supported yet.</strong></p> {#if post.boost && post.text}
<!-- TODO: quotes support --> <p class="post-warning"><strong>this is quoting a post! quotes are not supported yet.</strong></p>
<!-- TODO: quotes support -->
{/if}
{/if} {/if}
</div> </div>
@ -34,9 +48,22 @@
.post-warning { .post-warning {
padding: 4px 8px; padding: 4px 8px;
--warn-bg: rgba(255,220,30,.2); --warn-bg: rgba(255,220,30,.1);
background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, var(--warn-bg) 10px, var(--warn-bg) 20px); background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, var(--warn-bg) 10px, var(--warn-bg) 20px);
border-radius: 8px; border-radius: 8px;
cursor: pointer;
outline-color: var(--warn-bg);
transition: outline .05s, box-shadow .05s;
}
.post-warning:hover {
outline: 1px solid var(--warn-bg);
box-shadow: 0 0 8px var(--warn-bg);
}
.post-warning .warning-instructions {
font-weight: normal;
opacity: .5;
} }
.post-text { .post-text {