Skip to content
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit 45701ed

Browse files
mydearxymmydearxym
authored
refactor(explore): card redesign (#1203)
* style(explore): community card redesign * refactor(explore): add general footer * style(explore): adjust banner style
1 parent f49ce9a commit 45701ed

File tree

10 files changed

+123
-80
lines changed

10 files changed

+123
-80
lines changed

‎src/containers/content/ExploreContent/CommunityCard.tsx‎

Lines changed: 40 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,24 @@
11
import { FC, memo } from 'react'
2-
import { contains } from 'ramda'
2+
import { isEmpty, contains } from 'ramda'
3+
import Link from 'next/link'
34

45
import type { TCommunity, TID } from '@/spec'
56
import { NON_FILL_COMMUNITY } from '@/constant'
67
import { prettyNum, cutRest } from '@/utils/helper'
78

89
import TrendLine from '@/widgets/TrendLine'
9-
// import { CommunityHolder } from '@/widgets/Loading'
10+
import { SpaceGrow } from '@/widgets/Common'
1011

1112
import SubscribeBtn from './SubscribeBtn'
1213

1314
import {
1415
Wrapper,
16+
Left,
17+
Right,
1518
CommunityIcon,
19+
Raw,
20+
ContentWrapper,
21+
JoinWrapper,
1622
Title,
1723
Desc,
1824
ActivitySpark,
@@ -30,37 +36,44 @@ const CommunityCard: FC<TProps> = ({
3036
subscribing,
3137
subscribingId,
3238
}) => {
39+
const trendData = isEmpty(community.contributesDigest)
40+
? [0, 0, 0, 0, 0]
41+
: community.contributesDigest
42+
3343
return (
3444
<Wrapper>
35-
<a
36-
href={`/${community.raw}/posts`}
37-
rel="noopener noreferrer"
38-
target="_blank"
39-
>
45+
<Left>
4046
<CommunityIcon
4147
nonFill={contains(community.raw, NON_FILL_COMMUNITY)}
4248
src={community.logo}
43-
// loading={<CommunityHolder text={community.raw} place="discovery" />}
44-
/>
45-
</a>
46-
<Title>{community.title}</Title>
47-
<Desc>{cutRest(community.desc, 20)}</Desc>
48-
<ActivitySpark>
49-
<TrendLine data={community.contributesDigest} />
50-
</ActivitySpark>
51-
<Footer>
52-
<>
53-
{/* TODO: number color should be different when number grow large */}
54-
{prettyNum(community.subscribersCount)}{' '}
55-
{community.subscribersCount < 1000 ? '人加入' : '加入'}
56-
</>
57-
58-
<SubscribeBtn
59-
community={community}
60-
subscribing={subscribing}
61-
subscribingId={subscribingId}
6249
/>
63-
</Footer>
50+
<Raw>{community.raw}</Raw>
51+
<ActivitySpark>
52+
<TrendLine data={trendData} />
53+
{/* <TrendLine data={[3, 4, 7, 5, 4, 10, 6]} /> */}
54+
</ActivitySpark>
55+
<SpaceGrow />
56+
<ContentWrapper>
57+
内容&nbsp;{prettyNum(community.subscribersCount)}
58+
</ContentWrapper>
59+
</Left>
60+
<Right>
61+
<Link href={`/${community.raw}`} passHref>
62+
<Title>{community.title}</Title>
63+
</Link>
64+
<Desc>{cutRest(community.desc, 20)}</Desc>
65+
<SpaceGrow />
66+
<Footer>
67+
<JoinWrapper>
68+
{prettyNum(community.subscribersCount)}&nbsp;加入
69+
</JoinWrapper>
70+
<SubscribeBtn
71+
community={community}
72+
subscribing={subscribing}
73+
subscribingId={subscribingId}
74+
/>
75+
</Footer>
76+
</Right>
6477
</Wrapper>
6578
)
6679
}

‎src/containers/content/ExploreContent/SubscribeBtn.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,14 @@ const SubscribeBtn: FC<TProps> = ({
2323
}) => {
2424
if (subscribing && community.id === subscribingId) {
2525
return (
26-
<Button size="small" type="primary">
26+
<Button size="tiny" type="primary">
2727
加入 ..
2828
</Button>
2929
)
3030
}
3131
return (
3232
<FollowButton
33+
size="tiny"
3334
followText="加 入"
3435
followingText="已加入"
3536
hasFollowed={community.viewerHasSubscribed}

‎src/containers/content/ExploreContent/index.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -76,10 +76,8 @@ const ExploreContentContainer: FC<TProps> = ({
7676
<Pagi
7777
{...pagiInfo}
7878
onChange={pageOnChange}
79-
margin={{ bottom: '60px' }}
80-
>
81-
<div>社区行动指南</div>
82-
</Pagi>
79+
margin={{ top: '30px', bottom: '40px' }}
80+
/>
8381
</>
8482
) : (
8583
<NotFound searchValue={searchValue} />

‎src/containers/content/ExploreContent/styles/banner.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,22 @@ export const BannerContainer = styled.div.attrs(({ testid }: TTestable) => ({
1212
${css.flexColumn('justify-center')};
1313
1414
position: relative;
15-
min-height: 170px;
15+
min-height: 220px;
1616
border-bottom: 1px solid;
1717
/* background: ${theme('banner.bg')}; */
1818
border-bottom: ${theme('banner.spliter')};
1919
@media (max-height: 800px) {
20-
min-height: 160px;
20+
min-height: 200px;
2121
}
2222
`
2323
export const IntroWrapper = styled.div`
2424
${css.flexColumn('align-both')};
25+
padding-top: 30px;
2526
color: ${theme('thread.articleDigest')};
2627
/* background-image: linear-gradient(#043B49, #022A35); */
2728
background-image: ${theme('banner.linearGradient')};
2829
width: 100%;
29-
height: 250px;
30+
height: 300px;
3031
`
3132
export const IntroTitle = styled.div`
3233
${css.flex('align-center')};

‎src/containers/content/ExploreContent/styles/community_card.ts‎

Lines changed: 61 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -5,74 +5,102 @@ import { theme } from '@/utils/themes'
55
import css from '@/utils/css'
66

77
const BaseCard = styled.div`
8-
${css.flexColumn('align-center')};
8+
${css.flex()};
99
1010
position: relative;
11-
padding-top: 12px;
12-
padding: 10px;
13-
padding-bottom: 0;
14-
width: 200px;
15-
height: 250px;
16-
margin-right: 30px;
11+
padding: 15px 20px;
12+
width: 260px;
13+
height: 150px;
14+
margin-right: 25px;
1715
background: #0c3442; // ${theme('content.cardBg')};
1816
border: 1px solid;
1917
border-color: ${theme('content.cardBorder')};
20-
border-radius: 12px;
18+
border-radius: 8px;
2119
`
2220
export const Wrapper = styled(BaseCard)`
23-
margin-bottom: 60px;
21+
margin-bottom: 30px;
2422
2523
&:hover {
2624
cursor: pointer;
2725
border: 1px solid #327faf;
2826
box-shadow: 0px 7px 20px 10px rgba(0, 0, 0, 0.15); /* same with the popover */
2927
}
30-
/*
31-
&:hover {
32-
border: 1px solid;
33-
border-color: ${theme('content.cardBorderHover')};
34-
box-shadow: 0px 7px 20px 10px rgba(0, 0, 0, 0.15);
35-
}
36-
*/
28+
3729
transition: all 0.2s;
3830
`
31+
export const Left = styled.div`
32+
${css.flexColumn('align-start')};
33+
width: 80px;
34+
margin-right: 10px;
35+
`
3936

37+
export const Right = styled.div`
38+
width: calc(100% - 80px);
39+
${css.flexColumn('align-start')};
40+
flex-flow: 1;
41+
`
4042
// fill only works for non-colored svgs
4143
export const CommunityIcon = styled(Img)<{ nonFill: boolean }>`
42-
${css.size(54)};
44+
${css.size(26)};
4345
fill: ${({ nonFill }) => (nonFill ? '' : theme('banner.desc'))};
4446
margin-bottom: 8px;
45-
margin-top: -35px;
4647
${Wrapper}:hover & {
4748
fill: ${({ nonFill }) => (nonFill ? '' : theme('banner.title'))};
4849
}
4950
`
50-
export const Title = styled.div`
51+
export const Raw = styled.div`
52+
font-size: 13px;
53+
color: ${theme('thread.articleDigest')};
54+
opacity: 0.8;
55+
56+
&:before {
57+
content: '/';
58+
margin-right: 2px;
59+
}
60+
`
61+
export const JoinWrapper = styled.div`
62+
${css.flex('align-center')};
63+
color: ${theme('thread.articleDigest')};
64+
font-size: 13px;
65+
`
66+
export const ContentWrapper = styled(JoinWrapper)`
67+
margin-top: -30px;
68+
`
69+
export const Title = styled.a`
70+
margin-top: -2px;
5171
font-size: 18px;
5272
font-weight: bold;
53-
margin-top: 5px;
54-
text-align: center;
5573
color: ${theme('thread.articleTitle')};
74+
text-decoration: none;
75+
&:hover {
76+
text-decoration: underline;
77+
color: #139c9e;
78+
cursor: pointer;
79+
}
5680
`
5781
export const Desc = styled.div`
82+
margin-top: 8px;
5883
color: ${theme('thread.articleDigest')};
84+
word-break: break-all;
5985
font-size: 13px;
60-
text-align: center;
61-
min-height: 50px;
86+
position: relative;
87+
display: -webkit-box;
88+
-webkit-line-clamp: 2;
89+
overflow: hidden;
90+
text-overflow: ellipsis;
91+
-webkit-box-orient: vertical;
6292
`
6393
export const ActivitySpark = styled.div`
64-
width: 100%;
65-
height: 100%;
94+
width: 80px;
95+
height: 60px;
96+
margin-left: -15px;
97+
margin-top: 8px;
6698
`
6799
export const Footer = styled.div`
68-
${css.flex('justify-around')};
69-
70-
width: 90%;
71-
position: absolute;
72-
bottom: 16px;
73-
color: ${theme('banner.desc')};
74-
border-top: 1px solid;
75-
border-top-color: ${theme('content.cardBorder')};
100+
width: 100%;
101+
${css.flex('align-center', 'justify-between')};
102+
/* border-top: 1px solid;
103+
border-top-color: ${theme('content.cardBorder')}; */
76104
padding-top: 15px;
77105
`
78106
export const Divider = styled.div`

‎src/containers/content/ExploreContent/styles/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const ContentWrapper = styled.div<{ center: boolean }>`
1414
transition: all 0.2s;
1515
`
1616
export const InnerWrapper = styled.div<{ metric: TMetric }>`
17-
${css.flex()};
17+
${css.flex('justify-center')};
1818
width: 100%;
1919
height: 100%;
2020
${({ metric }) => css.fitContentWidth(metric)};

‎src/containers/content/ExploreContent/styles/sidebar.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import css from '@/utils/css'
66
export const Wrapper = styled.div<TActive>`
77
${css.flexColumn()};
88
width: 120px;
9+
min-width: 120px;
910
display: ${({ show }) => (show ? 'flex' : 'none')};
1011
`
1112
export const Holder = styled.div`

‎src/containers/unit/Footer/DesktopView/TopInfo/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,22 +33,22 @@ const TopInfo: FC<TProps> = ({
3333
case METRIC.WORKS_ARTICLE: {
3434
return <WorksArticle {...restProps} />
3535
}
36+
case METRIC.EXPLORE: {
37+
return <General title="发现社区" />
38+
}
3639
case METRIC.COOL_GUIDE: {
3740
return <General title="酷导航" />
3841
}
39-
4042
case METRIC.WORKS: {
4143
return <General title="作品集市" />
4244
}
43-
4445
case METRIC.MEETUPS: {
4546
return <General title="小聚" />
4647
}
4748

4849
case METRIC.SUPPORT_US: {
4950
return <General title="支持我们" />
5051
}
51-
5252
case METRIC.SUBSCRIBE: {
5353
return <General title="内容订阅" />
5454
}

‎src/containers/unit/Footer/DesktopView/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ const FooterContainer: FC<TProps> = ({
5252
METRIC.SUBSCRIBE,
5353
METRIC.SUPPORT_US,
5454
METRIC.HAVE_A_DRINK,
55+
METRIC.EXPLORE,
5556
])
5657

5758
return (

‎src/pages/explore.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
queryStringToJSON,
1111
ssrParseURL,
1212
ssrRescue,
13+
refreshIfneed,
1314
exploreSEO,
1415
ssrError,
1516
} from '@/utils'
@@ -57,16 +58,15 @@ const fetchData = async (context, opt = {}) => {
5758
}
5859

5960
export const getServerSideProps = async (context) => {
60-
// const { communityPath, thread } = ssrParseURL(props.req)
6161
let resp
6262
try {
6363
resp = await fetchData(context)
64-
} catch ({ response: { errors } }) {
65-
if (ssrRescue.hasLoginError(errors)) {
66-
resp = await fetchData(context, { tokenExpired: true })
67-
} else {
68-
return ssrError(context, 'fetch', 500)
69-
}
64+
const { sessionState } = resp
65+
66+
refreshIfneed(sessionState, '/explore', context)
67+
} catch (e) {
68+
console.log('#### error from server: ', e)
69+
return ssrError(context, 'fetch', 500)
7070
}
7171

7272
const { pagedCategories, pagedCommunities } = resp
@@ -88,7 +88,7 @@ const ExplorePage = (props) => {
8888

8989
return (
9090
<Provider store={store}>
91-
<GlobalLayout metric={METRIC.EXPLORE} seoConfig={seoConfig}>
91+
<GlobalLayout metric={METRIC.EXPLORE} seoConfig={seoConfig} noSidebar>
9292
<ExploreContent />
9393
</GlobalLayout>
9494
</Provider>

0 commit comments

Comments
 (0)