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 tooltips for offline indicator, styling

Browse Source
This commit is contained in:
Tom
2023-05-15 14:07:14 +02:00
parent d79e2ae71f
commit ba0bdbfac2
4 changed files with 53 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BoardAvatar.jsx
+5 -15
View File
@@ -15,21 +15,11 @@ const BoardAvatar = ({ address }) => {
}, [subplebbit.suggested?.avatarUrl, subplebbit]); }, [subplebbit.suggested?.avatarUrl, subplebbit]);
return ( return (
<> <img
<div className="board-avatar-container"> className="board-avatar"
<img alt="board logo"
className="board-avatar" src={avatarUrl}
alt="board logo" />
src={avatarUrl}
/>
{!isOnline && (
<img className="offline-indicator" alt="offline" src="assets/offline.png"
data-tooltip-id="tooltip"
data-tooltip-content="Offline"
data-tooltip-place="top" />
)}
</div>
</>
); );
}; };
src/components/styled/Board.styled.jsx
+4 -4
View File
@@ -1631,14 +1631,14 @@ export const BoardForm = styled.div`
.offline-sub { .offline-sub {
width: 13px; width: 13px;
margin-right: -5px; margin-right: -5px;
margin-bottom: -3px; margin-bottom: -1px;
position: relative; position: relative;
} }
.offline-reply { .offline-reply {
width: 13px; width: 13px;
margin-right: 2px; margin-right: 2px;
margin-bottom: -3px; margin-bottom: -1px;
position: relative; position: relative;
} }
@@ -2994,13 +2994,13 @@ export const BoardForm = styled.div`
.offline-mobile-sub { .offline-mobile-sub {
width: 13px; width: 13px;
margin-top: 3px; margin-top: 4px;
margin-right: 5px; margin-right: 5px;
} }
.offline-mobile-sub-reply { .offline-mobile-sub-reply {
width: 13px; width: 13px;
margin-top: 3px; margin-top: 4px;
} }
.thread { .thread {
src/components/views/Home.jsx
+15 -9
View File
@@ -107,11 +107,11 @@ const Home = () => {
to={`/p/${subscription}`}> to={`/p/${subscription}`}>
<br id="mobile-br" /> <br id="mobile-br" />
{subscription}&nbsp; {subscription}&nbsp;
<OfflineIndicator </Link>
<OfflineIndicator
address={subscription} address={subscription}
className="disconnected" className="disconnected"
tooltipPlace="top" /> tooltipPlace="top" />
</Link>
<br /> <br />
</> </>
))} ))}
@@ -129,13 +129,19 @@ const Home = () => {
<div className="board-title"> <div className="board-title">
{subplebbit.title ? subplebbit.title : <span style={{userSelect: "none"}}>&nbsp;</span>} {subplebbit.title ? subplebbit.title : <span style={{userSelect: "none"}}>&nbsp;</span>}
</div> </div>
<Link to={`/p/${subplebbit.address}`} onClick={() => { <div className="board-avatar-container">
setSelectedTitle(subplebbit.title); <Link to={`/p/${subplebbit.address}`} onClick={() => {
setSelectedAddress(subplebbit.address); setSelectedTitle(subplebbit.title);
window.scrollTo(0, 0); setSelectedAddress(subplebbit.address);
}} > window.scrollTo(0, 0);
<BoardAvatar address={subplebbit.address} /> }} >
</Link> <BoardAvatar address={subplebbit.address} />
</Link>
<OfflineIndicator
address={subplebbit.address}
className="offline-indicator"
tooltipPlace="top" />
</div>
<div className="board-text"> <div className="board-text">
<b>{subplebbit.address}</b> <b>{subplebbit.address}</b>
</div> </div>
src/components/views/Subscriptions.jsx
+29 -53
View File
@@ -427,7 +427,7 @@ const Subscriptions = () => {
data-tooltip-content={thread.subplebbitAddress} data-tooltip-content={thread.subplebbitAddress}
data-tooltip-place="top" data-tooltip-place="top"
>{thread.subplebbitAddress.slice(0, 10) + "(...)"}</span> >{thread.subplebbitAddress.slice(0, 10) + "(...)"}</span>
)} )}
</Link> </Link>
<OfflineIndicator key={`oi-${index}`} <OfflineIndicator key={`oi-${index}`}
address={thread.subplebbitAddress} address={thread.subplebbitAddress}
@@ -553,28 +553,20 @@ const Subscriptions = () => {
&nbsp;p/ &nbsp;p/
<Link key={`p-t-${index}`} to={`/p/${thread.subplebbitAddress}`} id="reply-button" title="Visit this board"> <Link key={`p-t-${index}`} to={`/p/${thread.subplebbitAddress}`} id="reply-button" title="Visit this board">
{thread.subplebbitAddress.includes(".eth") ? {thread.subplebbitAddress.includes(".eth") ?
(thread.subplebbitAddress) :
( (
<> <span key={`short-add${index}`}
{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-id="tooltip"
data-tooltip-content={thread.subplebbitAddress} data-tooltip-content={thread.subplebbitAddress}
data-tooltip-place="top" data-tooltip-place="top"
>{thread.subplebbitAddress.slice(0, 10) + "(...)"}</span> >{thread.subplebbitAddress.slice(0, 10) + "(...)"}
<OfflineIndicator key={`offline-reply-${index}`} </span>
address={thread.subplebbitAddress} )}
tooltipPlace="top"
className="offline-reply" />
</>
)}
</Link> </Link>
<OfflineIndicator key={`offline-reply-${index}`}
address={thread.subplebbitAddress}
tooltipPlace="top"
className="offline-reply" />
</span>&nbsp; </span>&nbsp;
<button key={`pmb-${index}`} className="post-menu-button" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }} data-cmd="post-menu">▶</button> <button key={`pmb-${index}`} className="post-menu-button" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }} data-cmd="post-menu">▶</button>
<div id="backlink-id" className="backlink"> <div id="backlink-id" className="backlink">
@@ -729,28 +721,20 @@ const Subscriptions = () => {
p/ p/
<Link key={`p-t-${index}`} to={`/p/${thread.subplebbitAddress}`} id="reply-button" title="Visit this board"> <Link key={`p-t-${index}`} to={`/p/${thread.subplebbitAddress}`} id="reply-button" title="Visit this board">
{thread.subplebbitAddress.includes(".eth") ? {thread.subplebbitAddress.includes(".eth") ?
(thread.subplebbitAddress) :
( (
<> <span key={`short-add${index}`}
{thread.subplebbitAddress}
<OfflineIndicator key={`offline-indicator-${index}`}
address={thread.subplebbitAddress}
tooltipPlace="top"
className="offline-mobile-sub" />
</>
) : (
<>
<span key={`short-add${index}`}
data-tooltip-id="tooltip" data-tooltip-id="tooltip"
data-tooltip-content={thread.subplebbitAddress} data-tooltip-content={thread.subplebbitAddress}
data-tooltip-place="top" data-tooltip-place="top"
>{thread.subplebbitAddress.slice(0, 10) + "(...)"}</span> >{thread.subplebbitAddress.slice(0, 10) + "(...)"}
<OfflineIndicator key={`offline-indicator-${index}`} </span>
address={thread.subplebbitAddress} )}
tooltipPlace="top"
className="offline-mobile-sub" />
</>
)}
</Link> </Link>
<OfflineIndicator key={`offline-indicator-${index}`}
address={thread.subplebbitAddress}
tooltipPlace="top"
className="offline-mobile-sub" />
</span> </span>
<span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile"> <span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
{getDate(thread.timestamp)} {getDate(thread.timestamp)}
@@ -894,30 +878,22 @@ const Subscriptions = () => {
</span> </span>
<span key={`p-t-mob-span-${index}`} className="date-time-mobile highlight-address-mobile"> <span key={`p-t-mob-span-${index}`} className="date-time-mobile highlight-address-mobile">
&nbsp;p/ &nbsp;p/
<Link key={`p-t-${index}`} to={`/p/${thread.subplebbitAddress}`} id="reply-button" title="Visit this board"> <Link key={`p-t-${index}`} to={`/p/${thread.subplebbitAddress}`} id="reply-button" title="Visit this board">
{thread.subplebbitAddress.includes(".eth") ? {thread.subplebbitAddress.includes(".eth") ?
(thread.subplebbitAddress) :
( (
<> <span key={`short-add${index}`}
{thread.subplebbitAddress}
<OfflineIndicator key={`offline-indicator-${index}`}
address={thread.subplebbitAddress}
tooltipPlace="top"
className="offline-mobile-sub-reply" />
</>
) : (
<>
<span key={`short-add${index}`}
data-tooltip-id="tooltip" data-tooltip-id="tooltip"
data-tooltip-content={thread.subplebbitAddress} data-tooltip-content={thread.subplebbitAddress}
data-tooltip-place="top" data-tooltip-place="top"
>{thread.subplebbitAddress.slice(0, 10) + "(...)"}</span> >{thread.subplebbitAddress.slice(0, 10) + "(...)"}
<OfflineIndicator key={`offline-indicator-${index}`} </span>
address={thread.subplebbitAddress} )}
tooltipPlace="top"
className="offline-mobile-sub-reply" />
</>
)}
</Link> </Link>
<OfflineIndicator key={`offline-indicator-${index}`}
address={thread.subplebbitAddress}
tooltipPlace="top"
className="offline-mobile-sub-reply" />
</span> </span>
<span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile"> <span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
{getDate(reply.timestamp)}&nbsp; {getDate(reply.timestamp)}&nbsp;