acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Adjust spacing on mobile

Browse Source
This commit is contained in:
Eric Bailey
2024-10-31 14:09:13 -05:00
parent 12a69ae2d1
commit 6363d9da81
1 changed files with 57 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/com/util/post-embeds/GithubGist.tsx
+42 -52
View File
@@ -10,7 +10,7 @@ import {shareUrl} from '#/lib/sharing'
import {toNiceDomain} from '#/lib/strings/url-helpers' import {toNiceDomain} from '#/lib/strings/url-helpers'
import {isNative} from '#/platform/detection' import {isNative} from '#/platform/detection'
import {ExternalLinkEmbedCard} from '#/view/com/util/post-embeds/ExternalLinkEmbed' import {ExternalLinkEmbedCard} from '#/view/com/util/post-embeds/ExternalLinkEmbed'
import {atoms as a, useTheme} from '#/alf' import {atoms as a, useBreakpoints,useTheme} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button' import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {Divider} from '#/components/Divider' import {Divider} from '#/components/Divider'
import {ChevronBottom_Stroke2_Corner0_Rounded as Chevron} from '#/components/icons/Chevron' import {ChevronBottom_Stroke2_Corner0_Rounded as Chevron} from '#/components/icons/Chevron'
@@ -31,6 +31,7 @@ export function GithubGist({
}) { }) {
const t = useTheme() const t = useTheme()
const {_} = useLingui() const {_} = useLingui()
const {gtMobile} = useBreakpoints()
const [footerHeight, setFooterHeight] = React.useState(97) // magic # const [footerHeight, setFooterHeight] = React.useState(97) // magic #
const [showMore, setShowMore] = React.useState<boolean | undefined>() const [showMore, setShowMore] = React.useState<boolean | undefined>()
@@ -67,13 +68,15 @@ export function GithubGist({
const onCodeLayout = React.useCallback( const onCodeLayout = React.useCallback(
(e: LayoutChangeEvent) => { (e: LayoutChangeEvent) => {
if (e.nativeEvent.layout.height < 400) { if (showMore !== undefined) return
const height = e.nativeEvent.layout.height
if (height < 400) {
setShowMore(true) setShowMore(true)
} else { } else {
setShowMore(false) setShowMore(false)
} }
}, },
[setShowMore], [showMore, setShowMore],
) )
const onShowMore = React.useCallback(() => { const onShowMore = React.useCallback(() => {
@@ -97,35 +100,32 @@ export function GithubGist({
]}> ]}>
<View style={[t.atoms.bg_contrast_25]}> <View style={[t.atoms.bg_contrast_25]}>
{error ? null : !files ? ( // handled above {error ? null : !files ? ( // handled above
<View style={[a.p_lg]}> <View style={[gtMobile ? a.p_lg : a.p_md]}>
<Loader /> <Loader />
</View> </View>
) : ( ) : (
<View style={[a.relative]}> <View style={[a.relative]}>
<View style={[a.relative]}> <View style={[gtMobile ? a.pt_lg : a.pt_md, a.relative]}>
<ScrollView <ScrollView
style={[ style={[
a.pt_lg, a.overflow_hidden,
{ showMore === undefined || showMore === false
maxHeight: ? {
showMore === undefined maxHeight: MAX_HEIGHT,
? MAX_HEIGHT }
: showMore : {},
? undefined
: MAX_HEIGHT,
},
]}> ]}>
<ScrollView <ScrollView
horizontal horizontal
style={[{paddingBottom: footerHeight}]} onLayout={onCodeLayout}
onLayout={onCodeLayout}> style={[{paddingBottom: footerHeight}]}>
<View> <View>
<View <View
style={[ style={[
a.flex_row, a.flex_row,
a.align_center, a.align_center,
a.gap_xs, a.gap_xs,
a.px_lg, gtMobile ? a.px_lg : a.px_md,
a.pb_md, a.pb_md,
]}> ]}>
<Code <Code
@@ -147,12 +147,12 @@ export function GithubGist({
</View> </View>
<Text <Text
style={[ style={[
a.px_lg, gtMobile ? a.px_lg : a.px_md,
{ {
fontFamily: 'monospace', fontFamily: 'monospace',
}, },
]}> ]}>
{files[0].content} {files[0].content.trimRight()}
</Text> </Text>
</View> </View>
</ScrollView> </ScrollView>
@@ -161,23 +161,23 @@ export function GithubGist({
{showMore === false && <View style={[a.absolute, a.inset_0]} />} {showMore === false && <View style={[a.absolute, a.inset_0]} />}
</View> </View>
<View
style={[a.absolute, a.inset_0, a.p_lg, {top: 'auto'}]}
onLayout={onFooterLayout}>
<View style={[a.absolute, a.inset_0]}>
{showMore === false && (
<View <View
style={[ style={[
a.absolute, a.absolute,
a.flex_row, a.inset_0,
a.justify_center, gtMobile ? a.p_lg : a.p_md,
{ {top: 'auto'},
left: 0, ]}
right: 0, onLayout={onFooterLayout}>
top: 0, <LinearGradient
transform: [{translateY: '-100%'}], colors={['rgba(0, 17, 36,0)', 'rgba(0, 17, 36,0.5)']}
}, locations={[0, 1]}
]}> start={{x: 0, y: 0}}
end={{x: 0, y: 1}}
style={[a.absolute, a.inset_0]}
/>
{showMore === false && (
<View style={[a.flex_row, a.justify_center, a.pb_md]}>
<Button <Button
label={_(msg`Show more`)} label={_(msg`Show more`)}
size="small" size="small"
@@ -195,14 +195,6 @@ export function GithubGist({
</Button> </Button>
</View> </View>
)} )}
<LinearGradient
colors={['rgba(0,0,0,0)', 'rgba(0,0,0,0.5)']}
locations={[0, 1]}
start={{x: 0, y: 0}}
end={{x: 0, y: 1}}
style={[a.absolute, a.inset_0]}
/>
</View>
<Link <Link
label={info.title || _(msg`Open this Gist`)} label={info.title || _(msg`Open this Gist`)}
@@ -216,16 +208,15 @@ export function GithubGist({
a.rounded_sm, a.rounded_sm,
a.border, a.border,
{gap: 3}, {gap: 3},
t.atoms.bg_contrast_100, t.atoms.bg,
t.atoms.border_contrast_high, hovered
hovered && { ? t.atoms.border_contrast_high
borderColor: t.palette.contrast_400, : t.atoms.border_contrast_low,
},
]}> ]}>
<View style={[{gap: 3}, a.pb_xs, a.px_md]}> <View style={[{gap: 3}, a.pb_xs, a.px_md]}>
<Text <Text
emoji emoji
numberOfLines={3} numberOfLines={2}
style={[a.text_md, a.font_bold, a.leading_snug]}> style={[a.text_md, a.font_bold, a.leading_snug]}>
{info.title || info.uri} {info.title || info.uri}
</Text> </Text>
@@ -233,10 +224,9 @@ export function GithubGist({
<View style={[a.px_md]}> <View style={[a.px_md]}>
<Divider <Divider
style={[ style={[
t.atoms.border_contrast_high, hovered
hovered && { ? t.atoms.border_contrast_high
borderColor: t.palette.contrast_400, : t.atoms.border_contrast_low,
},
]} ]}
/> />
<View <View
@@ -254,7 +244,7 @@ export function GithubGist({
style={[ style={[
a.transition_color, a.transition_color,
hovered hovered
? t.atoms.text_contrast_medium ? t.atoms.text_contrast_high
: t.atoms.text_contrast_low, : t.atoms.text_contrast_low,
]} ]}
/> />