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 buttons): improve layout, increase dimensions of post form on mobile, add refresh buttons

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-05-31 15:16:21 +02:00
parent 1aff0d3ada
commit bc74a9ff77
6 changed files with 83 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/board-buttons/board-buttons.module.css
+1 -6
View File
@@ -1,6 +1,6 @@
.mobileBoardButtons {
text-align: center;
margin-top: 9px;
margin: 10px 0;
}
.mobileBoardButtons button {
@@ -12,11 +12,6 @@
all: unset;
}
.mobilePostPageButtonsSecondRow {
padding-top: 5px;
padding-bottom: 20px;
}
.showBlockedButton {
color: var(--button-desktop-text-color);
}
src/components/board-buttons/board-buttons.tsx
+39 -39
View File
@@ -17,16 +17,11 @@ const OptionsButton = () => {
return <button className='button'>{t('options')}</button>;
};
const CatalogButton = ({ address, isInAllView, isInCatalogView }: BoardButtonsProps) => {
const CatalogButton = ({ address, isInAllView, isInSubscriptionsView }: BoardButtonsProps) => {
const { t } = useTranslation();
return (
<button className='button'>
{isInCatalogView ? (
<Link to={isInAllView ? '/p/all' : `/p/${address}`}>{t('return')}</Link>
) : (
<Link to={isInAllView ? `/p/all/catalog` : `/p/${address}/catalog`}>{t('catalog')}</Link>
)}
<Link to={isInAllView ? `/p/all/catalog` : isInSubscriptionsView ? `/p/subscriptions/catalog` : `/p/${address}/catalog`}>{t('catalog')}</Link>
</button>
);
};
@@ -51,11 +46,12 @@ const ReturnButton = ({ address }: BoardButtonsProps) => {
);
};
const BottomButton = () => {
const { t } = useTranslation();
const RefreshButton = () => {
const reset = useFeedResetStore((state) => state.reset);
return (
<button className='button' onClick={() => window.scrollTo(0, document.body.scrollHeight)}>
{t('bottom')}
<button className='button' onClick={() => reset && reset()}>
Refresh
</button>
);
};
@@ -75,36 +71,28 @@ export const MobileBoardButtons = () => {
return (
<div className={styles.mobileBoardButtons}>
{isInPostView || isInPendingPostPage ? (
<div className={styles.mobilePostPageButtons}>
<>
<ReturnButton address={subplebbitAddress} />
<CatalogButton address={subplebbitAddress} isInAllView={isInAllView} />
<BottomButton />
<div className={styles.mobilePostPageButtonsSecondRow}>
<OptionsButton />
<SubscribeButton address={subplebbitAddress} />
</div>
</div>
<CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />
<OptionsButton />
<SubscribeButton address={subplebbitAddress} />
</>
) : (
<>
{isInCatalogView ? (
<ReturnButton address={subplebbitAddress} />
) : (
<CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />
)}
<OptionsButton />
<CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInCatalogView={isInCatalogView} isInSubscriptionsView={isInSubscriptionsView} />
<SubscribeButton address={subplebbitAddress} />
<RefreshButton />
</>
)}
</div>
);
};
const RefreshButton = () => {
const reset = useFeedResetStore((state) => state.reset);
return (
<button className='button' onClick={() => reset && reset()}>
Refresh
</button>
);
};
export const DesktopBoardButtons = () => {
const params = useParams();
const location = useLocation();
@@ -121,8 +109,24 @@ export const DesktopBoardButtons = () => {
<hr />
{isInPostView || isInPendingPostPage ? (
<>
[<ReturnButton address={subplebbitAddress} />] [<CatalogButton address={subplebbitAddress} />] [<BottomButton />] [
<OptionsButton />]
[
<ReturnButton address={subplebbitAddress} />
] [
<CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />
] [
<OptionsButton />]{' '}
<span className={styles.subscribeButton}>
[<SubscribeButton address={subplebbitAddress} />]
</span>
</>
) : isInCatalogView ? (
<>
[
<ReturnButton address={subplebbitAddress} />
] [
<OptionsButton />
] [
<RefreshButton />]{' '}
<span className={styles.subscribeButton}>
[<SubscribeButton address={subplebbitAddress} />]
</span>
@@ -130,21 +134,17 @@ export const DesktopBoardButtons = () => {
) : (
<>
[
<CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />
] [
<OptionsButton />
] [
<CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInCatalogView={isInCatalogView} isInSubscriptionsView={isInSubscriptionsView} />]{' '}
<RefreshButton />]{' '}
{!(isInAllView || isInSubscriptionsView) && (
<span className={styles.subscribeButton}>
[
<SubscribeButton address={subplebbitAddress} />]
</span>
)}
{isInCatalogView && (
<>
[
<RefreshButton />]
</>
)}
</>
)}
</div>
src/components/post-form/post-form.module.css
+18 -6
View File
@@ -15,12 +15,7 @@
.postFormMobile {
text-align: center;
padding-top: 9px;
padding-bottom: 0.5em;
}
.postFormMobile .showFormButton {
margin-bottom: 5px;
margin-top: -2px;
}
.closed {
@@ -97,6 +92,23 @@
.postFormDesktop {
display: none;
}
.postFormTable {
padding-top: 5px;
max-width: 80%;
}
.postFormTable td input {
height: 20px;
}
.postFormTable td textarea {
height: 80px;
}
.postFormTable button {
padding: 4px 8px;
}
}
@media (min-width: 640px) {
src/components/post-form/post-form.tsx
+1
View File
@@ -293,6 +293,7 @@ const PostForm = () => {
{showForm ? t('close_post_form') : isInPostView ? t('post_a_reply') : t('start_new_thread')}
</button>
{showForm && <PostFormTable closeForm={() => setShowForm(false)} />}
<hr />
</>
)}
</div>