Thread viewer for Bluesky

a bunch of style/layout fixes after visual review

+34 -21
+2 -2
src/components/BiohazardDialog.svelte
··· 48 48 width: 400px; 49 49 } 50 50 51 - p.submit { 51 + :global(.dialog) p.submit { 52 52 margin-top: 40px; 53 53 margin-bottom: 20px; 54 54 } 55 55 56 - input[type="submit"] { 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 - {#if i > 0}<br>{/if} 23 - {line} 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 + 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 - margin-left: 5px; 102 + margin-left: 1px; 103 + font-weight: normal; 104 + font-size: 11pt; 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 + font-size: 10pt; 122 + color: #666; 117 123 } 118 124 119 - a.link-card.record .stats i.fa-heart:hover { 125 + a.link-card.record .stats i.fa-heart { 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 - } 155 - 156 - a.link-card.record .stats i.fa-heart:hover { 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 - .post { 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 - margin-right: 10px; 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 - margin-right: 8px; 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 - margin-right: 8px; 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 + 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 - (<a href="{post.didLinkToAuthor}" target="_blank">{handle ?? 'see author'}</a>, {status}) 20 + (<a href="{post.didLinkToAuthor}" target="_blank">{handleText}</a>, {status}) 20 21 {:else} 21 - (<a href="{post.didLinkToAuthor}" target="_blank">{handle ?? 'see author'}</a>) 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 - return this.author.displayName; 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 - .hashtag :global(.post) { 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 + <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 + </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 + margin-right: 5px; 243 244 } 244 245 245 246 .lycan-import {
+3
src/pages/PostingStatsPage.svelte
··· 109 109 } 110 110 </script> 111 111 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 + </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 + 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 + .quotes :global(p.back) { 79 + padding-left: 10px; 80 + } 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 - <div class="search-page"> 5 + <main class="search-page"> 6 6 {@render children()} 7 - </div> 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 - margin-right: 5px; 59 + margin-right: 3px; 60 60 } 61 61 62 62 @media (prefers-color-scheme: dark) {