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/app.tsx
+17 -7
View File
@@ -1,6 +1,7 @@
import { useEffect } from 'react';
import { Outlet, Route, Routes, useLocation, useParams } from 'react-router-dom';
import { isHomeView } from './lib/utils/view-utils';
import useIsMobile from './hooks/use-is-mobile';
import useTheme from './hooks/use-theme';
import styles from './app.module.css';
import Board from './views/board';
@@ -9,16 +10,17 @@ import Home from './views/home';
import NotFound from './views/not-found';
import PendingPost from './views/pending-post';
import PostPage from './views/post-page';
import BoardHeader from './components/board-header';
import { DesktopBoardButtons, MobileBoardButtons } from './components/board-buttons';
import TopBar from './components/topbar';
import BoardHeader from './components/board-header';
import ChallengeModal from './components/challenge-modal';
import SubplebbitStats from './components/subplebbit-stats';
import PostForm from './components/post-form';
import SubplebbitStats from './components/subplebbit-stats';
import TopBar from './components/topbar';
const BoardLayout = () => {
const { accountCommentIndex, commentCid, subplebbitAddress } = useParams();
const location = useLocation();
const isMobile = useIsMobile();
const isValidAccountCommentIndex = !accountCommentIndex || (!isNaN(parseInt(accountCommentIndex)) && parseInt(accountCommentIndex) >= 0);
const isValidCommentCid = !commentCid || /^Qm[a-zA-Z0-9]{44}$/.test(commentCid);
@@ -35,10 +37,18 @@ const BoardLayout = () => {
<div className={styles.boardLayout}>
<TopBar />
<BoardHeader />
<MobileBoardButtons />
<PostForm key={key} />
{subplebbitAddress && isValidSubplebbitAddress && <SubplebbitStats />}
<DesktopBoardButtons />
{isMobile ? (
<>
<PostForm key={key} />
<MobileBoardButtons />
</>
) : (
<>
<PostForm key={key} />
{subplebbitAddress && isValidSubplebbitAddress && <SubplebbitStats />}
<DesktopBoardButtons />
</>
)}
<Outlet />
</div>
);
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>
src/views/board/board.tsx
+7 -1
View File
@@ -8,6 +8,7 @@ import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils';
import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
import useFeedStateString from '../../hooks/use-feed-state-string';
import useReplyModal from '../../hooks/use-reply-modal';
import useFeedResetStore from '../../stores/use-feed-reset-store';
import LoadingEllipsis from '../../components/loading-ellipsis';
import Post from '../../components/post';
import ReplyModal from '../../components/reply-modal';
@@ -40,7 +41,12 @@ const Board = () => {
}, [isInAllView, isInSubscriptionsView, subplebbitAddress, defaultSubplebbitAddresses, subscriptions]);
const sortType = 'active';
const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses, sortType });
const { feed, hasMore, loadMore, reset } = useFeed({ subplebbitAddresses, sortType });
const setResetFunction = useFeedResetStore((state) => state.setResetFunction);
useEffect(() => {
setResetFunction(reset);
}, [reset, setResetFunction]);
const subplebbit = useSubplebbit({ subplebbitAddress });
const { createdAt, description, rules, shortAddress, state, suggested } = subplebbit || {};