diff options
| author | Eric Bailey <git@esb.lol> | 2023-12-12 13:20:06 -0600 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-12-12 11:20:06 -0800 |
| commit | 2f8e7b265600cf537f385c95cb22647484793b4c (patch) | |
| tree | efc6c7f017cd68bc56b40a14fdac1646107a9e82 | |
| parent | e7141a77d87a25162bf9c075310e097c84017920 (diff) | |
| download | voidsky-2f8e7b265600cf537f385c95cb22647484793b4c.tar.zst | |
Make right nav scrollable on short screens (#2186)
| -rw-r--r-- | src/view/shell/desktop/RightNav.tsx | 123 |
1 files changed, 63 insertions, 60 deletions
diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx index c8196c2c4..7e2f85718 100644 --- a/src/view/shell/desktop/RightNav.tsx +++ b/src/view/shell/desktop/RightNav.tsx @@ -15,6 +15,7 @@ import {useLingui} from '@lingui/react' import {Plural, Trans, msg, plural} from '@lingui/macro' import {useSession} from '#/state/session' import {useInviteCodesQuery} from '#/state/queries/invites' +import {ScrollView} from '#/view/com/util/Views' export function DesktopRightNav() { const pal = usePalette('default') @@ -29,73 +30,77 @@ export function DesktopRightNav() { return ( <View style={[styles.rightNav, pal.view]}> - <DesktopSearch /> + <ScrollView contentContainerStyle={{borderWidth: 0}}> + <View style={{paddingVertical: 20}}> + <DesktopSearch /> - {hasSession && ( - <View style={{paddingTop: 18, marginBottom: 18}}> - <DesktopFeeds /> - </View> - )} - - <View - style={[ - styles.message, - { - paddingTop: hasSession ? 0 : 18, - }, - ]}> - {isSandbox ? ( - <View style={[palError.view, styles.messageLine, s.p10]}> - <Text type="md" style={[palError.text, s.bold]}> - SANDBOX. Posts and accounts are not permanent. - </Text> - </View> - ) : undefined} - <View style={[s.flexRow]}> {hasSession && ( - <> + <View style={{paddingTop: 18, marginBottom: 18}}> + <DesktopFeeds /> + </View> + )} + + <View + style={[ + styles.message, + { + paddingTop: hasSession ? 0 : 18, + }, + ]}> + {isSandbox ? ( + <View style={[palError.view, styles.messageLine, s.p10]}> + <Text type="md" style={[palError.text, s.bold]}> + SANDBOX. Posts and accounts are not permanent. + </Text> + </View> + ) : undefined} + <View style={[s.flexRow]}> + {hasSession && ( + <> + <TextLink + type="md" + style={pal.link} + href={FEEDBACK_FORM_URL({ + email: currentAccount?.email, + handle: currentAccount?.handle, + })} + text={_(msg`Feedback`)} + /> + <Text type="md" style={pal.textLight}> + · + </Text> + </> + )} <TextLink type="md" style={pal.link} - href={FEEDBACK_FORM_URL({ - email: currentAccount?.email, - handle: currentAccount?.handle, - })} - text={_(msg`Feedback`)} + href="https://blueskyweb.xyz/support/privacy-policy" + text={_(msg`Privacy`)} /> <Text type="md" style={pal.textLight}> · </Text> - </> - )} - <TextLink - type="md" - style={pal.link} - href="https://blueskyweb.xyz/support/privacy-policy" - text={_(msg`Privacy`)} - /> - <Text type="md" style={pal.textLight}> - · - </Text> - <TextLink - type="md" - style={pal.link} - href="https://blueskyweb.xyz/support/tos" - text={_(msg`Terms`)} - /> - <Text type="md" style={pal.textLight}> - · - </Text> - <TextLink - type="md" - style={pal.link} - href={HELP_DESK_URL} - text={_(msg`Help`)} - /> - </View> - </View> + <TextLink + type="md" + style={pal.link} + href="https://blueskyweb.xyz/support/tos" + text={_(msg`Terms`)} + /> + <Text type="md" style={pal.textLight}> + · + </Text> + <TextLink + type="md" + style={pal.link} + href={HELP_DESK_URL} + text={_(msg`Help`)} + /> + </View> + </View> - {hasSession && <InviteCodes />} + {hasSession && <InviteCodes />} + </View> + </ScrollView> </View> ) } @@ -168,12 +173,10 @@ function InviteCodes() { const styles = StyleSheet.create({ rightNav: { position: 'absolute', - top: 20, // @ts-ignore web only left: 'calc(50vw + 320px)', width: 304, - // @ts-ignore web only - maxHeight: '90vh', + height: '100%', }, message: { |