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

feat(board header): add yellow offline icon for loading online status, red icon for offline status

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-07-09 14:59:18 +02:00
parent 9f7544936e
commit fe434cb634
10 changed files with 93 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/board-header/board-header.module.css
-5
View File
@@ -29,7 +29,6 @@
}
.offlineIcon {
background-image: url('/public/assets/icons/offline.png');
display: inline-block;
margin-left: 10px;
width: 16px;
@@ -39,10 +38,6 @@
image-rendering: pixelated;
}
.redOfflineIcon {
background-image: url('/public/assets/icons/offline-red.png') !important;
}
@media (max-width: 640px) {
.boardTitle {
padding-top: 40px;
src/components/board-header/board-header.tsx
+2 -3
View File
@@ -34,8 +34,7 @@ const BoardHeader = () => {
const title = isInAllView ? multisubMetadata?.title || 'all' : isInSubscriptionsView ? 'Subscriptions' : subplebbit?.title;
const subtitle = isInAllView ? 'p/all' : isInSubscriptionsView ? 'p/subscriptions' : `p/${address}`;
const { isOffline, isDefinitelyOffline, offlineTitle } = useIsSubplebbitOffline(subplebbit);
const iconClass = `${styles.offlineIcon} ${isDefinitelyOffline ? styles.redOfflineIcon : ''}`;
const { isOffline, isOnlineStatusLoading, offlineIconClass, offlineTitle } = useIsSubplebbitOffline(subplebbit);
return (
<div className={styles.content}>
@@ -46,7 +45,7 @@ const BoardHeader = () => {
)}
<div className={styles.boardTitle}>
{title || `p/${shortAddress || subplebbitAddress}`}
{isOffline && <span className={`${styles.offlineIcon} ${iconClass}`} title={offlineTitle} />}
{(isOffline || isOnlineStatusLoading) && <span className={`${styles.offlineIcon} ${offlineIconClass}`} title={offlineTitle} />}
</div>
<div className={styles.boardSubtitle}>{subtitle}</div>
<hr />
src/components/post-form/post-form.tsx
+2 -2
View File
@@ -277,7 +277,7 @@ const PostForm = () => {
return (
<>
<div className={styles.postFormDesktop}>
{!(isInAllView || isInSubscriptionsView) && showForm && isOffline && <div className={styles.offlineBoard}>{offlineTitle}</div>}
{!(isInAllView || isInSubscriptionsView) && showForm && (isOffline || isOffline) && <div className={styles.offlineBoard}>{offlineTitle}</div>}
{isThreadClosed ? (
<div className={styles.closed}>
{t('thread_closed')}
@@ -297,7 +297,7 @@ const PostForm = () => {
)}
</div>
<div className={styles.postFormMobile}>
{!(isInAllView || isInSubscriptionsView) && showForm && isOffline && <div className={styles.offlineBoard}>{offlineTitle}</div>}
{!(isInAllView || isInSubscriptionsView) && showForm && (isOffline || isOffline) && <div className={styles.offlineBoard}>{offlineTitle}</div>}
{isThreadClosed ? (
<div className={styles.closed}>
{t('thread_closed')}