tangled
alpha
login
or
join now
mackuba.eu
/
skythread
14
fork
atom
Thread viewer for Bluesky
14
fork
atom
overview
issues
pulls
pipelines
a bunch of style/layout fixes after visual review
mackuba.eu
3 months ago
9cccbabd
9a0a6853
+34
-21
15 changed files
expand all
collapse all
unified
split
src
components
BiohazardDialog.svelte
RichTextFromFacets.svelte
embeds
EmbedComponent.svelte
posts
PostComponent.svelte
PostFooter.svelte
PostHeader.svelte
ReferencedPostAuthorLink.svelte
models
posts.js
pages
HashtagPage.svelte
LikeStatsPage.svelte
LycanSearchPage.svelte
PostingStatsPage.svelte
QuotesPage.svelte
SearchPage.svelte
style.css
+2
-2
src/components/BiohazardDialog.svelte
···
48
48
width: 400px;
49
49
}
50
50
51
51
-
p.submit {
51
51
+
:global(.dialog) p.submit {
52
52
margin-top: 40px;
53
53
margin-bottom: 20px;
54
54
}
55
55
56
56
-
input[type="submit"] {
56
56
+
:global(.dialog) input[type="submit"] {
57
57
width: 180px;
58
58
margin-left: 5px;
59
59
margin-right: 5px;
+1
-2
src/components/RichTextFromFacets.svelte
···
19
19
{@const lines = segment.text.split("\n")}
20
20
21
21
{#each lines as line, i}
22
22
-
{#if i > 0}<br>{/if}
23
23
-
{line}
22
22
+
{#if i > 0}<br>{/if}{line}
24
23
{/each}
25
24
{/if}
26
25
{/each}
+9
-6
src/components/embeds/EmbedComponent.svelte
···
86
86
margin-top: 8px;
87
87
margin-bottom: 4px;
88
88
line-height: 135%;
89
89
+
white-space: pre-line;
89
90
}
90
91
91
92
a.link-card.record > div:has(.avatar) {
···
98
99
99
100
a.link-card.record .handle {
100
101
color: #666;
101
101
-
margin-left: 5px;
102
102
+
margin-left: 1px;
103
103
+
font-weight: normal;
104
104
+
font-size: 11pt;
105
105
+
vertical-align: text-top;
102
106
}
103
107
104
108
a.link-card.record .avatar {
···
114
118
a.link-card.record .stats {
115
119
margin-top: 9px;
116
120
margin-bottom: 1px;
121
121
+
font-size: 10pt;
122
122
+
color: #666;
117
123
}
118
124
119
119
-
a.link-card.record .stats i.fa-heart:hover {
125
125
+
a.link-card.record .stats i.fa-heart {
126
126
+
font-size: 9pt;
120
127
color: #aaa;
121
128
}
122
129
}
···
151
158
152
159
a.link-card.record .avatar {
153
160
border-color: #888;
154
154
-
}
155
155
-
156
156
-
a.link-card.record .stats i.fa-heart:hover {
157
157
-
color: #eee;
158
161
}
159
162
}
160
163
}
+1
-1
src/components/posts/PostComponent.svelte
···
187
187
</div>
188
188
189
189
<style>
190
190
-
.post {
190
190
+
:global(.post) {
191
191
position: relative;
192
192
padding-left: 21px;
193
193
margin-top: 30px;
+1
-1
src/components/posts/PostFooter.svelte
···
134
134
}
135
135
136
136
span {
137
137
-
margin-right: 10px;
137
137
+
margin-right: 7px;
138
138
}
139
139
140
140
.blocked-info {
+2
-2
src/components/posts/PostHeader.svelte
···
65
65
border-radius: 16px;
66
66
vertical-align: middle;
67
67
margin-bottom: 3px;
68
68
-
margin-right: 8px;
68
68
+
margin-right: 4px;
69
69
}
70
70
71
71
.no-avatar, .muted-avatar {
···
73
73
background-color: #eee;
74
74
border-radius: 16px;
75
75
vertical-align: middle;
76
76
-
margin-right: 8px;
76
76
+
margin-right: 4px;
77
77
}
78
78
79
79
.muted-avatar {
+3
-2
src/components/posts/ReferencedPostAuthorLink.svelte
···
5
5
let { post, status = undefined }: { post: AnyPost, status?: string | undefined } = $props();
6
6
7
7
let handle: string | undefined = $state();
8
8
+
let handleText = $derived(handle ? `@${handle}` : 'see author');
8
9
9
10
$effect(() => {
10
11
let did = atURI(post.uri).repo;
···
16
17
</script>
17
18
18
19
{#if status}
19
19
-
(<a href="{post.didLinkToAuthor}" target="_blank">{handle ?? 'see author'}</a>, {status})
20
20
+
(<a href="{post.didLinkToAuthor}" target="_blank">{handleText}</a>, {status})
20
21
{:else}
21
21
-
(<a href="{post.didLinkToAuthor}" target="_blank">{handle ?? 'see author'}</a>)
22
22
+
(<a href="{post.didLinkToAuthor}" target="_blank">{handleText}</a>)
22
23
{/if}
+1
-1
src/models/posts.js
···
343
343
/** @returns {string} */
344
344
get authorDisplayName() {
345
345
if (this.author.displayName) {
346
346
-
return this.author.displayName;
346
346
+
return this.author.displayName.trim();
347
347
} else if (this.author.handle.endsWith('.bsky.social')) {
348
348
return this.author.handle.replace(/\.bsky\.social$/, '');
349
349
} else {
+1
-1
src/pages/HashtagPage.svelte
···
66
66
{/if}
67
67
68
68
<style>
69
69
-
.hashtag :global(.post) {
69
69
+
.hashtag > :global(.post) {
70
70
padding-bottom: 10px;
71
71
border-bottom: 1px solid #ddd;
72
72
}
+2
src/pages/LikeStatsPage.svelte
···
36
36
}
37
37
</script>
38
38
39
39
+
<main>
39
40
<h2>Like statistics</h2>
40
41
41
42
<form onsubmit={startScan}>
···
57
58
<LikeStatsTable cssClass="given-likes" header="❤️ Likes from you:" users={givenLikesUsers} />
58
59
<LikeStatsTable cssClass="received-likes" header="💛 Likes on your posts:" users={receivedLikesUsers} />
59
60
{/if}
61
61
+
</main>
60
62
61
63
<style>
62
64
input[type="range"] {
+1
src/pages/LycanSearchPage.svelte
···
240
240
<style>
241
241
.search-collections label {
242
242
vertical-align: middle;
243
243
+
margin-right: 5px;
243
244
}
244
245
245
246
.lycan-import {
+3
src/pages/PostingStatsPage.svelte
···
109
109
}
110
110
</script>
111
111
112
112
+
<main>
112
113
<h2>Bluesky posting statistics</h2>
113
114
114
115
<form {onsubmit}>
···
157
158
{#if results}
158
159
<PostingStatsTable {...tableOptions} {...results} />
159
160
{/if}
161
161
+
</main>
160
162
161
163
<style>
162
164
input[type="radio"] {
···
168
170
input[type="radio"] + label {
169
171
user-select: none;
170
172
-webkit-user-select: none;
173
173
+
margin-right: 4px;
171
174
}
172
175
173
176
input[type="range"] {
+4
src/pages/QuotesPage.svelte
···
75
75
{/if}
76
76
77
77
<style>
78
78
+
.quotes :global(p.back) {
79
79
+
padding-left: 10px;
80
80
+
}
81
81
+
78
82
.quotes :global(.post) {
79
83
padding-bottom: 5px;
80
84
}
+2
-2
src/pages/SearchPage.svelte
···
2
2
let { children } = $props();
3
3
</script>
4
4
5
5
-
<div class="search-page">
5
5
+
<main class="search-page">
6
6
{@render children()}
7
7
-
</div>
7
7
+
</main>
8
8
9
9
<style>
10
10
.search-page :global {
+1
-1
style.css
···
56
56
p.back i {
57
57
font-size: 10pt;
58
58
color: #888;
59
59
-
margin-right: 5px;
59
59
+
margin-right: 3px;
60
60
}
61
61
62
62
@media (prefers-color-scheme: dark) {