add offline indicator to subscriptions mobile

This commit is contained in:
Tom
2023-05-06 16:10:27 +02:00
parent 511e2248c9
commit 75867699f5
3 changed files with 57 additions and 18 deletions
+9
View File
@@ -2980,6 +2980,15 @@ export const BoardForm = styled.div`
@media (max-width: 480px) {
margin-bottom: 335px;
.offline-mobile-sub {
width: 18px;
margin-right: 5px;
}
.offline-mobile-sub-reply {
width: 15px;
}
.thread {
display: none;
}
+1 -1
View File
@@ -53,7 +53,7 @@ const Catalog = () => {
const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress});
const [errorMessage, setErrorMessage] = useState(null);
const [successMessage, setSuccessMessage] = useState(null);
const [successMessage] = useState(null);
useError(errorMessage, [errorMessage]);
useSuccess(successMessage, [successMessage]);
+47 -17
View File
@@ -163,12 +163,11 @@ const Subscriptions = () => {
isOpen={isSettingsOpen}
closeModal={() => setIsSettingsOpen(false)} />
<NavBar selectedStyle={selectedStyle}>
<>
<>
<span className="boardList">
[
<Link to="" onClick={() => {}}>Subscriptions</Link>
<Link to={`/profile/p/subscriptions`}>Subscriptions</Link>
]&nbsp;[
</span>
{defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}>
{index === 0 ? null : "\u00a0"}
@@ -179,9 +178,10 @@ const Subscriptions = () => {
className="offline-nav"
tooltipPlace="bottom" />
{index !== defaultSubplebbits.length - 1 ? " /" : null}
</span>
))}
</span>
))}
]
</span>
<span className="nav">
[
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
@@ -675,12 +675,27 @@ const Subscriptions = () => {
<span key={`p-t-mob-span-${index}`} className="date-time-mobile highlight-address-mobile">
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-indicator-${index}`}
address={thread.subplebbitAddress}
tooltipPlace="top"
className="offline-mobile-sub" />
</>
) : (
<>
<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-indicator-${index}`}
address={thread.subplebbitAddress}
tooltipPlace="top"
className="offline-mobile-sub" />
</>
)}
</Link>
</span>
@@ -826,12 +841,27 @@ const Subscriptions = () => {
<span key={`p-t-mob-span-${index}`} className="date-time-mobile highlight-address-mobile">
&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-indicator-${index}`}
address={thread.subplebbitAddress}
tooltipPlace="top"
className="offline-mobile-sub-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-indicator-${index}`}
address={thread.subplebbitAddress}
tooltipPlace="top"
className="offline-mobile-sub-reply" />
</>
)}
</Link>
</span>