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

Make right nav scrollable on short screens (#2186)

Browse source
This commit is contained in:
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
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 {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}>
&nbsp;&middot;&nbsp;
</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}>
&nbsp;&middot;&nbsp;
</Text>
</>
)}
<TextLink
type="md"
style={pal.link}
href="https://blueskyweb.xyz/support/privacy-policy"
text={_(msg`Privacy`)}
/>
<Text type="md" style={pal.textLight}>
&nbsp;&middot;&nbsp;
</Text>
<TextLink
type="md"
style={pal.link}
href="https://blueskyweb.xyz/support/tos"
text={_(msg`Terms`)}
/>
<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>
<TextLink
type="md"
style={pal.link}
href="https://blueskyweb.xyz/support/tos"
text={_(msg`Terms`)}
/>
<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>
)
}
@ -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: {