Skip to content

Commit 9a911f4

Browse files
SimekSimek
authored
move "update at" information to save some vertical space, other tweaks (#1565)
1 parent b4ab022 commit 9a911f4

File tree

7 files changed

+145
-49
lines changed

7 files changed

+145
-49
lines changed

‎common/styleguide.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -168,15 +168,15 @@ export const A = ({ href, target = '_blank', children, style, hoverStyle, ...res
168168
const getLinkStyles = (isDark: boolean) => ({
169169
color: isDark ? colors.white : colors.black,
170170
backgroundColor: isDark ? darkColors.powder : colors.powder,
171-
textDecorationColor: isDark ? darkColors.pewter : colors.pewter,
171+
textDecorationColor: isDark ? colors.gray5 : colors.pewter,
172172
textDecorationLine: 'underline',
173173
fontFamily: 'inherit',
174174
});
175175

176176
const getLinkHoverStyles = (isDark: boolean) => ({
177177
backgroundColor: isDark ? colors.primaryDark : colors.sky,
178178
color: isDark ? darkColors.dark : colors.black,
179-
textDecorationColor: isDark ? darkColors.powder : colors.black,
179+
textDecorationColor: isDark ? darkColors.powder : colors.gray4,
180180
});
181181

182182
export const HoverEffect = ({ children }) => {

‎components/Library/MetaData.tsx‎

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,9 @@ import { StyleSheet, View } from 'react-native';
44
import { colors, A, P, Caption, darkColors } from '~/common/styleguide';
55
import CustomAppearanceContext from '~/context/CustomAppearanceContext';
66
import { Library as LibraryType } from '~/types';
7-
import { getTimeSinceToday } from '~/util/datetime';
87

98
import { DirectoryScore } from './DirectoryScore';
10-
import {
11-
Calendar,
12-
Star,
13-
Download,
14-
Eye,
15-
Issue,
16-
Web,
17-
License,
18-
Fork,
19-
Code,
20-
TypeScript,
21-
} from '../Icons';
9+
import { Star, Download, Eye, Issue, Web, License, Fork, Code, TypeScript } from '../Icons';
2210

2311
type Props = {
2412
library: LibraryType;
@@ -41,15 +29,6 @@ function generateData({ github, score, npm, npmPkg }: LibraryType, isDark: boole
4129
</A>
4230
),
4331
},
44-
{
45-
id: 'calendar',
46-
icon: <Calendar fill={iconColor} />,
47-
content: (
48-
<A href={`${github.urls.repo}/commits`} style={styles.link}>
49-
Updated {getTimeSinceToday(github.stats.pushedAt)}
50-
</A>
51-
),
52-
},
5332
npm.downloads
5433
? {
5534
id: 'downloads',

‎components/Library/TrendingMark.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const TrendingMark = ({ library, style, markOnly = false }: Props) => {
4545
return markOnly ? (
4646
<View style={[styles.container, style]}>{content}</View>
4747
) : (
48-
<A href="/scoring" style={[styles.container, styles.scoringLink, style]}>
48+
<A href="/scoring" style={[styles.scoringLink, style]}>
4949
{content}
5050
</A>
5151
);

‎components/Library/UnmaintainedLabel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ const styles = StyleSheet.create({
7070
unmaintainedTextContainer: {
7171
alignItems: 'flex-start',
7272
marginLeft: -20,
73-
marginBottom: 12,
73+
marginBottom: 8,
7474
paddingLeft: 20,
7575
paddingRight: 12,
7676
paddingVertical: 6,

‎components/Library/UpdateAtView.tsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { useContext } from 'react';
2+
import { StyleSheet, View } from 'react-native';
3+
4+
import { A, colors, darkColors } from '~/common/styleguide';
5+
import Tooltip from '~/components/Tooltip';
6+
import CustomAppearanceContext from '~/context/CustomAppearanceContext';
7+
import { Library as LibraryType } from '~/types';
8+
import { getTimeSinceToday } from '~/util/datetime';
9+
10+
import { Calendar } from '../Icons';
11+
12+
type Props = {
13+
library: LibraryType;
14+
};
15+
16+
export default function UpdatedAtView({ library }: Props) {
17+
const { isDark } = useContext(CustomAppearanceContext);
18+
19+
const iconColor = isDark ? darkColors.pewter : colors.secondary;
20+
const textColor = isDark ? darkColors.secondary : colors.gray5;
21+
const decorationColor = isDark ? colors.gray5 : colors.gray3;
22+
const unmaintainedIconColor = isDark ? darkColors.warning : colors.warningDark;
23+
const unmaintainedTextColor = isDark ? darkColors.warning : colors.warningDark;
24+
25+
return (
26+
<View style={styles.updatedAtContainer}>
27+
<Tooltip
28+
sideOffset={2}
29+
trigger={
30+
<View style={{ cursor: 'pointer' }} aria-label="Last update (based on git activity)">
31+
<Calendar
32+
fill={library.unmaintained ? unmaintainedIconColor : iconColor}
33+
width={14}
34+
height={16}
35+
/>
36+
</View>
37+
}>
38+
Last update (based on git activity)
39+
</Tooltip>
40+
<A
41+
href={`${library.github.urls.repo}/commits`}
42+
style={[
43+
styles.link,
44+
{
45+
color: library.unmaintained ? unmaintainedTextColor : textColor,
46+
textDecorationColor: decorationColor,
47+
},
48+
]}
49+
hoverStyle={[
50+
{
51+
color: library.unmaintained
52+
? unmaintainedTextColor
53+
: isDark
54+
? colors.primaryDark
55+
: textColor,
56+
textDecorationColor: library.unmaintained
57+
? unmaintainedTextColor
58+
: isDark
59+
? colors.gray6
60+
: colors.gray4,
61+
},
62+
]}>
63+
{getTimeSinceToday(library.github.stats.pushedAt)}
64+
</A>
65+
</View>
66+
);
67+
}
68+
69+
const styles = StyleSheet.create({
70+
updatedAtContainer: {
71+
gap: 8,
72+
flexDirection: 'row',
73+
alignItems: 'flex-start',
74+
},
75+
link: {
76+
fontSize: 13,
77+
fontWeight: 300,
78+
backgroundColor: 'transparent',
79+
textDecorationColor: 'transparent',
80+
},
81+
});

‎components/Library/index.tsx‎

Lines changed: 52 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Linkify } from 'react-easy-linkify';
44
import { Platform, StyleSheet, View } from 'react-native';
55

66
import { colors, useLayout, A, darkColors, Headline } from '~/common/styleguide';
7+
import UpdatedAtView from '~/components/Library/UpdateAtView';
78
import CustomAppearanceContext from '~/context/CustomAppearanceContext';
89
import { Library as LibraryType } from '~/types';
910

@@ -46,25 +47,47 @@ const Library = ({ library, skipMetadata, showTrendingMark }: Props) => {
4647
library.unmaintained && styles.unmaintained,
4748
]}>
4849
<View style={styles.columnOne}>
49-
{library.unmaintained && <UnmaintainedLabel alternatives={library.alternatives} />}
50+
{library.unmaintained && (
51+
<View
52+
style={
53+
isSmallScreen
54+
? [
55+
styles.containerColumn,
56+
styles.updatedAtContainerSmall,
57+
{ marginBottom: 6, gap: 0 },
58+
]
59+
: [styles.updatedAtContainer, styles.trendingMarkContainer]
60+
}>
61+
<UnmaintainedLabel alternatives={library.alternatives} />
62+
<UpdatedAtView library={library} />
63+
</View>
64+
)}
5065
{showTrendingMark && library.popularity && (
51-
<Tooltip
52-
sideOffset={8}
53-
trigger={
54-
<View style={styles.trendingMarkContainer}>
55-
<TrendingMark library={library} />
56-
</View>
66+
<View
67+
style={
68+
isSmallScreen
69+
? [styles.containerColumn, styles.updatedAtContainerSmall]
70+
: [styles.updatedAtContainer, { marginBottom: 4 }]
5771
}>
58-
Trending Score is based on the last week to last month download rate.
59-
</Tooltip>
72+
<Tooltip sideOffset={8} trigger={<TrendingMark library={library} />}>
73+
Trending Score is based on the last week to last month download rate.
74+
</Tooltip>
75+
{!library.unmaintained && <UpdatedAtView library={library} />}
76+
</View>
6077
)}
61-
<View style={isSmallScreen ? styles.containerColumn : styles.displayHorizontal}>
78+
<View
79+
style={
80+
isSmallScreen
81+
? [styles.containerColumn, styles.updatedAtContainerSmall]
82+
: styles.updatedAtContainer
83+
}>
6284
<A
6385
href={library.githubUrl || github.urls.repo}
6486
style={styles.name}
6587
hoverStyle={{ color: isDark ? colors.gray3 : colors.gray5 }}>
6688
{libName}
6789
</A>
90+
{!showTrendingMark && !library.unmaintained && <UpdatedAtView library={library} />}
6891
</View>
6992
<View style={styles.verticalMargin}>
7093
<CompatibilityTags library={library} />
@@ -74,11 +97,7 @@ const Library = ({ library, skipMetadata, showTrendingMark }: Props) => {
7497
<Headline numberOfLines={skipMetadata && 3} style={{ fontWeight: 300, lineHeight: 23 }}>
7598
<Linkify
7699
options={{
77-
linkWrapper: ({ children, key, ...rest }) => (
78-
<A {...rest} key={key}>
79-
{children}
80-
</A>
81-
),
100+
linkWrapper: ({ children, ...rest }) => <A {...rest}>{children}</A>,
82101
}}>
83102
{emoji.emojify(github.description)}
84103
</Linkify>
@@ -195,7 +214,7 @@ const styles = StyleSheet.create({
195214
},
196215
imagesContainer: {
197216
flexWrap: 'wrap',
198-
marginTop: 12,
217+
marginTop: 8,
199218
},
200219
secondaryStats: {
201220
marginTop: 6,
@@ -240,6 +259,23 @@ const styles = StyleSheet.create({
240259
opacity: 0.88,
241260
},
242261
trendingMarkContainer: {
262+
justifyContent: 'space-between',
263+
marginBottom: 4,
264+
},
265+
link: {
266+
fontSize: 13,
267+
fontWeight: 300,
268+
backgroundColor: 'transparent',
269+
},
270+
updatedAtContainer: {
271+
gap: 8,
272+
flexDirection: 'row',
273+
alignItems: 'flex-start',
274+
justifyContent: 'space-between',
275+
},
276+
updatedAtContainerSmall: {
277+
gap: 8,
278+
justifyContent: 'flex-start',
243279
alignSelf: 'flex-start',
244280
},
245281
});

‎pages/popular.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -65,13 +65,6 @@ const Popular = ({ data }) => {
6565
data={data}
6666
filter={lib => lib.macos === true}
6767
/>
68-
<ExploreSection
69-
title="Expo Go"
70-
icon={PlatformExpo}
71-
data={data}
72-
filter={lib => lib.expoGo === true}
73-
/>
74-
<ExploreSection title="Fire OS" data={data} filter={lib => lib.fireos === true} />
7568
<ExploreSection
7669
title="tvOS"
7770
icon={PlatformTvOS}
@@ -90,6 +83,13 @@ const Popular = ({ data }) => {
9083
data={data}
9184
filter={lib => lib.windows === true}
9285
/>
86+
<ExploreSection
87+
title="Expo Go"
88+
icon={PlatformExpo}
89+
data={data}
90+
filter={lib => lib.expoGo === true}
91+
/>
92+
<ExploreSection title="Fire OS" data={data} filter={lib => lib.fireos === true} />
9393
</ContentContainer>
9494
</>
9595
);

0 commit comments

Comments
 (0)