Fix border on some listing screens (#5115)

* Fix border on PostQuotes, add debug atom

* Add util_screen_outer, apply to h_full_vh here needed
zio/stable
Eric Bailey 2024-09-03 13:50:48 -05:00 committed by GitHub
parent 5c2e9f09bf
commit ddda612c11
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 24 additions and 6 deletions

View File

@ -1,9 +1,14 @@
import {Platform, StyleSheet} from 'react-native' import {Platform, StyleSheet, ViewStyle} from 'react-native'
import * as tokens from '#/alf/tokens' import * as tokens from '#/alf/tokens'
import {native, web} from '#/alf/util/platform' import {native, web} from '#/alf/util/platform'
export const atoms = { export const atoms = {
debug: {
borderColor: 'red',
borderWidth: 1,
},
/* /*
* Positioning * Positioning
*/ */
@ -55,6 +60,19 @@ export const atoms = {
height: '100vh', height: '100vh',
}), }),
/**
* Used for the outermost components on screens, to ensure that they can fill
* the screen and extend beyond.
*/
util_screen_outer: [
web({
minHeight: '100vh',
}),
native({
height: '100%',
}),
] as ViewStyle,
/* /*
* Theme-independent bg colors * Theme-independent bg colors
*/ */

View File

@ -27,7 +27,7 @@ export const PostLikedByScreen = ({route}: Props) => {
) )
return ( return (
<CenteredView style={a.h_full_vh} sideBorders={true}> <CenteredView style={a.util_screen_outer} sideBorders={true}>
<ListHeaderDesktop title={_(msg`Liked By`)} /> <ListHeaderDesktop title={_(msg`Liked By`)} />
<ViewHeader title={_(msg`Liked By`)} showBorder={!isWeb} /> <ViewHeader title={_(msg`Liked By`)} showBorder={!isWeb} />
<PostLikedByComponent uri={uri} /> <PostLikedByComponent uri={uri} />

View File

@ -27,7 +27,7 @@ export const PostQuotesScreen = ({route}: Props) => {
) )
return ( return (
<CenteredView style={a.h_full_vh} sideBorders={true}> <CenteredView style={a.util_screen_outer} sideBorders={true}>
<ListHeaderDesktop title={_(msg`Quotes`)} /> <ListHeaderDesktop title={_(msg`Quotes`)} />
<ViewHeader title={_(msg`Quotes`)} showBorder={!isWeb} /> <ViewHeader title={_(msg`Quotes`)} showBorder={!isWeb} />
<PostQuotesComponent uri={uri} /> <PostQuotesComponent uri={uri} />

View File

@ -27,7 +27,7 @@ export const PostRepostedByScreen = ({route}: Props) => {
) )
return ( return (
<CenteredView style={a.h_full_vh} sideBorders={true}> <CenteredView style={a.util_screen_outer} sideBorders={true}>
<ListHeaderDesktop title={_(msg`Reposted By`)} /> <ListHeaderDesktop title={_(msg`Reposted By`)} />
<ViewHeader title={_(msg`Reposted By`)} showBorder={!isWeb} /> <ViewHeader title={_(msg`Reposted By`)} showBorder={!isWeb} />
<PostRepostedByComponent uri={uri} /> <PostRepostedByComponent uri={uri} />

View File

@ -25,7 +25,7 @@ export const ProfileFollowersScreen = ({route}: Props) => {
) )
return ( return (
<CenteredView style={a.h_full_vh} sideBorders={true}> <CenteredView style={a.util_screen_outer} sideBorders={true}>
<ListHeaderDesktop title={_(msg`Followers`)} /> <ListHeaderDesktop title={_(msg`Followers`)} />
<ViewHeader title={_(msg`Followers`)} showBorder={!isWeb} /> <ViewHeader title={_(msg`Followers`)} showBorder={!isWeb} />
<ProfileFollowersComponent name={name} /> <ProfileFollowersComponent name={name} />

View File

@ -25,7 +25,7 @@ export const ProfileFollowsScreen = ({route}: Props) => {
) )
return ( return (
<CenteredView style={a.h_full_vh} sideBorders={true}> <CenteredView style={a.util_screen_outer} sideBorders={true}>
<ListHeaderDesktop title={_(msg`Following`)} /> <ListHeaderDesktop title={_(msg`Following`)} />
<ViewHeader title={_(msg`Following`)} showBorder={!isWeb} /> <ViewHeader title={_(msg`Following`)} showBorder={!isWeb} />
<ProfileFollowsComponent name={name} /> <ProfileFollowsComponent name={name} />