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.

works page redesign#752

Merged
mydearxym merged 2 commits intodevfromworks-card-redesign
Jun 4, 2020
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -87,7 +87,7 @@ const icons = [
{
id: '14',
src: `${ASSETS_ENDPOINT}/works/planet1.svg`,
position: { top: '15%', left: '84%' },
position: { top: '15%', left: '85%' },
size: 'large',
rotate: '5deg',
},
Expand Down
24 changes: 1 addition & 23 deletionssrc/containers/content/WorksContent/Banner/Recommendation.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -69,7 +69,7 @@ const Banner = () => {
</IntroBlock>

<UpInfo>
<UpIcon src={`${ICON_CMD}/arrow-up-o.svg`} />
<UpIcon src={`${ICON_CMD}/works/vote_up.svg`} />
<UpNumber>93</UpNumber>
</UpInfo>
</IntroWrapper>
Expand All@@ -84,28 +84,6 @@ const Banner = () => {
<IconText iconSrc={`${ICON_CMD}/works/comment.svg`}>44</IconText>
</FooterWrapper>
</Card>
{/* <Card>
<IntroWrapper>
<IntroImg src={`${ASSETS_ENDPOINT}/works/market1.jpeg`} />
<IntroBlock>
<Title>coderplanets</Title>
<Desc>
<IconText iconSrc={`${ICON_CMD}/view-o.svg`}>.</IconText>
<IconText iconSrc={`${ICON_CMD}/view-o.svg`}>.</IconText>
</Desc>
</IntroBlock>

<UpInfo>
<UpIcon src={`${ICON_CMD}/arrow-up-o.svg`} />
<UpNumber>93</UpNumber>
</UpInfo>
</IntroWrapper>
<BodyText>可能是最性感的开发者社区，来为你心爱的作品建立...</BodyText>
<FooterWrapper>
<IconText iconSrc={`${ICON_CMD}/view-o.svg`}>44</IconText>
<IconText iconSrc={`${ICON_CMD}/view-o.svg`}>xx / xx / xx</IconText>
</FooterWrapper>
</Card> */}
</Wrapper>
)
}
Expand Down
2 changes: 1 addition & 1 deletionsrc/containers/content/WorksContent/Banner/index.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -39,8 +39,8 @@ const Banner = () => {
</PubButton>
</BrandWrapper>
<Recommendation />
<Backgrounds />
</IntroWrapper>
<Backgrounds />
<GradientMask />
</Wrapper>
)
Expand Down
79 changes: 39 additions & 40 deletionssrc/containers/content/WorksContent/List/Card.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -8,10 +8,10 @@ import IconText from '@/components/IconText'

import {
Wrapper,
IntroWrapper,
IntroImg,
IntroBlock,
Title,
ExtraInfo,
UpInfo,
UpIcon,
UpNumber,
Expand All@@ -29,49 +29,48 @@ import {
const Card = () => {
return (
<Wrapper>
<IntroWrapper>
<IntroImg src={`${ASSETS_ENDPOINT}/works/market1.jpeg`} />
<IntroImg src={`${ASSETS_ENDPOINT}/works/market1.jpeg`} />
<IntroBlock>
<Title>coderplanets</Title>
<BodyText>可能是最性感的开发者社区，来为你心爱的作品建立...</BodyText>

<IntroBlock>
<Title>coderplanets</Title>
<BodyText>可能是最性感的开发者社区，来为你心爱的作品建立...</BodyText>

<FooterWrapper>
<IconText
iconSrc={`${ICON_CMD}/works/topic.svg`}
margin="1px"
size="tiny"
>
协作工具
</IconText>
<DotDivider radius="4px" space="10px" /> 网站
<Divider />
<BuildWithWrapper>
<TechIcon src={`${ICON_BASE}/pl/javascript.svg`} />
<TechIcon src={`${ICON_BASE}/pl/java.svg`} />
<TechIcon src={`${ICON_BASE}/pl/elixir.svg`} />
<TechIcon src={`${ICON_BASE}/pl/ruby.svg`} />
</BuildWithWrapper>
{/* <PublishAt>mydearxym / 3小时前</PublishAt> */}
<Divider />
<IconText
iconSrc={`${ICON_CMD}/works/comment.svg`}
size="tiny"
margin="5px"
>
44 <CommentSlash>/</CommentSlash> 178
</IconText>
<Divider />
<PublishAt>发布于 3小时前</PublishAt>
<SpaceGrow />
<GithubIcon src={`${ICON_CMD}/works/github.svg`} />
</FooterWrapper>
</IntroBlock>
<FooterWrapper>
<IconText
iconSrc={`${ICON_CMD}/works/topic.svg`}
margin="1px"
size="tiny"
>
协作工具
</IconText>
<DotDivider radius="4px" space="10px" /> 网站
<Divider />
<BuildWithWrapper>
<TechIcon src={`${ICON_BASE}/pl/javascript.svg`} />
<TechIcon src={`${ICON_BASE}/pl/java.svg`} />
<TechIcon src={`${ICON_BASE}/pl/elixir.svg`} />
<TechIcon src={`${ICON_BASE}/pl/ruby.svg`} />
</BuildWithWrapper>
{/* <PublishAt>mydearxym / 3小时前</PublishAt> */}
<Divider />
<IconText
iconSrc={`${ICON_CMD}/works/comment.svg`}
size="tiny"
margin="5px"
>
44 <CommentSlash>/</CommentSlash> 178
</IconText>
<Divider />
<PublishAt>发布于 3小时前</PublishAt>
<SpaceGrow />
</FooterWrapper>
</IntroBlock>
<ExtraInfo>
<UpInfo>
<UpIcon src={`${ICON_CMD}/arrow-up-o.svg`} />
<UpIcon src={`${ICON_CMD}/works/vote_up.svg`} />
<UpNumber>93</UpNumber>
</UpInfo>
</IntroWrapper>
<GithubIcon src={`${ICON_CMD}/works/github.svg`} />
</ExtraInfo>
</Wrapper>
)
}
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -33,13 +33,14 @@ const getColor = color => {
}

export const Wrapper = styled.div`
position:relative;
position:absolute;
width: 100%;
height: 240px;
z-index:2;
/*z-index:1; */
`
export const Icon = styled(Img)`
position: absolute;
z-index: 1;
fill: ${({ color }) => getColor(color)};
top: ${({ top }) => top || '10%'};
left: ${({ left }) => left || '10%'};
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -23,6 +23,7 @@ export const BrandWrapper = styled.div`
${cs.flexColumnGrow()};
/* width: 45%; */
margin-top: -30px;
z-index: 2;
`
export const Title = styled.div`
color: ${theme('thread.articleTitle')};
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,11 +10,12 @@ export const Wrapper = styled.div`
height: 100%;
`
export const Card = styled.div`
z-index: 2;
${cs.flexColumn('justify-between')};
height: 160px;
width: 100%;
padding: 14px 16px;
background: #003743;
background: #08333e;
margin-bottom: 14px;
margin-right: 15px;
border-radius: 5px;
Expand DownExpand Up@@ -48,14 +49,14 @@ export const Desc = styled.div`
height: 32px;
`
export const UpInfo = styled.div`
${cs.flexColumn('justify-center')};
${cs.flexColumn('align-both')};
align-self: flex-start;
margin-top: 5px;
`
export const UpIcon = styled(Img)`
fill: ${theme('thread.articleTitle')};
width:20px;
height:20px;
width:16px;
height:16px;
display: block;
`
export const UpNumber = styled.div`
Expand Down
34 changes: 19 additions & 15 deletionssrc/containers/content/WorksContent/styles/list/card.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,21 +5,22 @@ import { cs, theme } from '@/utils'

export const Wrapper = styled.div`
position: relative;
${cs.flexColumn('justify-between')};
${cs.flex('align-center')};
height: 125px;
width: 100%;
padding: 12px 24px;
padding: 12px 30px;
padding-right: 38px;
padding-top: 0;
border-bottom: 1px solid #0b4152;
border-radius: 5px;
&:hover {
background: #0b2f3a;
}
:last-child {
border-bottom: none;
}
transition: all 0.25s;
`
export const IntroWrapper = styled.div`
${cs.flex('align-center')};
height: 100%;
/* border: 1px solid tomato; */
`
export const IntroImg = styled(Img)`
width: 70px;
Expand All@@ -31,6 +32,7 @@ export const IntroImg = styled(Img)`
export const IntroBlock = styled.div`
${cs.flexColumnGrow('align-start', 'justify-between')};
margin-left: 25px;
/* border: 1px solid green; */
`
export const Title = styled.div`
font-size: 16px;
Expand All@@ -43,18 +45,19 @@ export const TypeTags = styled.div`
color: ${theme('thread.articleDigest')};
height: 32px;
`
export const ExtraInfo = styled.div`
${cs.flexColumn('align-end', 'justify-around')};
height: 100%;
`
export const UpInfo = styled.div`
position: absolute;
right: 22px;
top: 15px;
${cs.flexColumn('justify-center')};
align-self: flex-start;
${cs.flex('align-center')};
`
export const UpIcon = styled(Img)`
fill: ${theme('thread.articleTitle')};
width:18px;
height:18px;
width:15px;
height:15px;
display: block;
margin-right: 8px;
`
export const UpNumber = styled.div`
color: ${theme('thread.articleDigest')};
Expand DownExpand Up@@ -106,7 +109,8 @@ export const TechIcon = styled(BaseBuildIcon)`
`
export const GithubIcon = styled(Img)`
fill: ${theme('thread.articleTitle')};
width:14px;
height:14px;
width:13px;
height:13px;
display: block;
margin-right: 3px;
`
2 changes: 2 additions & 0 deletionssrc/containers/content/WorksContent/styles/list/index.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,5 +6,7 @@ export const Wrapper = styled.div`
${cs.flexColumn()};
width: 100%;
color: ${theme('thread.articleTitle')};
background: #08333e;
border-radius: 4px;
`
export const Holder = styled.div``
[8]ページ先頭
©2009-2025 Movatter.jp