diff options
author | Gabe Kangas <gabek@real-ity.com> | 2023-05-11 21:42:40 -0700 |
---|---|---|
committer | Gabe Kangas <gabek@real-ity.com> | 2023-05-11 21:42:40 -0700 |
commit | be3a4ab4b1f1ee09e65373656b6009f657b92046 (patch) | |
tree | 9b2b40a7730fe946a0187fdbbcf6fe0239637531 | |
parent | d253081452c24d69b660754ec660705a0c36b9c8 (diff) |
fix(mobile): toggle tablet content layout based on online state. Closes #3003gek/tablet-offline-content-height
-rw-r--r-- | web/components/ui/Content/Content.module.scss | 11 | ||||
-rw-r--r-- | web/components/ui/Content/Content.tsx | 1 | ||||
-rw-r--r-- | web/components/ui/Content/MobileContent.tsx | 5 |
3 files changed, 14 insertions, 3 deletions
diff --git a/web/components/ui/Content/Content.module.scss b/web/components/ui/Content/Content.module.scss index a2dc62ed3..326b51360 100644 --- a/web/components/ui/Content/Content.module.scss +++ b/web/components/ui/Content/Content.module.scss @@ -14,8 +14,7 @@ width: 100%; @include screen(tablet) { - //sets the position of tabbed content for online mode - top: 430px; + position: relative; } @include screen(mobile) { @@ -30,6 +29,14 @@ } } +.online { + @include screen(tablet) { + //sets the position of tabbed content for online mode + position: absolute; + top: 430px; + } +} + .mobileNoTabs { padding-top: 20px; } diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx index 585e09189..33d5380aa 100644 --- a/web/components/ui/Content/Content.tsx +++ b/web/components/ui/Content/Content.tsx @@ -268,6 +268,7 @@ export const Content: FC = () => { setShowFollowModal={setShowFollowModal} supportFediverseFeatures={supportFediverseFeatures} chatEnabled={isChatAvailable} + online={online} /> ) : ( <Col span={24} style={{ paddingRight: dynamicPadding }}> diff --git a/web/components/ui/Content/MobileContent.tsx b/web/components/ui/Content/MobileContent.tsx index f054925a9..487ab27aa 100644 --- a/web/components/ui/Content/MobileContent.tsx +++ b/web/components/ui/Content/MobileContent.tsx @@ -2,6 +2,7 @@ import React, { ComponentType, FC } from 'react'; import dynamic from 'next/dynamic'; import { Skeleton, TabsProps } from 'antd'; import { ErrorBoundary } from 'react-error-boundary'; +import classNames from 'classnames'; import { SocialLink } from '../../../interfaces/social-link.model'; import styles from './Content.module.scss'; import { CustomPageContent } from '../CustomPageContent/CustomPageContent'; @@ -22,6 +23,7 @@ export type MobileContentProps = { currentUser: CurrentUser; showChat: boolean; chatEnabled: boolean; + online: boolean; }; // lazy loaded components @@ -90,6 +92,7 @@ export const MobileContent: FC<MobileContentProps> = ({ chatEnabled, setShowFollowModal, supportFediverseFeatures, + online, }) => { const aboutTabContent = ( <> @@ -134,7 +137,7 @@ export const MobileContent: FC<MobileContentProps> = ({ <ComponentErrorFallback error={error} resetErrorBoundary={resetErrorBoundary} /> )} > - <div className={styles.lowerSectionMobile}> + <div className={classNames([styles.lowerSectionMobile, online && styles.online])}> {items.length > 1 && <Tabs defaultActiveKey="0" items={items} />} </div> <div className={styles.mobileNoTabs}>{items.length <= 1 && aboutTabContent}</div> |