External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(views): add CSS effect for useAuthorAddress jank

Browse Source
This commit is contained in:
plebeius.eth
2023-09-26 13:40:28 +02:00
parent 322e2f89b3
commit 40a2ff94ea
6 changed files with 250 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/Board.jsx
+50 -31
View File
@@ -1948,12 +1948,17 @@ const Board = () => {
id='reply-button'
style={{ cursor: 'pointer' }}
onClick={() =>
handleAddressClick(
<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>,
)
handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)
}
>
<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>
<VerifiedAuthor commentCid={thread.cid}>
{({ shortAuthorAddress, authorAddressChanged }) => (
<>
<span className='author-address-hidden'>{thread.author.shortAddress}</span>
<span className={`author-address-visible ${authorAddressChanged ? 'authorAddressChanged' : ''}`}>{shortAuthorAddress}</span>
</>
)}
</VerifiedAuthor>
</span>
) &nbsp;
<span
@@ -2341,28 +2346,32 @@ const Board = () => {
Anonymous
</span>
)}
&nbsp;
&nbsp;(u/
<span
key={`pa-${index}`}
className='poster-address address-desktop'
id='reply-button'
style={{ cursor: 'pointer' }}
onClick={() =>
handleAddressClick(
<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>,
)
handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)
}
>
(u/
{reply.author?.shortAddress ? (
<span key={`mob-ha-${index}`}>{reply.author?.shortAddress}</span>
) : anonymousMode ? (
<span key={`mob-ha-${index}`}>{signerAddress?.slice(8, 20)}</span>
<VerifiedAuthor commentCid={reply.cid}>
{({ shortAuthorAddress, authorAddressChanged }) => (
<>
<span className='author-address-hidden'>{reply.author.shortAddress}</span>
<span className={`author-address-visible ${authorAddressChanged ? 'authorAddressChanged' : ''}`}>
{shortAuthorAddress}
</span>
</>
)}
</VerifiedAuthor>
) : (
<span key={`mob-ha-${index}`}>{account?.author?.shortAddress}</span>
<span key={`mob-ha-${index}`}>{signerAddress?.slice(8, 20)}</span>
)}
)
</span>
)
</span>
&nbsp;
<span
@@ -3154,14 +3163,19 @@ const Board = () => {
id='reply-button'
style={{ cursor: 'pointer' }}
onClick={() =>
handleAddressClick(
<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>,
)
handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)
}
>
(u/
<span key={`mob-ha-${index}`} className='highlight-address-mobile'>
{<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>}
<span key={`mob-ha-${index}`} className='highlight-address-mobile poster-address'>
<VerifiedAuthor commentCid={thread.cid}>
{({ shortAuthorAddress, authorAddressChanged }) => (
<>
<span className='author-address-hidden'>{thread.author.shortAddress}</span>
<span className={`author-address-visible ${authorAddressChanged ? 'authorAddressChanged' : ''}`}>{shortAuthorAddress}</span>
</>
)}
</VerifiedAuthor>
</span>
)&nbsp;
</span>
@@ -3654,21 +3668,26 @@ const Board = () => {
id='reply-button'
style={{ cursor: 'pointer' }}
onClick={() =>
handleAddressClick(
<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>,
)
handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)
}
>
(u/
{reply.author?.shortAddress ? (
<span key={`mob-ha-${index}`} className='highlight-address-mobile'>
{reply.author?.shortAddress}
</span>
) : anonymousMode ? (
<span key={`mob-ha-${index}`}>{signerAddress?.slice(8, 20)}</span>
) : (
<span key={`mob-ha-${index}`}>{account?.author?.shortAddress}</span>
)}
<span key={`mob-ha-${index}`} className='highlight-address-mobile poster-address'>
{reply.author?.shortAddress ? (
<VerifiedAuthor commentCid={reply.cid}>
{({ shortAuthorAddress, authorAddressChanged }) => (
<>
<span className='author-address-hidden'>{reply.author.shortAddress}</span>
<span className={`author-address-visible ${authorAddressChanged ? 'authorAddressChanged' : ''}`}>
{shortAuthorAddress}
</span>
</>
)}
</VerifiedAuthor>
) : (
<span key={`mob-ha-${index}`}>{signerAddress?.slice(8, 20)}</span>
)}
</span>
)&nbsp;
</span>
<br key={`mob-br-${index}`} />