polished UI form and function

This commit is contained in:
ari melody 2024-06-21 06:52:34 +01:00
parent 0f2a021622
commit e9c6510286
Signed by: ari
GPG key ID: CF99829C92678188
9 changed files with 56 additions and 20 deletions

View file

@ -24,8 +24,6 @@
return;
}
console.log(timeline_data);
for (let i in timeline_data) {
const post_data = timeline_data[i];
const post = await parsePost(post_data, 1);

View file

@ -214,11 +214,14 @@ export async function parseUser(data) {
user.id = data.id;
user.nickname = data.display_name;
user.username = data.username;
user.avatar_url = data.avatar;
user.url = data.url;
if (data.acct.includes('@'))
user.host = data.acct.split('@')[1];
else
user.host = data.username + '@' + Client.get().instance.host;
user.avatar_url = data.avatar;
user.emojis = [];
data.emojis.forEach(emoji_data => {
emoji_data.id = emoji_data.shortcode + '@' + user.host;
@ -226,6 +229,7 @@ export async function parseUser(data) {
emoji_data.host = user.host;
user.emojis.push(parseEmoji(emoji_data));
});
Client.get().putCacheUser(user);
return user;
}

View file

@ -28,7 +28,7 @@
<div class="post-media-container" data-count={post.files.length}>
{#each post.files as file}
<div class="post-media image">
<a href={file.url}>
<a href={file.url} target="_blank">
<img src={file.url} alt={file.alt} height="200" loading="lazy" decoding="async">
</a>
</div>
@ -43,10 +43,11 @@
<style>
.post-body {
margin-top: 8px;
margin-top: 10px;
}
.post-warning {
margin-bottom: 6px;
padding: 4px 8px;
--warn-bg: rgba(255,220,30,.1);
background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, var(--warn-bg) 10px, var(--warn-bg) 20px);
@ -67,12 +68,14 @@
}
.post-text {
line-height: 1.2em;
word-wrap: break-word;
}
.post-text :global(.emoji) {
position: relative;
top: 6px;
margin-top: -10px;
height: 24px!important;
}
@ -110,8 +113,7 @@
.post-text :global(a.mention) {
color: var(--accent);
padding: 6px 6px;
margin: -6px 0;
padding: 3px 6px;
background: var(--accent-bg);
border-radius: 6px;
text-decoration: none;

View file

@ -10,7 +10,7 @@
<div class="post-context">
<span class="post-context-icon">🔁</span>
<span class="post-context-action">
<a href="/{post.user.mention}">{@html parseEmojis(post.user.rich_name)}</a> boosted this post.
<a href={post.user.url} target="_blank">{@html parseEmojis(post.user.rich_name)}</a> boosted this post.
</span>
<span class="post-context-time">
<time title="{time_string}">{short_time(post.created_at)}</time>

View file

@ -8,16 +8,16 @@
</script>
<div class="post-header-container">
<a href="/{post.user.mention}" class="post-avatar-container">
<a href={post.user.url} target="_blank" class="post-avatar-container">
<img src={post.user.avatar_url} type={post.user.avatar_type} alt="" width="48" height="48" class="post-avatar" loading="lazy" decoding="async">
</a>
<header class="post-header">
<div class="post-user-info">
<a href="/{post.user.mention}" 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>
</div>
<div class="post-info">
<a href={post.url} class="created-at">
<a href={post.url} target="_blank" class="created-at">
<time title={time_string}>{short_time(post.created_at)}</time>
{#if post.visibility !== "public"}
<span class="post-visibility">({post.visibility})</span>
@ -44,6 +44,7 @@
.post-avatar-container {
margin-right: 12px;
display: flex;
}
.post-avatar {
@ -61,6 +62,13 @@
margin-left: auto;
}
.post-user-info {
margin-top: -6px;
display: flex;
flex-direction: column;
justify-content: center;
}
.post-user-info a {
display: block;
}
@ -68,7 +76,7 @@
.post-user-info .name :global(.emoji) {
position: relative;
top: 4px;
height: 26px;
height: 20px;
}
.post-user-info .username {

View file

@ -69,7 +69,6 @@
:global(.post-reactions) {
margin-top: 16px;
display: flex;
flex-direction: row;
}

View file

@ -13,7 +13,7 @@
<article class="post-reply">
<div class="post-reply-avatar-container">
<a href="/{post.user.mention}" class="post-avatar-container">
<a href={post.user.url} target="_blank" class="post-avatar-container">
<img src={post.user.avatar_url} type={post.user.avatar_type} alt="" width="48" height="48" class="post-avatar" loading="lazy" decoding="async">
</a>
<div class="line">
@ -24,11 +24,11 @@
<div class="post-header-container">
<header class="post-header">
<div class="post-user-info">
<a href="/{post.user.mention}" 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>
</div>
<div class="post-info">
<a href={post.url} class="created-at">
<a href={post.url} target="_blank" class="created-at">
<time title={time_string}>{short_time(post.created_at)}</time>
</a>
</div>
@ -62,6 +62,10 @@
flex-direction: row;
}
.post-avatar-container {
display: flex;
}
.post-reply-avatar-container {
margin-right: 12px;
margin-bottom: -24px;
@ -69,7 +73,6 @@
.post-reply-avatar-container .line {
position: relative;
top: -4px;
left: -1px;
width: 50%;
height: calc(100% - 48px);
@ -81,6 +84,7 @@
}
.post-header-container {
margin-bottom: -6px;
display: flex;
flex-direction: row;
}
@ -100,6 +104,7 @@
}
.post-header {
height: 48px;
display: flex;
flex-grow: 1;
flex-direction: row;
@ -109,6 +114,13 @@
margin-left: auto;
}
.post-user-info {
margin-top: -4px;
display: flex;
flex-direction: column;
justify-content: center;
}
.post-user-info a {
display: block;
}
@ -127,4 +139,12 @@
.post-info .created-at {
font-size: .8em;
}
:global(.post-body) {
margin-top: 0;
}
:global(.post-body p) {
margin: 0;
}
</style>

View file

@ -1,6 +1,4 @@
import { Client } from '../client/client.js';
import { capabilities, server_types } from '../client/instance.js';
import { parseOne as parseEmoji, EMOJI_REGEX } from '../emoji.js';
import { parseText as parseEmoji } from '../emoji.js';
export default class Post {
id;
@ -19,6 +17,11 @@ export default class Post {
boost;
visibility;
async rich_text() {
return parseEmoji(this.text, this.user.host);
}
/*
async rich_text() {
let text = this.text;
if (!text) return text;
@ -165,4 +168,5 @@ export default class Post {
return response;
}
*/
}

View file

@ -7,6 +7,7 @@ export default class User {
host;
avatar_url;
emojis;
url;
get name() {
return this.nickname || this.username;