improve offline indicators styling

This commit is contained in:
Tom
2023-05-08 18:45:01 +02:00
parent fdcb090144
commit a00fe30779
4 changed files with 82 additions and 61 deletions
+7 -8
View File
@@ -370,10 +370,6 @@ const Board = () => {
{index === 0 ? null : "\u00a0"}
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
<OfflineIndicator
address={subplebbit.address}
className="offline-nav"
tooltipPlace="bottom" />
{index !== defaultSubplebbits.length - 1 ? " /" : null}
</span>
))}
@@ -428,10 +424,13 @@ const Board = () => {
<div className="banner">
<ImageBanner />
</div>
<>
<div className="board-title">{selectedTitle}</div>
<div className="board-address">p/{selectedAddress}</div>
</>
<div className="board-title">{selectedTitle}</div>
<div className="board-address">p/{selectedAddress}
<OfflineIndicator
address={selectedAddress}
className="offline"
tooltipPlace="top" />
</div>
</>
</Header>
<Break selectedStyle={selectedStyle} />
+21 -10
View File
@@ -172,10 +172,6 @@ const Subscriptions = () => {
{index === 0 ? null : "\u00a0"}
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
<OfflineIndicator
address={subplebbit.address}
className="offline-nav"
tooltipPlace="bottom" />
{index !== defaultSubplebbits.length - 1 ? " /" : null}
</span>
))}
@@ -523,12 +519,27 @@ const Subscriptions = () => {
)}
&nbsp;p/
<Link key={`p-t-${index}`} to={`/p/${thread.subplebbitAddress}`} id="reply-button" title="Visit this board">
{thread.subplebbitAddress.includes(".eth") ? thread.subplebbitAddress : (
<span key={`short-add${index}`}
data-tooltip-id="tooltip"
data-tooltip-content={thread.subplebbitAddress}
data-tooltip-place="top"
>{thread.subplebbitAddress.slice(0, 10) + "(...)"}</span>
{thread.subplebbitAddress.includes(".eth") ?
(
<>
{thread.subplebbitAddress}
<OfflineIndicator key={`offline-reply-${index}`}
address={thread.subplebbitAddress}
tooltipPlace="top"
className="offline-reply" />
</>
) : (
<>
<span key={`short-add${index}`}
data-tooltip-id="tooltip"
data-tooltip-content={thread.subplebbitAddress}
data-tooltip-place="top"
>{thread.subplebbitAddress.slice(0, 10) + "(...)"}</span>
<OfflineIndicator key={`offline-reply-${index}`}
address={thread.subplebbitAddress}
tooltipPlace="top"
className="offline-reply" />
</>
)}
</Link>
</span>&nbsp;