Standardize bottom section background + fix mobile tabs not hiding. Closes #2685

This commit is contained in:
Gabe Kangas
2023-02-21 16:15:09 -08:00
parent 684e92f3d2
commit 3bb73af1c2
5 changed files with 41 additions and 25 deletions

View File

@@ -95,18 +95,25 @@ export const MobileContent: FC<MobileContentProps> = ({
links={socialHandles}
logo="/logo"
/>
<CustomPageContent content={extraPageContent} />
<div className={styles.bottomPageContentContainer}>
<CustomPageContent content={extraPageContent} />
</div>
</>
);
const followersTabContent = (
<FollowerCollection name={name} onFollowButtonClick={() => setShowFollowModal(true)} />
<div className={styles.bottomPageContentContainer}>
<FollowerCollection name={name} onFollowButtonClick={() => setShowFollowModal(true)} />
</div>
);
const items = [
showChat && { label: 'Chat', key: '0', children: chatContent },
{ label: 'About', key: '2', children: aboutTabContent },
{ label: 'Followers', key: '3', children: followersTabContent },
];
const items = [];
if (showChat) {
items.push({ label: 'Chat', key: '0', children: chatContent });
}
items.push({ label: 'About', key: '2', children: aboutTabContent });
if (supportFediverseFeatures) {
items.push({ label: 'Followers', key: '3', children: followersTabContent });
}
const replacementTabBar = (props, DefaultTabBar) => (
<div className={styles.replacementBar}>
@@ -125,12 +132,16 @@ export const MobileContent: FC<MobileContentProps> = ({
return (
<div className={styles.lowerSectionMobile}>
<Tabs
className={styles.tabs}
defaultActiveKey="0"
items={items}
renderTabBar={replacementTabBar}
/>
{items.length > 1 ? (
<Tabs
className={styles.tabs}
defaultActiveKey="0"
items={items}
renderTabBar={replacementTabBar}
/>
) : (
aboutTabContent
)}
</div>
);
};