zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Make right nav scrollable on short screens (#2186)

zio/stable
Eric Bailey 2023-12-12 13:20:06 -06:00 committed by GitHub
parent e7141a77d8
commit 2f8e7b2656
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 63 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
src/view/shell/desktop/RightNav.tsx
View File

@ -15,6 +15,7 @@ import {useLingui} from '@lingui/react'
import {Plural, Trans, msg, plural} from '@lingui/macro' import {Plural, Trans, msg, plural} from '@lingui/macro'
import {useSession} from '#/state/session' import {useSession} from '#/state/session'
import {useInviteCodesQuery} from '#/state/queries/invites' import {useInviteCodesQuery} from '#/state/queries/invites'
import {ScrollView} from '#/view/com/util/Views'
export function DesktopRightNav() { export function DesktopRightNav() {
const pal = usePalette('default') const pal = usePalette('default')
@ -29,73 +30,77 @@ export function DesktopRightNav() {
return ( return (
<View style={[styles.rightNav, pal.view]}> <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 && ( {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}>
&nbsp;&middot;&nbsp;
</Text>
</>
)}
<TextLink <TextLink
type="md" type="md"
style={pal.link} style={pal.link}
href={FEEDBACK_FORM_URL({ href="https://blueskyweb.xyz/support/privacy-policy"
email: currentAccount?.email, text={_(msg`Privacy`)}
handle: currentAccount?.handle,
})}
text={_(msg`Feedback`)}
/> />
<Text type="md" style={pal.textLight}> <Text type="md" style={pal.textLight}>
&nbsp;&middot;&nbsp; &nbsp;&middot;&nbsp;
</Text> </Text>
</> <TextLink
)} type="md"
<TextLink style={pal.link}
type="md" href="https://blueskyweb.xyz/support/tos"
style={pal.link} text={_(msg`Terms`)}
href="https://blueskyweb.xyz/support/privacy-policy" />
text={_(msg`Privacy`)} <Text type="md" style={pal.textLight}>
/> &nbsp;&middot;&nbsp;
<Text type="md" style={pal.textLight}> </Text>
&nbsp;&middot;&nbsp; <TextLink
</Text> type="md"
<TextLink style={pal.link}
type="md" href={HELP_DESK_URL}
style={pal.link} text={_(msg`Help`)}
href="https://blueskyweb.xyz/support/tos" />
text={_(msg`Terms`)} </View>
/> </View>
<Text type="md" style={pal.textLight}>
&nbsp;&middot;&nbsp;
</Text>
<TextLink
type="md"
style={pal.link}
href={HELP_DESK_URL}
text={_(msg`Help`)}
/>
</View>
</View>
{hasSession && <InviteCodes />} {hasSession && <InviteCodes />}
</View>
</ScrollView>
</View> </View>
) )
} }
@ -168,12 +173,10 @@ function InviteCodes() {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
rightNav: { rightNav: {
position: 'absolute', position: 'absolute',
top: 20,
// @ts-ignore web only // @ts-ignore web only
left: 'calc(50vw + 320px)', left: 'calc(50vw + 320px)',
width: 304, width: 304,
// @ts-ignore web only height: '100%',
maxHeight: '90vh',
}, },
message: { message: {