mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
fix(failed-publish): keep bracket actions on one line
Replace mobile-only line breaks with CSS so retry/delete actions wrap as a block without splitting bracket labels across lines.
This commit is contained in:
@@ -1,5 +1,4 @@
|
|||||||
import styles from '../views/post/post.module.css';
|
import styles from '../views/post/post.module.css';
|
||||||
import useIsMobile from '../hooks/use-is-mobile';
|
|
||||||
|
|
||||||
interface FailedPublishNoticeProps {
|
interface FailedPublishNoticeProps {
|
||||||
isDeleting: boolean;
|
isDeleting: boolean;
|
||||||
@@ -9,33 +8,30 @@ interface FailedPublishNoticeProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const FailedPublishNotice = ({ isDeleting, isRetrying = false, onDelete, onRetry }: FailedPublishNoticeProps) => {
|
const FailedPublishNotice = ({ isDeleting, isRetrying = false, onDelete, onRetry }: FailedPublishNoticeProps) => {
|
||||||
const isMobile = useIsMobile();
|
|
||||||
const isBusy = isDeleting || isRetrying;
|
const isBusy = isDeleting || isRetrying;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<span className={styles.failedPublishNotice}>
|
<span className={styles.failedPublishNotice}>
|
||||||
This post failed to publish, it's not visible to other users.{' '}
|
This post failed to publish, it's not visible to other users.
|
||||||
{isMobile && (
|
<span className={styles.failedPublishActions}>
|
||||||
<>
|
{onRetry && (
|
||||||
<br />
|
<>
|
||||||
<br />
|
<span className={styles.failedDeletePostAction}>
|
||||||
</>
|
<span className={styles.failedDeletePostBracket}>[</span>
|
||||||
)}
|
<button type='button' className={styles.failedDeletePostButton} disabled={isBusy} onClick={onRetry}>
|
||||||
{onRetry && (
|
Retry Publish
|
||||||
|
</button>
|
||||||
|
<span className={styles.failedDeletePostBracket}>]</span>
|
||||||
|
</span>{' '}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
<span className={styles.failedDeletePostAction}>
|
<span className={styles.failedDeletePostAction}>
|
||||||
<span className={styles.failedDeletePostBracket}>[</span>
|
<span className={styles.failedDeletePostBracket}>[</span>
|
||||||
<button type='button' className={styles.failedDeletePostButton} disabled={isBusy} onClick={onRetry}>
|
<button type='button' className={styles.failedDeletePostButton} disabled={isBusy} onClick={onDelete}>
|
||||||
Retry Publish
|
Delete Post
|
||||||
</button>
|
</button>
|
||||||
<span className={styles.failedDeletePostBracket}>]</span>
|
<span className={styles.failedDeletePostBracket}>]</span>
|
||||||
</span>
|
</span>
|
||||||
)}{' '}
|
|
||||||
<span className={styles.failedDeletePostAction}>
|
|
||||||
<span className={styles.failedDeletePostBracket}>[</span>
|
|
||||||
<button type='button' className={styles.failedDeletePostButton} disabled={isBusy} onClick={onDelete}>
|
|
||||||
Delete Post
|
|
||||||
</button>
|
|
||||||
<span className={styles.failedDeletePostBracket}>]</span>
|
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -671,8 +671,14 @@
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.failedPublishActions {
|
||||||
|
display: block;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
.failedDeletePostAction {
|
.failedDeletePostAction {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.failedDeletePostBracket {
|
.failedDeletePostBracket {
|
||||||
|
|||||||
Reference in New Issue
Block a user