diff --git a/src/app.tsx b/src/app.tsx index ce795174..0e8eb1ff 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -46,8 +46,8 @@ const BoardLayout = () => { {isMobile ? (subplebbitAddress || isInAllView || isInSubscriptionsView || pendingPost?.subplebbitAddress) && ( <> - + ) : (subplebbitAddress || isInAllView || isInSubscriptionsView || pendingPost?.subplebbitAddress) && ( diff --git a/src/components/board-buttons/board-buttons.module.css b/src/components/board-buttons/board-buttons.module.css index 08e92ef9..ddadba4a 100644 --- a/src/components/board-buttons/board-buttons.module.css +++ b/src/components/board-buttons/board-buttons.module.css @@ -11,6 +11,32 @@ margin: 5px 2px; } +.mobileBoardButtons .secondRow { + margin-top: -5px; + padding-bottom: 20px; +} + +.mobileBoardButtons { + margin-top: -3px; +} + +.mobileBoardButtons .autoCheckbox { + margin: 0 3px 0 0; + position: relative; + top: -2px; + border-radius: 0; + height: 10px; + width: 10px; +} + +.disabledButton { + opacity: 0.5; +} + +.disabledButton:hover { + cursor: not-allowed !important; +} + .mobileBoardButtons a, .desktopBoardButtons a { all: unset; } diff --git a/src/components/board-buttons/board-buttons.tsx b/src/components/board-buttons/board-buttons.tsx index 190710cf..2fa41cb7 100644 --- a/src/components/board-buttons/board-buttons.tsx +++ b/src/components/board-buttons/board-buttons.tsx @@ -11,6 +11,7 @@ import styles from './board-buttons.module.css'; import Tooltip from '../tooltip'; import useCountLinksInReplies from '../../hooks/use-count-links-in-replies'; import _ from 'lodash'; +import useIsMobile from '../../hooks/use-is-mobile'; interface BoardButtonsProps { address?: string | undefined; @@ -85,6 +86,49 @@ const RefreshButton = () => { ); }; +const UpdateButton = () => { + const { t } = useTranslation(); + const isMobile = useIsMobile(); + + return ( + <> + {/* TODO: Implement update button once available in API */} + {isMobile ? ( + + ) : ( + + )} + + ); +}; + +const AutoButton = () => { + const { t } = useTranslation(); + const isMobile = useIsMobile(); + + return ( + <> + {isMobile ? ( + + ) : ( + + )} + + ); +}; + const SortOptions = () => { const { t } = useTranslation(); const { sortType, setSortType } = useSortingStore(); @@ -194,6 +238,10 @@ export const MobileBoardButtons = () => { +
+ + +
) : ( <> @@ -266,7 +314,10 @@ export const DesktopBoardButtons = () => { [ ] [ - ] + ] [ + + ] [ + ] diff --git a/src/components/post-form/post-form.module.css b/src/components/post-form/post-form.module.css index 82373d42..2124f76a 100644 --- a/src/components/post-form/post-form.module.css +++ b/src/components/post-form/post-form.module.css @@ -16,6 +16,7 @@ .postFormMobile { text-align: center; margin-top: -2px; + padding-bottom: 7px; } .closed { diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx index ce19159b..29e367d6 100644 --- a/src/components/post-form/post-form.tsx +++ b/src/components/post-form/post-form.tsx @@ -449,7 +449,6 @@ const PostForm = () => { {showForm ? t('close_post_form') : isInPostView ? t('post_a_reply') : t('start_new_thread')} {showForm && setShowForm(false)} postCid={postCid} />} -
)}