finish sk restructure, a11y and optimisations
This commit is contained in:
parent
9ef27fd2a2
commit
3ae05b3f9f
GPG key ID:
CF99829C92678188
61 changed files with 416 additions and 429 deletions
|
|
@ -2,104 +2,33 @@
|
|||
import Button from './Button.svelte';
|
||||
import Post from './post/Post.svelte';
|
||||
import Error from './Error.svelte';
|
||||
import { Client } from '../client/client.js';
|
||||
import { parsePost } from '../client/api.js';
|
||||
import { Client } from '$lib/client/client.js';
|
||||
import { parsePost } from '$lib/client/api.js';
|
||||
import { get } from 'svelte/store';
|
||||
import { posts, getTimeline } from '$lib/timeline.js';
|
||||
|
||||
let params = new URLSearchParams(location.search);
|
||||
|
||||
let client = get(Client.get());
|
||||
let posts = [];
|
||||
let loading = false;
|
||||
let focus_post_id = location.pathname.startsWith("/post/") ? location.pathname.substring(6) : false;
|
||||
|
||||
let error;
|
||||
|
||||
async function getTimeline() {
|
||||
if (loading) return; // no spamming!!
|
||||
loading = true;
|
||||
|
||||
let timeline_data;
|
||||
if (posts.length === 0) timeline_data = await client.getTimeline()
|
||||
else timeline_data = await client.getTimeline(posts[posts.length - 1].id);
|
||||
|
||||
if (!timeline_data) {
|
||||
console.error(`Failed to retrieve timeline.`);
|
||||
loading = false;
|
||||
return;
|
||||
getTimeline();
|
||||
document.addEventListener("scroll", event => {
|
||||
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 2048) {
|
||||
getTimeline();
|
||||
}
|
||||
|
||||
for (let i in timeline_data) {
|
||||
const post_data = timeline_data[i];
|
||||
const post = await parsePost(post_data, 1, false);
|
||||
if (!post) {
|
||||
if (post === null || post === undefined) {
|
||||
if (post_data.id) {
|
||||
console.warn("Failed to parse post #" + post_data.id);
|
||||
} else {
|
||||
console.warn("Failed to parse post:");
|
||||
console.warn(post_data);
|
||||
}
|
||||
}
|
||||
continue;
|
||||
}
|
||||
posts = [...posts, post];
|
||||
}
|
||||
loading = false;
|
||||
}
|
||||
|
||||
async function getPost(post_id) {
|
||||
loading = true;
|
||||
|
||||
const post_data = await client.getPost(post_id);
|
||||
if (!post_data) {
|
||||
console.error(`Failed to retrieve post ${post_id}.`);
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const post = await parsePost(post_data, 10, true);
|
||||
posts = [post];
|
||||
for (let i in post.replies) {
|
||||
posts = [...posts, post.replies[i]];
|
||||
}
|
||||
loading = false;
|
||||
}
|
||||
|
||||
if (focus_post_id) {
|
||||
getPost(focus_post_id);
|
||||
} else {
|
||||
getTimeline();
|
||||
document.addEventListener("scroll", event => {
|
||||
if (!loading && window.innerHeight + window.scrollY >= document.body.offsetHeight - 2048) {
|
||||
getTimeline();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<header>
|
||||
<h1>Home</h1>
|
||||
<nav>
|
||||
<Button centered active>Home</Button>
|
||||
<Button centered disabled>Local</Button>
|
||||
<Button centered disabled>Federated</Button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div id="feed">
|
||||
<div id="feed" role="feed">
|
||||
{#if posts.length <= 0}
|
||||
<div class="throb">
|
||||
<span>just a moment...</span>
|
||||
<div class="loading throb">
|
||||
<span>getting the feed...</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#each posts as post}
|
||||
<Post post_data={post} focused={post.id === focus_post_id} />
|
||||
{#each $posts as post}
|
||||
<Post post_data={post} />
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
header {
|
||||
width: 100%;
|
||||
margin: 16px 0 8px 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -120,7 +49,7 @@
|
|||
margin-bottom: 20vh;
|
||||
}
|
||||
|
||||
.throb {
|
||||
.loading {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@
|
|||
import { Client } from '../client/client.js';
|
||||
import { play_sound } from '../sound.js';
|
||||
|
||||
const VERSION = APP_VERSION;
|
||||
|
||||
let client = false;
|
||||
Client.get().subscribe(c => {
|
||||
client = c;
|
||||
|
|
@ -14,6 +16,13 @@
|
|||
if (notification_count > 99) notification_count = "99+";
|
||||
|
||||
function goTimeline() {
|
||||
if (location.pathname === "/") {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth"
|
||||
});
|
||||
return;
|
||||
}
|
||||
location = "/";
|
||||
}
|
||||
|
||||
|
|
@ -61,7 +70,7 @@
|
|||
</div>
|
||||
|
||||
<div id="account-button">
|
||||
<img src={client.user.avatar_url} class="account-avatar" height="64px" aria-hidden="true" on:click={() => play_sound()}>
|
||||
<img src={client.user.avatar_url} class="account-avatar" height="64px" alt="" aria-hidden="true" on:click={() => play_sound()}>
|
||||
<div class="account-name" aria-hidden="true">
|
||||
<span class="nickname" title={client.user.nickname}>{client.user.nickname}</span>
|
||||
<span class="username" title={`@${client.user.username}@${client.user.host}`}>
|
||||
|
|
@ -73,7 +82,7 @@
|
|||
</div>
|
||||
{/if}
|
||||
<span class="version">
|
||||
space social v{APP_VERSION}
|
||||
space social v{VERSION}
|
||||
<br>
|
||||
<ul>
|
||||
<li><a href="https://git.arimelody.me/ari/spacesocial-client">source</a></li>
|
||||
|
|
@ -252,26 +261,6 @@
|
|||
font-size: .65em;
|
||||
}
|
||||
|
||||
.settings {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: none;
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
background: none;
|
||||
border-radius: 8px;
|
||||
transition: background-color .1s;
|
||||
}
|
||||
|
||||
.settings:hover {
|
||||
background-color: color-mix(in srgb, var(--bg-700), var(--text) 15%);
|
||||
}
|
||||
|
||||
.settings:active {
|
||||
background-color: color-mix(in srgb, var(--bg-700), var(--bg-1000) 30%);
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
|
|||
|
|
@ -15,22 +15,24 @@
|
|||
<span class="post-context-time">
|
||||
<time title="{time_string}">{short_time(post.created_at)}</time>
|
||||
{#if post.visibility !== "public"}
|
||||
<span class="post-visibility">({post.visibility})</span>
|
||||
<span class="post-visibility">- {post.visibility}</span>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.post-context {
|
||||
margin-bottom: 8px;
|
||||
padding-left: 58px;
|
||||
padding: 12px 16px 0 74px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
font-size: .8em;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
opacity: .8;
|
||||
transition: opacity .1s;
|
||||
transition: opacity .1s, background-color .1s;
|
||||
border-radius: 8px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.post-context-icon {
|
||||
|
|
@ -49,4 +51,8 @@
|
|||
.post-context-time {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.post-visibility {
|
||||
opacity: .7;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
import { get } from 'svelte/store';
|
||||
import { Client } from '../../client/client.js';
|
||||
import * as api from '../../client/api.js';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
export let post_data;
|
||||
export let focused = false;
|
||||
|
|
@ -25,7 +26,9 @@
|
|||
}
|
||||
|
||||
function gotoPost() {
|
||||
location = `/post/${post.id}`;
|
||||
if (focused) return;
|
||||
if (event.key && event.key !== "Enter") return;
|
||||
goto(`/post/${post.id}`);
|
||||
}
|
||||
|
||||
async function toggleBoost() {
|
||||
|
|
@ -80,25 +83,30 @@
|
|||
let el;
|
||||
onMount(() => {
|
||||
if (focused) {
|
||||
window.scrollTo(0, el.scrollHeight - 700);
|
||||
window.scrollTo(0, el.scrollHeight);
|
||||
}
|
||||
});
|
||||
|
||||
let aria_label = post.user.username + '; ' + post.text + '; ' + post.created_at;
|
||||
</script>
|
||||
|
||||
<div class="post-container" aria-label={aria_label} bind:this={el}>
|
||||
<div class="post-container">
|
||||
{#if post.reply}
|
||||
<ReplyContext post={post.reply} />
|
||||
{/if}
|
||||
{#if is_boost && !post_context.text}
|
||||
<BoostContext post={post_context} />
|
||||
{/if}
|
||||
<article class={"post" + (focused ? " focused" : "")} on:click={!focused ? gotoPost() : null}>
|
||||
<article
|
||||
class={"post" + (focused ? " focused" : "")}
|
||||
aria-label={aria_label}
|
||||
bind:this={el}
|
||||
on:click={gotoPost}
|
||||
on:keydown={gotoPost}>
|
||||
<PostHeader post={post} />
|
||||
<Body post={post} />
|
||||
<footer class="post-footer">
|
||||
<div class="post-reactions" on:click|stopPropagation>
|
||||
<div class="post-reactions" aria-label="Reactions" on:click|stopPropagation on:keydown|stopPropagation>
|
||||
{#each post.reactions as reaction}
|
||||
<ReactionButton
|
||||
type="reaction"
|
||||
|
|
@ -116,7 +124,7 @@
|
|||
</ReactionButton>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="post-actions" on:click|stopPropagation>
|
||||
<div class="post-actions" aria-label="Post actions" on:click|stopPropagation on:keydown|stopPropagation>
|
||||
<ActionButton type="reply" label="Reply" bind:count={post.reply_count} sound="post" disabled>🗨️</ActionButton>
|
||||
<ActionButton type="boost" label="Boost" on:click={() => toggleBoost()} bind:active={post.boosted} bind:count={post.boost_count} sound="boost">🔁</ActionButton>
|
||||
<ActionButton type="favourite" label="Favourite" on:click={() => toggleFavourite()} bind:active={post.favourited} bind:count={post.favourite_count}>⭐</ActionButton>
|
||||
|
|
@ -130,37 +138,39 @@
|
|||
|
||||
<style>
|
||||
.post-container {
|
||||
width: 700px;
|
||||
max-width: 700px;
|
||||
width: 732px;
|
||||
max-width: 732px;
|
||||
margin-bottom: 8px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 8px;
|
||||
background-color: var(--bg-800);
|
||||
}
|
||||
|
||||
.post {
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
transition: background-color .1s;
|
||||
}
|
||||
|
||||
.post-container:hover {
|
||||
background-color: color-mix(in srgb, var(--bg-800), black 5%);
|
||||
}
|
||||
|
||||
.post-container:hover :global(.post-context) {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.post:not(.focused) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.post.focused {
|
||||
padding: 16px;
|
||||
margin: -16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid color-mix(in srgb, transparent, var(--accent) 20%);
|
||||
box-shadow: 0 0 16px color-mix(in srgb, transparent, var(--accent) 20%);
|
||||
}
|
||||
|
||||
.post:hover {
|
||||
background-color: color-mix(in srgb, var(--bg-800), black 5%);
|
||||
}
|
||||
|
||||
.post-container:has(.post-context) .post {
|
||||
padding-top: 40px;
|
||||
margin-top: -32px;
|
||||
}
|
||||
|
||||
:global(.post-reactions) {
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -9,12 +9,16 @@
|
|||
import { get } from 'svelte/store';
|
||||
import { Client } from '../../client/client.js';
|
||||
import * as api from '../../client/api.js';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
export let post;
|
||||
let time_string = post.created_at.toLocaleString();
|
||||
let aria_label = post.user.username + '; ' + post.text + '; ' + post.created_at;
|
||||
|
||||
function gotoPost() {
|
||||
location = `/post/${post.id}`;
|
||||
if (focused) return;
|
||||
if (event.key && event.key !== "Enter") return;
|
||||
goto(`/post/${post.id}`);
|
||||
}
|
||||
|
||||
async function toggleBoost() {
|
||||
|
|
@ -71,7 +75,11 @@
|
|||
<svelte:self post={post.reply} />
|
||||
{/if}
|
||||
|
||||
<article class="post-reply" on:click={() => gotoPost()}>
|
||||
<article
|
||||
class="post-reply"
|
||||
aria-label={aria_label}
|
||||
on:click={gotoPost}
|
||||
on:keydown={gotoPost}>
|
||||
<div class="line"></div>
|
||||
|
||||
<div class="post-reply-main">
|
||||
|
|
@ -80,7 +88,7 @@
|
|||
<Body post={post} />
|
||||
|
||||
<footer class="post-footer">
|
||||
<div class="post-reactions" on:click|stopPropagation>
|
||||
<div class="post-reactions" aria-label="Reactions" on:click|stopPropagation on:keydown|stopPropagation>
|
||||
{#each post.reactions as reaction}
|
||||
<ReactionButton
|
||||
type="reaction"
|
||||
|
|
@ -98,7 +106,7 @@
|
|||
</ReactionButton>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="post-actions" on:click|stopPropagation>
|
||||
<div class="post-actions" aria-label="Post actions" on:click|stopPropagation on:keydown|stopPropagation>
|
||||
<ActionButton type="reply" label="Reply" bind:count={post.reply_count} sound="post" disabled>🗨️</ActionButton>
|
||||
<ActionButton type="boost" label="Boost" on:click={() => toggleBoost()} bind:active={post.boosted} bind:count={post.boost_count} sound="boost">🔁</ActionButton>
|
||||
<ActionButton type="favourite" label="Favourite" on:click={() => toggleFavourite()} bind:active={post.favourited} bind:count={post.favourite_count}>⭐</ActionButton>
|
||||
|
|
@ -112,11 +120,18 @@
|
|||
|
||||
<style>
|
||||
.post-reply {
|
||||
padding-bottom: 24px;
|
||||
padding: 16px 16px 16px 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
color: var(--text);
|
||||
align-items: stretch;
|
||||
border-radius: 8px;
|
||||
transition: background-color .1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.post-reply:hover {
|
||||
background-color: color-mix(in srgb, var(--bg-800), black 5%);
|
||||
}
|
||||
|
||||
.post-avatar-container {
|
||||
|
|
@ -125,8 +140,8 @@
|
|||
|
||||
.line {
|
||||
position: relative;
|
||||
top: 24px;
|
||||
left: 25px;
|
||||
top: 32px;
|
||||
left: 23px;
|
||||
border-right: 2px solid var(--bg-700);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue