Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit45701ed

Browse files
authored
refactor(explore): card redesign (#1203)
* style(explore): community card redesign* refactor(explore): add general footer* style(explore): adjust banner style
1 parentf49ce9a commit45701ed

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+
importLinkfrom'next/link'
34

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

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

1112
importSubscribeBtnfrom'./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+
consttrendData=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-
<TrendLinedata={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+
<TrendLinedata={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+
<Linkhref={`/${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-
<Buttonsize="small"type="primary">
26+
<Buttonsize="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
<NotFoundsearchValue={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
exportconstIntroWrapper=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
exportconstIntroTitle=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
importcssfrom'@/utils/css'
66

77
constBaseCard=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
exportconstWrapper=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+
exportconstLeft=styled.div`
32+
${css.flexColumn('align-start')};
33+
width: 80px;
34+
margin-right: 10px;
35+
`
3936

37+
exportconstRight=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
exportconstCommunityIcon=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-
exportconstTitle=styled.div`
51+
exportconstRaw=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+
exportconstJoinWrapper=styled.div`
62+
${css.flex('align-center')};
63+
color:${theme('thread.articleDigest')};
64+
font-size: 13px;
65+
`
66+
exportconstContentWrapper=styled(JoinWrapper)`
67+
margin-top: -30px;
68+
`
69+
exportconstTitle=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
exportconstDesc=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
exportconstActivitySpark=styled.div`
64-
width: 100%;
65-
height: 100%;
94+
width: 80px;
95+
height: 60px;
96+
margin-left: -15px;
97+
margin-top: 8px;
6698
`
6799
exportconstFooter=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
exportconstDivider=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
exportconstInnerWrapper=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
exportconstWrapper=styled.div<TActive>`
77
${css.flexColumn()};
88
width: 120px;
9+
min-width: 120px;
910
display:${({ show})=>(show ?'flex' :'none')};
1011
`
1112
exportconstHolder=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
caseMETRIC.WORKS_ARTICLE:{
3434
return<WorksArticle{...restProps}/>
3535
}
36+
caseMETRIC.EXPLORE:{
37+
return<Generaltitle="发现社区"/>
38+
}
3639
caseMETRIC.COOL_GUIDE:{
3740
return<Generaltitle="酷导航"/>
3841
}
39-
4042
caseMETRIC.WORKS:{
4143
return<Generaltitle="作品集市"/>
4244
}
43-
4445
caseMETRIC.MEETUPS:{
4546
return<Generaltitle="小聚"/>
4647
}
4748

4849
caseMETRIC.SUPPORT_US:{
4950
return<Generaltitle="支持我们"/>
5051
}
51-
5252
caseMETRIC.SUBSCRIBE:{
5353
return<Generaltitle="内容订阅"/>
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
exportconstgetServerSideProps=async(context)=>{
60-
// const { communityPath, thread } = ssrParseURL(props.req)
6161
letresp
6262
try{
6363
resp=awaitfetchData(context)
64-
}catch({response:{ errors}}){
65-
if(ssrRescue.hasLoginError(errors)){
66-
resp=awaitfetchData(context,{tokenExpired:true})
67-
}else{
68-
returnssrError(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+
returnssrError(context,'fetch',500)
7070
}
7171

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

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

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp