diff --git a/src/app.tsx b/src/app.tsx index 18d5ee9a..56b03e4d 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -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 = () => {
- - - {subplebbitAddress && isValidSubplebbitAddress && } - + {isMobile ? ( + <> + + + + ) : ( + <> + + {subplebbitAddress && isValidSubplebbitAddress && } + + + )}
); diff --git a/src/components/board-buttons/board-buttons.module.css b/src/components/board-buttons/board-buttons.module.css index 8c3bb2ae..698546c9 100644 --- a/src/components/board-buttons/board-buttons.module.css +++ b/src/components/board-buttons/board-buttons.module.css @@ -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); } diff --git a/src/components/board-buttons/board-buttons.tsx b/src/components/board-buttons/board-buttons.tsx index c5609a63..cae1a784 100644 --- a/src/components/board-buttons/board-buttons.tsx +++ b/src/components/board-buttons/board-buttons.tsx @@ -17,16 +17,11 @@ const OptionsButton = () => { return ; }; -const CatalogButton = ({ address, isInAllView, isInCatalogView }: BoardButtonsProps) => { +const CatalogButton = ({ address, isInAllView, isInSubscriptionsView }: BoardButtonsProps) => { const { t } = useTranslation(); - return ( ); }; @@ -51,11 +46,12 @@ const ReturnButton = ({ address }: BoardButtonsProps) => { ); }; -const BottomButton = () => { - const { t } = useTranslation(); +const RefreshButton = () => { + const reset = useFeedResetStore((state) => state.reset); + return ( - ); }; @@ -75,36 +71,28 @@ export const MobileBoardButtons = () => { return (
{isInPostView || isInPendingPostPage ? ( -
+ <> - - -
- - -
-
+ + + + ) : ( <> + {isInCatalogView ? ( + + ) : ( + + )} - + )}
); }; -const RefreshButton = () => { - const reset = useFeedResetStore((state) => state.reset); - - return ( - - ); -}; - export const DesktopBoardButtons = () => { const params = useParams(); const location = useLocation(); @@ -121,8 +109,24 @@ export const DesktopBoardButtons = () => {
{isInPostView || isInPendingPostPage ? ( <> - [] [] [] [ - ] + [ + + ] [ + + ] [ + ]{' '} + + [] + + + ) : isInCatalogView ? ( + <> + [ + + ] [ + + ] [ + ]{' '} [] @@ -130,21 +134,17 @@ export const DesktopBoardButtons = () => { ) : ( <> [ + + ] [ ] [ - ]{' '} + ]{' '} {!(isInAllView || isInSubscriptionsView) && ( [ ] )} - {isInCatalogView && ( - <> - [ - ] - - )} )} diff --git a/src/components/post-form/post-form.module.css b/src/components/post-form/post-form.module.css index 71e01e1a..4ae02b52 100644 --- a/src/components/post-form/post-form.module.css +++ b/src/components/post-form/post-form.module.css @@ -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) { diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx index ed4af3c8..f9e7f4d2 100644 --- a/src/components/post-form/post-form.tsx +++ b/src/components/post-form/post-form.tsx @@ -293,6 +293,7 @@ const PostForm = () => { {showForm ? t('close_post_form') : isInPostView ? t('post_a_reply') : t('start_new_thread')} {showForm && setShowForm(false)} />} +
)} diff --git a/src/views/board/board.tsx b/src/views/board/board.tsx index 123831e6..df91f680 100644 --- a/src/views/board/board.tsx +++ b/src/views/board/board.tsx @@ -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 || {};