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

fix post click regions and boost context emoji sizes

Browse source
This commit is contained in:
ari melody 2024-07-01 03:46:26 +01:00
parent 40be540527
commit 36a74bb4e5
Signed by: ari
GPG key ID: CF99829C92678188
2 changed files with 16 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/lib/ui/post/BoostContext.svelte
View file

@ -10,7 +10,10 @@
<div class="post-context"> <div class="post-context">
<span class="post-context-icon">🔁</span> <span class="post-context-icon">🔁</span>
<span class="post-context-action"> <span class="post-context-action">
<a href={post.user.url} target="_blank">{@html parseEmojis(post.user.rich_name)}</a> boosted this post. <a href={post.user.url} target="_blank"><span class="name">
{@html parseEmojis(post.user.rich_name)}</span>
</a>
boosted this post.
</span> </span>
<span class="post-context-time"> <span class="post-context-time">
<time title="{time_string}">{short_time(post.created_at)}</time> <time title="{time_string}">{short_time(post.created_at)}</time>
@ -48,6 +51,12 @@
text-decoration: underline; text-decoration: underline;
} }
.post-context .name :global(.emoji) {
position: relative;
top: .2em;
height: 1.2em;
}
.post-context-time { .post-context-time {
margin-left: auto; margin-left: auto;
} }

12
src/lib/ui/post/PostHeader.svelte
View file

@ -8,16 +8,16 @@
let time_string = post.created_at.toLocaleString(); let time_string = post.created_at.toLocaleString();
</script> </script>
<div class={"post-header-container" + (reply ? " reply" : "")} on:mouseup|stopPropagation> <div class={"post-header-container" + (reply ? " reply" : "")}>
<a href={post.user.url} target="_blank" class="post-avatar-container"> <a href={post.user.url} target="_blank" class="post-avatar-container" on:mouseup|stopPropagation>
<img src={post.user.avatar_url} type={post.user.avatar_type} alt="" width="48" height="48" class="post-avatar" loading="lazy" decoding="async"> <img src={post.user.avatar_url} type={post.user.avatar_type} alt="" width="48" height="48" class="post-avatar" loading="lazy" decoding="async">
</a> </a>
<header class="post-header"> <header class="post-header">
<div class="post-user-info"> <div class="post-user-info" on:mouseup|stopPropagation>
<a href={post.user.url} target="_blank" class="name">{@html post.user.rich_name}</a> <a href={post.user.url} target="_blank" class="name">{@html post.user.rich_name}</a>
<span class="username">{post.user.mention}</span> <span class="username">{post.user.mention}</span>
</div> </div>
<div class="post-info"> <div class="post-info" on:mouseup|stopPropagation>
<a href={post.url} target="_blank" class="created-at"> <a href={post.url} target="_blank" class="created-at">
<time title={time_string}>{short_time(post.created_at)}</time> <time title={time_string}>{short_time(post.created_at)}</time>
{#if post.visibility !== "public"} {#if post.visibility !== "public"}
@ -82,8 +82,8 @@
.post-user-info .name :global(.emoji) { .post-user-info .name :global(.emoji) {
position: relative; position: relative;
top: 4px; top: .2em;
height: 20px; height: 1.2em;
} }
.post-user-info .username { .post-user-info .username {