fix(feed): card spacing, action-row distribution, tab strip, detail inset
- PostCard rows got cramped paddings and a near-invisible divider. Increased paddingTop 12→16, paddingBottom 12→18, paddingHorizontal 14→16; divider colour #141414→#222222 so the seam between posts is legible on OLED blacks. - Action row (chat / ❤ / view / share) used a fixed gap:32 + spacer. Reworked to four flex:1 cells with justifyContent: space-between, so the first three icons distribute evenly across the row and share pins to the right edge. Matches Twitter's layout where each action occupies a quarter of the row regardless of label width. - Feed tab strip (Подписки / Для вас / В тренде) used flex:1 + gap:10 which bunched the three labels together visually. Switched to justifyContent: space-between + paddingHorizontal:20 so each tab hugs its label and the three labels spread to the edges with full horizontal breathing room. - Post detail screen (/feed/[id]) and hashtag feed (/feed/tag/[tag]) were missing the safe-area top inset — their headers butted right against the status bar / notch. Added useSafeAreaInsets().top as paddingTop on the outer View, matching the rest of the app. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -158,17 +158,18 @@ export default function FeedScreen() {
|
||||
<View style={{ flex: 1, backgroundColor: '#000000', paddingTop: insets.top }}>
|
||||
<TabHeader title="Лента" />
|
||||
|
||||
{/* Tab strip — больше воздуха между табами. Горизонтальный padding
|
||||
на контейнере + gap между Pressable'ами делает табы "breathable",
|
||||
индикатор активной вкладки — тонкая полоска только под текстом,
|
||||
шириной примерно с лейбл. */}
|
||||
{/* Tab strip — три таба, равномерно распределены по ширине
|
||||
(justifyContent: space-between). Каждый Pressable hug'ает
|
||||
свой контент — табы НЕ тянутся на 1/3 ширины, а жмутся к
|
||||
своему лейблу, что даёт воздух между ними. Индикатор активной
|
||||
вкладки — тонкая полоска под лейблом. */}
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
paddingHorizontal: 12,
|
||||
gap: 10,
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: 20,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#141414',
|
||||
borderBottomColor: '#1f1f1f',
|
||||
}}
|
||||
>
|
||||
{(Object.keys(TAB_LABELS) as TabKey[]).map(key => (
|
||||
@@ -176,33 +177,31 @@ export default function FeedScreen() {
|
||||
key={key}
|
||||
onPress={() => setTab(key)}
|
||||
style={({ pressed }) => ({
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
paddingVertical: 16,
|
||||
backgroundColor: pressed ? '#0a0a0a' : 'transparent',
|
||||
paddingHorizontal: 6,
|
||||
opacity: pressed ? 0.6 : 1,
|
||||
})}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: tab === key ? '#ffffff' : '#6a6a6a',
|
||||
fontWeight: tab === key ? '700' : '500',
|
||||
fontSize: 14,
|
||||
fontSize: 15,
|
||||
letterSpacing: -0.1,
|
||||
}}
|
||||
>
|
||||
{TAB_LABELS[key]}
|
||||
</Text>
|
||||
{tab === key && (
|
||||
<View
|
||||
style={{
|
||||
marginTop: 10,
|
||||
width: 32,
|
||||
height: 3,
|
||||
borderRadius: 1.5,
|
||||
backgroundColor: '#1d9bf0',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<View
|
||||
style={{
|
||||
marginTop: 10,
|
||||
width: tab === key ? 28 : 0,
|
||||
height: 3,
|
||||
borderRadius: 1.5,
|
||||
backgroundColor: '#1d9bf0',
|
||||
}}
|
||||
/>
|
||||
</Pressable>
|
||||
))}
|
||||
</View>
|
||||
|
||||
Reference in New Issue
Block a user