Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(feed): Remove max width for posts view #1517

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+71 −75
Open

fix(feed): Remove max width for posts view #1517

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 9 additions & 12 deletions packages/screens/FeedPostView/components/FeedPostArticleMarkdownView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,7 @@ import {
SOCIAl_CARD_BORDER_RADIUS,
} from "@/utils/social-feed";
import { neutral33 } from "@/utils/style/colors";
import {
layout,
RESPONSIVE_BREAKPOINT_S,
screenContentMaxWidth,
} from "@/utils/style/layout";
import { layout, RESPONSIVE_BREAKPOINT_S } from "@/utils/style/layout";
import { tinyAddress } from "@/utils/text";
import {
OnPressReplyType,
Expand All @@ -69,6 +65,8 @@ export const FeedPostArticleMarkdownView: FC<{
const navigation = useAppNavigation();
const { width: windowWidth } = useWindowDimensions();
const { width } = useMaxResolution();
const isSmallScreen = windowWidth < RESPONSIVE_BREAKPOINT_S;
const contentWidth = isSmallScreen ? windowWidth : width;
const isMobile = useIsMobile();
const [parentOffsetValue, setParentOffsetValue] = useState(0);

Expand Down Expand Up @@ -192,16 +190,18 @@ export const FeedPostArticleMarkdownView: FC<{
>
<Animated.ScrollView
ref={aref}
contentContainerStyle={contentContainerCStyle}
contentContainerStyle={[
contentContainerCStyle,
{ width: contentWidth },
]}
onScroll={scrollHandler}
scrollEventThrottle={1}
>
{/* ScreenContainer has noScroll, so we need to add MobileTitle here */}
{isMobile && <MobileTitle title={headerLabel.toUpperCase()} />}
<View
style={{
width: windowWidth < RESPONSIVE_BREAKPOINT_S ? windowWidth : width,
maxWidth: screenContentMaxWidth,
width: "100%",
alignItems: "center",
paddingVertical: layout.spacing_x2,
}}
Expand All @@ -220,10 +220,7 @@ export const FeedPostArticleMarkdownView: FC<{
maxWidth: ARTICLE_MAX_WIDTH + contentPaddingHorizontal * 2,
borderBottomWidth: 1,
borderBottomColor: neutral33,
borderRadius:
windowWidth < RESPONSIVE_BREAKPOINT_S
? 0
: SOCIAl_CARD_BORDER_RADIUS,
borderRadius: isSmallScreen ? 0 : SOCIAl_CARD_BORDER_RADIUS,
paddingHorizontal: contentPaddingHorizontal,
paddingBottom: layout.spacing_x2,
}}
Expand Down
24 changes: 9 additions & 15 deletions packages/screens/FeedPostView/components/FeedPostArticleView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,17 +36,12 @@ import { zodTryParseJSON } from "@/utils/sanitize";
import {
ARTICLE_COVER_IMAGE_MAX_HEIGHT,
ARTICLE_COVER_IMAGE_RATIO,
ARTICLE_MAX_WIDTH,
DEFAULT_USERNAME,
LINES_HORIZONTAL_SPACE,
SOCIAl_CARD_BORDER_RADIUS,
} from "@/utils/social-feed";
import { neutral33 } from "@/utils/style/colors";
import {
layout,
RESPONSIVE_BREAKPOINT_S,
screenContentMaxWidth,
} from "@/utils/style/layout";
import { layout, RESPONSIVE_BREAKPOINT_S } from "@/utils/style/layout";
import { tinyAddress } from "@/utils/text";
import {
OnPressReplyType,
Expand All @@ -66,6 +61,8 @@ export const FeedPostArticleView: FC<{
const navigation = useAppNavigation();
const { width: windowWidth } = useWindowDimensions();
const { width } = useMaxResolution();
const isSmallScreen = windowWidth < RESPONSIVE_BREAKPOINT_S;
const contentWidth = isSmallScreen ? windowWidth : width;
const isMobile = useIsMobile();
const [parentOffsetValue, setParentOffsetValue] = useState(0);

Expand Down Expand Up @@ -197,16 +194,18 @@ export const FeedPostArticleView: FC<{
>
<Animated.ScrollView
ref={aref}
contentContainerStyle={contentContainerCStyle}
contentContainerStyle={[
contentContainerCStyle,
{ width: contentWidth },
]}
onScroll={scrollHandler}
scrollEventThrottle={1}
>
{/* ScreenContainer has noScroll, so we need to add MobileTitle here */}
{isMobile && <MobileTitle title={headerLabel.toUpperCase()} />}
<View
style={{
width: windowWidth < RESPONSIVE_BREAKPOINT_S ? windowWidth : width,
maxWidth: screenContentMaxWidth,
width: "100%",
alignItems: "center",
paddingVertical: layout.spacing_x2,
}}
Expand All @@ -222,13 +221,9 @@ export const FeedPostArticleView: FC<{
}}
style={{
width: "100%",
maxWidth: ARTICLE_MAX_WIDTH + contentPaddingHorizontal * 2,
borderBottomWidth: 1,
borderBottomColor: neutral33,
borderRadius:
windowWidth < RESPONSIVE_BREAKPOINT_S
? 0
: SOCIAl_CARD_BORDER_RADIUS,
borderRadius: isSmallScreen ? 0 : SOCIAl_CARD_BORDER_RADIUS,
paddingHorizontal: contentPaddingHorizontal,
paddingBottom: layout.spacing_x2,
}}
Expand All @@ -243,7 +238,6 @@ export const FeedPostArticleView: FC<{
style={{
width: "100%",
aspectRatio: ARTICLE_COVER_IMAGE_RATIO,
// height: ARTICLE_COVER_IMAGE_MAX_HEIGHT/1.6,
maxHeight: ARTICLE_COVER_IMAGE_MAX_HEIGHT,
}}
/>
Expand Down
99 changes: 53 additions & 46 deletions packages/screens/FeedPostView/components/FeedPostDefaultView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,7 @@ import { useMaxResolution } from "@/hooks/useMaxResolution";
import { useNSUserInfo } from "@/hooks/useNSUserInfo";
import { parseUserId } from "@/networks";
import { DEFAULT_USERNAME, LINES_HORIZONTAL_SPACE } from "@/utils/social-feed";
import {
layout,
RESPONSIVE_BREAKPOINT_S,
screenContentMaxWidth,
} from "@/utils/style/layout";
import { layout, RESPONSIVE_BREAKPOINT_S } from "@/utils/style/layout";
import { tinyAddress } from "@/utils/text";
import {
OnPressReplyType,
Expand All @@ -50,6 +46,8 @@ export const FeedPostDefaultView: FC<{

const { width: windowWidth } = useWindowDimensions();
const { width } = useMaxResolution();
const isSmallScreen = windowWidth < RESPONSIVE_BREAKPOINT_S;
const contentWidth = isSmallScreen ? windowWidth : width;
const isMobile = useIsMobile();
const [parentOffsetValue, setParentOffsetValue] = useState(0);

Expand Down Expand Up @@ -163,16 +161,18 @@ export const FeedPostDefaultView: FC<{
>
<Animated.ScrollView
ref={aref}
contentContainerStyle={contentContainerCStyle}
contentContainerStyle={[
contentContainerCStyle,
{ width: contentWidth },
]}
onScroll={scrollHandler}
scrollEventThrottle={1}
>
{/* ScreenContainer has noScroll, so we need to add MobileTitle here */}
{isMobile && <MobileTitle title={headerLabel.toUpperCase()} />}
<View
style={{
width: windowWidth < RESPONSIVE_BREAKPOINT_S ? windowWidth : width,
maxWidth: screenContentMaxWidth,
width: "100%",
alignItems: "center",
paddingVertical: layout.spacing_x2,
}}
Expand All @@ -192,7 +192,7 @@ export const FeedPostDefaultView: FC<{
<SocialThreadCard
refetchFeed={refetchPost}
style={
windowWidth < RESPONSIVE_BREAKPOINT_S && {
isSmallScreen && {
borderRadius: 0,
borderLeftWidth: 0,
borderRightWidth: 0,
Expand Down Expand Up @@ -256,44 +256,51 @@ export const FeedPostDefaultView: FC<{
)}

{/*========== Refresh button and Comment button mobile */}
{isMobile ? (
<>
<SpacerColumn size={2} />
<View
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
}}
>
<CreateShortPostButton
label="Create Comment"
onPress={() => setCreateModalVisible(true)}
/>
<SpacerRow size={1.5} />
<RefreshButton
isRefreshing={isLoadingSharedValue}
onPress={() => {
refetchComments();
<View
style={{
width: contentWidth,
alignSelf: "center",
}}
>
{isMobile ? (
<>
<SpacerColumn size={2} />
<View
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
}}
/>
</View>
<SpacerColumn size={2} />
</>
) : (
<NewsFeedInput
style={{ alignSelf: "center" }}
ref={feedInputRef}
type="comment"
replyTo={replyTo}
parentId={post.id}
onSubmitInProgress={handleSubmitInProgress}
onSubmitSuccess={() => {
setReplyTo(undefined);
refetchComments();
}}
/>
)}
>
<CreateShortPostButton
label="Create Comment"
onPress={() => setCreateModalVisible(true)}
/>
<SpacerRow size={1.5} />
<RefreshButton
isRefreshing={isLoadingSharedValue}
onPress={() => {
refetchComments();
}}
/>
</View>
<SpacerColumn size={2} />
</>
) : (
<NewsFeedInput
style={{ alignSelf: "center" }}
ref={feedInputRef}
type="comment"
replyTo={replyTo}
parentId={post.id}
onSubmitInProgress={handleSubmitInProgress}
onSubmitSuccess={() => {
setReplyTo(undefined);
refetchComments();
}}
/>
)}
</View>

<CreateShortPostModal
label="Create a Comment"
Expand Down
2 changes: 0 additions & 2 deletions packages/screens/FeedPostView/components/FeedPostVideoView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,6 @@ import {
ZodSocialFeedVideoMetadata,
} from "@/utils/types/feed";

const POST_VIDEO_MAX_WIDTH = 960;
const INPUT_MIN_HEIGHT = 20;
const INPUT_MAX_HEIGHT = 400;

Expand Down Expand Up @@ -265,7 +264,6 @@ export const FeedPostVideoView: FC<{
<View
style={{
flex: 1,
maxWidth: POST_VIDEO_MAX_WIDTH,
}}
>
<View
Expand Down
Loading