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.

Commitfbb90f7

Browse files
authored
works page redesign (#752)
* refactor(works): redesign card list* refactor(works): z-index re-org & card style adjust
1 parent2fb1ea5 commitfbb90f7

File tree

9 files changed

+72
-86
lines changed

9 files changed

+72
-86
lines changed

‎src/containers/content/WorksContent/Banner/Backgrounds.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ const icons = [
8787
{
8888
id:'14',
8989
src:`${ASSETS_ENDPOINT}/works/planet1.svg`,
90-
position:{top:'15%',left:'84%'},
90+
position:{top:'15%',left:'85%'},
9191
size:'large',
9292
rotate:'5deg',
9393
},

‎src/containers/content/WorksContent/Banner/Recommendation.js‎

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ const Banner = () => {
6969
</IntroBlock>
7070

7171
<UpInfo>
72-
<UpIconsrc={`${ICON_CMD}/arrow-up-o.svg`}/>
72+
<UpIconsrc={`${ICON_CMD}/works/vote_up.svg`}/>
7373
<UpNumber>93</UpNumber>
7474
</UpInfo>
7575
</IntroWrapper>
@@ -84,28 +84,6 @@ const Banner = () => {
8484
<IconTexticonSrc={`${ICON_CMD}/works/comment.svg`}>44</IconText>
8585
</FooterWrapper>
8686
</Card>
87-
{/* <Card>
88-
<IntroWrapper>
89-
<IntroImg src={`${ASSETS_ENDPOINT}/works/market1.jpeg`} />
90-
<IntroBlock>
91-
<Title>coderplanets</Title>
92-
<Desc>
93-
<IconText iconSrc={`${ICON_CMD}/view-o.svg`}>.</IconText>
94-
<IconText iconSrc={`${ICON_CMD}/view-o.svg`}>.</IconText>
95-
</Desc>
96-
</IntroBlock>
97-
98-
<UpInfo>
99-
<UpIcon src={`${ICON_CMD}/arrow-up-o.svg`} />
100-
<UpNumber>93</UpNumber>
101-
</UpInfo>
102-
</IntroWrapper>
103-
<BodyText>可能是最性感的开发者社区，来为你心爱的作品建立...</BodyText>
104-
<FooterWrapper>
105-
<IconText iconSrc={`${ICON_CMD}/view-o.svg`}>44</IconText>
106-
<IconText iconSrc={`${ICON_CMD}/view-o.svg`}>xx / xx / xx</IconText>
107-
</FooterWrapper>
108-
</Card> */}
10987
</Wrapper>
11088
)
11189
}

‎src/containers/content/WorksContent/Banner/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@ const Banner = () => {
3939
</PubButton>
4040
</BrandWrapper>
4141
<Recommendation/>
42+
<Backgrounds/>
4243
</IntroWrapper>
43-
<Backgrounds/>
4444
<GradientMask/>
4545
</Wrapper>
4646
)

‎src/containers/content/WorksContent/List/Card.js‎

Lines changed: 39 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ import IconText from '@/components/IconText'
88

99
import{
1010
Wrapper,
11-
IntroWrapper,
1211
IntroImg,
1312
IntroBlock,
1413
Title,
14+
ExtraInfo,
1515
UpInfo,
1616
UpIcon,
1717
UpNumber,
@@ -29,49 +29,48 @@ import {
2929
constCard=()=>{
3030
return(
3131
<Wrapper>
32-
<IntroWrapper>
33-
<IntroImgsrc={`${ASSETS_ENDPOINT}/works/market1.jpeg`}/>
32+
<IntroImgsrc={`${ASSETS_ENDPOINT}/works/market1.jpeg`}/>
33+
<IntroBlock>
34+
<Title>coderplanets</Title>
35+
<BodyText>可能是最性感的开发者社区，来为你心爱的作品建立...</BodyText>
3436

35-
<IntroBlock>
36-
<Title>coderplanets</Title>
37-
<BodyText>可能是最性感的开发者社区，来为你心爱的作品建立...</BodyText>
38-
39-
<FooterWrapper>
40-
<IconText
41-
iconSrc={`${ICON_CMD}/works/topic.svg`}
42-
margin="1px"
43-
size="tiny"
44-
>
45-
协作工具
46-
</IconText>
47-
<DotDividerradius="4px"space="10px"/> 网站
48-
<Divider/>
49-
<BuildWithWrapper>
50-
<TechIconsrc={`${ICON_BASE}/pl/javascript.svg`}/>
51-
<TechIconsrc={`${ICON_BASE}/pl/java.svg`}/>
52-
<TechIconsrc={`${ICON_BASE}/pl/elixir.svg`}/>
53-
<TechIconsrc={`${ICON_BASE}/pl/ruby.svg`}/>
54-
</BuildWithWrapper>
55-
{/* <PublishAt>mydearxym / 3小时前</PublishAt> */}
56-
<Divider/>
57-
<IconText
58-
iconSrc={`${ICON_CMD}/works/comment.svg`}
59-
size="tiny"
60-
margin="5px"
61-
>
62-
44<CommentSlash>/</CommentSlash> 178
63-
</IconText>
64-
<Divider/>
65-
<PublishAt>发布于 3小时前</PublishAt>
66-
<SpaceGrow/>
67-
<GithubIconsrc={`${ICON_CMD}/works/github.svg`}/>
68-
</FooterWrapper>
69-
</IntroBlock>
37+
<FooterWrapper>
38+
<IconText
39+
iconSrc={`${ICON_CMD}/works/topic.svg`}
40+
margin="1px"
41+
size="tiny"
42+
>
43+
协作工具
44+
</IconText>
45+
<DotDividerradius="4px"space="10px"/> 网站
46+
<Divider/>
47+
<BuildWithWrapper>
48+
<TechIconsrc={`${ICON_BASE}/pl/javascript.svg`}/>
49+
<TechIconsrc={`${ICON_BASE}/pl/java.svg`}/>
50+
<TechIconsrc={`${ICON_BASE}/pl/elixir.svg`}/>
51+
<TechIconsrc={`${ICON_BASE}/pl/ruby.svg`}/>
52+
</BuildWithWrapper>
53+
{/* <PublishAt>mydearxym / 3小时前</PublishAt> */}
54+
<Divider/>
55+
<IconText
56+
iconSrc={`${ICON_CMD}/works/comment.svg`}
57+
size="tiny"
58+
margin="5px"
59+
>
60+
44<CommentSlash>/</CommentSlash> 178
61+
</IconText>
62+
<Divider/>
63+
<PublishAt>发布于 3小时前</PublishAt>
64+
<SpaceGrow/>
65+
</FooterWrapper>
66+
</IntroBlock>
67+
<ExtraInfo>
7068
<UpInfo>
71-
<UpIconsrc={`${ICON_CMD}/arrow-up-o.svg`}/>
69+
<UpIconsrc={`${ICON_CMD}/works/vote_up.svg`}/>
7270
<UpNumber>93</UpNumber>
7371
</UpInfo>
74-
</IntroWrapper>
72+
<GithubIconsrc={`${ICON_CMD}/works/github.svg`}/>
73+
</ExtraInfo>
7574
</Wrapper>
7675
)
7776
}

‎src/containers/content/WorksContent/styles/banner/backgrounds.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,14 @@ const getColor = color => {
3333
}
3434

3535
exportconstWrapper=styled.div`
36-
position:relative;
36+
position:absolute;
3737
width: 100%;
3838
height: 240px;
39-
z-index:2;
39+
/*z-index:1; */
4040
`
4141
exportconstIcon=styled(Img)`
4242
position: absolute;
43+
z-index: 1;
4344
fill:${({ color})=>getColor(color)};
4445
top:${({ top})=>top||'10%'};
4546
left:${({ left})=>left||'10%'};

‎src/containers/content/WorksContent/styles/banner/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export const BrandWrapper = styled.div`
2323
${cs.flexColumnGrow()};
2424
/* width: 45%; */
2525
margin-top: -30px;
26+
z-index: 2;
2627
`
2728
exportconstTitle=styled.div`
2829
color:${theme('thread.articleTitle')};

‎src/containers/content/WorksContent/styles/banner/recommendation.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,12 @@ export const Wrapper = styled.div`
1010
height: 100%;
1111
`
1212
exportconstCard=styled.div`
13+
z-index: 2;
1314
${cs.flexColumn('justify-between')};
1415
height: 160px;
1516
width: 100%;
1617
padding: 14px 16px;
17-
background: #003743;
18+
background: #08333e;
1819
margin-bottom: 14px;
1920
margin-right: 15px;
2021
border-radius: 5px;
@@ -48,14 +49,14 @@ export const Desc = styled.div`
4849
height: 32px;
4950
`
5051
exportconstUpInfo=styled.div`
51-
${cs.flexColumn('justify-center')};
52+
${cs.flexColumn('align-both')};
5253
align-self: flex-start;
5354
margin-top: 5px;
5455
`
5556
exportconstUpIcon=styled(Img)`
5657
fill:${theme('thread.articleTitle')};
57-
width:20px;
58-
height:20px;
58+
width:16px;
59+
height:16px;
5960
display: block;
6061
`
6162
exportconstUpNumber=styled.div`

‎src/containers/content/WorksContent/styles/list/card.js‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,22 @@ import { cs, theme } from '@/utils'
55

66
exportconstWrapper=styled.div`
77
position: relative;
8-
${cs.flexColumn('justify-between')};
8+
${cs.flex('align-center')};
99
height: 125px;
1010
width: 100%;
11-
padding: 12px 24px;
11+
padding: 12px 30px;
12+
padding-right: 38px;
1213
padding-top: 0;
1314
border-bottom: 1px solid #0b4152;
1415
border-radius: 5px;
1516
&:hover {
1617
background: #0b2f3a;
1718
}
19+
:last-child {
20+
border-bottom: none;
21+
}
1822
transition: all 0.25s;
19-
`
20-
exportconstIntroWrapper=styled.div`
21-
${cs.flex('align-center')};
22-
height: 100%;
23+
/* border: 1px solid tomato; */
2324
`
2425
exportconstIntroImg=styled(Img)`
2526
width: 70px;
@@ -31,6 +32,7 @@ export const IntroImg = styled(Img)`
3132
exportconstIntroBlock=styled.div`
3233
${cs.flexColumnGrow('align-start','justify-between')};
3334
margin-left: 25px;
35+
/* border: 1px solid green; */
3436
`
3537
exportconstTitle=styled.div`
3638
font-size: 16px;
@@ -43,18 +45,19 @@ export const TypeTags = styled.div`
4345
color:${theme('thread.articleDigest')};
4446
height: 32px;
4547
`
48+
exportconstExtraInfo=styled.div`
49+
${cs.flexColumn('align-end','justify-around')};
50+
height: 100%;
51+
`
4652
exportconstUpInfo=styled.div`
47-
position: absolute;
48-
right: 22px;
49-
top: 15px;
50-
${cs.flexColumn('justify-center')};
51-
align-self: flex-start;
53+
${cs.flex('align-center')};
5254
`
5355
exportconstUpIcon=styled(Img)`
5456
fill:${theme('thread.articleTitle')};
55-
width:18px;
56-
height:18px;
57+
width:15px;
58+
height:15px;
5759
display: block;
60+
margin-right: 8px;
5861
`
5962
exportconstUpNumber=styled.div`
6063
color:${theme('thread.articleDigest')};
@@ -106,7 +109,8 @@ export const TechIcon = styled(BaseBuildIcon)`
106109
`
107110
exportconstGithubIcon=styled(Img)`
108111
fill:${theme('thread.articleTitle')};
109-
width:14px;
110-
height:14px;
112+
width:13px;
113+
height:13px;
111114
display: block;
115+
margin-right: 3px;
112116
`

‎src/containers/content/WorksContent/styles/list/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,7 @@ export const Wrapper = styled.div`
66
${cs.flexColumn()};
77
width: 100%;
88
color:${theme('thread.articleTitle')};
9+
background: #08333e;
10+
border-radius: 4px;
911
`
1012
exportconstHolder=styled.div``

0 commit comments

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