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.

refactor(explore): card redesign#1203

Merged
mydearxym merged 3 commits intodevfromexplore-card-redesign
Nov 26, 2021
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
67 changes: 40 additions & 27 deletionssrc/containers/content/ExploreContent/CommunityCard.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,24 @@
import { FC, memo } from 'react'
import { contains } from 'ramda'
import { isEmpty, contains } from 'ramda'
import Link from 'next/link'

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

import TrendLine from '@/widgets/TrendLine'
//import {CommunityHolder } from '@/widgets/Loading'
import {SpaceGrow } from '@/widgets/Common'

import SubscribeBtn from './SubscribeBtn'

import {
Wrapper,
Left,
Right,
CommunityIcon,
Raw,
ContentWrapper,
JoinWrapper,
Title,
Desc,
ActivitySpark,
Expand All@@ -30,37 +36,44 @@ const CommunityCard: FC<TProps> = ({
subscribing,
subscribingId,
}) => {
const trendData = isEmpty(community.contributesDigest)
? [0, 0, 0, 0, 0]
: community.contributesDigest

return (
<Wrapper>
<a
href={`/${community.raw}/posts`}
rel="noopener noreferrer"
target="_blank"
>
<Left>
<CommunityIcon
nonFill={contains(community.raw, NON_FILL_COMMUNITY)}
src={community.logo}
// loading={<CommunityHolder text={community.raw} place="discovery" />}
/>
</a>
<Title>{community.title}</Title>
<Desc>{cutRest(community.desc, 20)}</Desc>
<ActivitySpark>
<TrendLine data={community.contributesDigest} />
</ActivitySpark>
<Footer>
<>
{/* TODO: number color should be different when number grow large */}
{prettyNum(community.subscribersCount)}{' '}
{community.subscribersCount < 1000 ? '人加入' : '加入'}
</>

<SubscribeBtn
community={community}
subscribing={subscribing}
subscribingId={subscribingId}
/>
</Footer>
<Raw>{community.raw}</Raw>
<ActivitySpark>
<TrendLine data={trendData} />
{/* <TrendLine data={[3, 4, 7, 5, 4, 10, 6]} /> */}
</ActivitySpark>
<SpaceGrow />
<ContentWrapper>
内容&nbsp;{prettyNum(community.subscribersCount)}
</ContentWrapper>
</Left>
<Right>
<Link href={`/${community.raw}`} passHref>
<Title>{community.title}</Title>
</Link>
<Desc>{cutRest(community.desc, 20)}</Desc>
<SpaceGrow />
<Footer>
<JoinWrapper>
{prettyNum(community.subscribersCount)}&nbsp;加入
</JoinWrapper>
<SubscribeBtn
community={community}
subscribing={subscribing}
subscribingId={subscribingId}
/>
</Footer>
</Right>
</Wrapper>
)
}
Expand Down
3 changes: 2 additions & 1 deletionsrc/containers/content/ExploreContent/SubscribeBtn.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -23,13 +23,14 @@ const SubscribeBtn: FC<TProps> = ({
}) => {
if (subscribing && community.id === subscribingId) {
return (
<Button size="small" type="primary">
<Button size="tiny" type="primary">
加入 ..
</Button>
)
}
return (
<FollowButton
size="tiny"
followText="加 入"
followingText="已加入"
hasFollowed={community.viewerHasSubscribed}
Expand Down
6 changes: 2 additions & 4 deletionssrc/containers/content/ExploreContent/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -76,10 +76,8 @@ const ExploreContentContainer: FC<TProps> = ({
<Pagi
{...pagiInfo}
onChange={pageOnChange}
margin={{ bottom: '60px' }}
>
<div>社区行动指南</div>
</Pagi>
margin={{ top: '30px', bottom: '40px' }}
/>
</>
) : (
<NotFound searchValue={searchValue} />
Expand Down
7 changes: 4 additions & 3 deletionssrc/containers/content/ExploreContent/styles/banner.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -12,21 +12,22 @@ export const BannerContainer = styled.div.attrs(({ testid }: TTestable) => ({
${css.flexColumn('justify-center')};

position: relative;
min-height:170px;
min-height:220px;
border-bottom: 1px solid;
/* background: ${theme('banner.bg')}; */
border-bottom: ${theme('banner.spliter')};
@media (max-height: 800px) {
min-height:160px;
min-height:200px;
}
`
export const IntroWrapper = styled.div`
${css.flexColumn('align-both')};
padding-top: 30px;
color: ${theme('thread.articleDigest')};
/* background-image: linear-gradient(#043B49, #022A35); */
background-image: ${theme('banner.linearGradient')};
width: 100%;
height:250px;
height:300px;
`
export const IntroTitle = styled.div`
${css.flex('align-center')};
Expand Down
94 changes: 61 additions & 33 deletionssrc/containers/content/ExploreContent/styles/community_card.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,74 +5,102 @@ import { theme } from '@/utils/themes'
import css from '@/utils/css'

const BaseCard = styled.div`
${css.flexColumn('align-center')};
${css.flex()};

position: relative;
padding-top: 12px;
padding: 10px;
padding-bottom: 0;
width: 200px;
height: 250px;
margin-right: 30px;
padding: 15px 20px;
width: 260px;
height: 150px;
margin-right: 25px;
background: #0c3442; // ${theme('content.cardBg')};
border: 1px solid;
border-color: ${theme('content.cardBorder')};
border-radius:12px;
border-radius:8px;
`
export const Wrapper = styled(BaseCard)`
margin-bottom:60px;
margin-bottom:30px;

&:hover {
cursor: pointer;
border: 1px solid #327faf;
box-shadow: 0px 7px 20px 10px rgba(0, 0, 0, 0.15); /* same with the popover */
}
/*
&:hover {
border: 1px solid;
border-color: ${theme('content.cardBorderHover')};
box-shadow: 0px 7px 20px 10px rgba(0, 0, 0, 0.15);
}
*/

transition: all 0.2s;
`
export const Left = styled.div`
${css.flexColumn('align-start')};
width: 80px;
margin-right: 10px;
`

export const Right = styled.div`
width: calc(100% - 80px);
${css.flexColumn('align-start')};
flex-flow: 1;
`
// fill only works for non-colored svgs
export const CommunityIcon = styled(Img)<{ nonFill: boolean }>`
${css.size(54)};
${css.size(26)};
fill: ${({ nonFill }) => (nonFill ? '' : theme('banner.desc'))};
margin-bottom: 8px;
margin-top: -35px;
${Wrapper}:hover & {
fill: ${({ nonFill }) => (nonFill ? '' : theme('banner.title'))};
}
`
export const Title = styled.div`
export const Raw = styled.div`
font-size: 13px;
color: ${theme('thread.articleDigest')};
opacity: 0.8;

&:before {
content: '/';
margin-right: 2px;
}
`
export const JoinWrapper = styled.div`
${css.flex('align-center')};
color: ${theme('thread.articleDigest')};
font-size: 13px;
`
export const ContentWrapper = styled(JoinWrapper)`
margin-top: -30px;
`
export const Title = styled.a`
margin-top: -2px;
font-size: 18px;
font-weight: bold;
margin-top: 5px;
text-align: center;
color: ${theme('thread.articleTitle')};
text-decoration: none;
&:hover {
text-decoration: underline;
color: #139c9e;
cursor: pointer;
}
`
export const Desc = styled.div`
margin-top: 8px;
color: ${theme('thread.articleDigest')};
word-break: break-all;
font-size: 13px;
text-align: center;
min-height: 50px;
position: relative;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
`
export const ActivitySpark = styled.div`
width: 100%;
height: 100%;
width: 80px;
height: 60px;
margin-left: -15px;
margin-top: 8px;
`
export const Footer = styled.div`
${css.flex('justify-around')};

width: 90%;
position: absolute;
bottom: 16px;
color: ${theme('banner.desc')};
border-top: 1px solid;
border-top-color: ${theme('content.cardBorder')};
width: 100%;
${css.flex('align-center', 'justify-between')};
/* border-top: 1px solid;
border-top-color: ${theme('content.cardBorder')}; */
padding-top: 15px;
`
export const Divider = styled.div`
Expand Down
2 changes: 1 addition & 1 deletionsrc/containers/content/ExploreContent/styles/index.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -14,7 +14,7 @@ export const ContentWrapper = styled.div<{ center: boolean }>`
transition: all 0.2s;
`
export const InnerWrapper = styled.div<{ metric: TMetric }>`
${css.flex()};
${css.flex('justify-center')};
width: 100%;
height: 100%;
${({ metric }) => css.fitContentWidth(metric)};
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,7 @@ import css from '@/utils/css'
export const Wrapper = styled.div<TActive>`
${css.flexColumn()};
width: 120px;
min-width: 120px;
display: ${({ show }) => (show ? 'flex' : 'none')};
`
export const Holder = styled.div`
Expand Down
6 changes: 3 additions & 3 deletionssrc/containers/unit/Footer/DesktopView/TopInfo/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -33,22 +33,22 @@ const TopInfo: FC<TProps> = ({
case METRIC.WORKS_ARTICLE: {
return <WorksArticle {...restProps} />
}
case METRIC.EXPLORE: {
return <General title="发现社区" />
}
case METRIC.COOL_GUIDE: {
return <General title="酷导航" />
}

case METRIC.WORKS: {
return <General title="作品集市" />
}

case METRIC.MEETUPS: {
return <General title="小聚" />
}

case METRIC.SUPPORT_US: {
return <General title="支持我们" />
}

case METRIC.SUBSCRIBE: {
return <General title="内容订阅" />
}
Expand Down
1 change: 1 addition & 0 deletionssrc/containers/unit/Footer/DesktopView/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -52,6 +52,7 @@ const FooterContainer: FC<TProps> = ({
METRIC.SUBSCRIBE,
METRIC.SUPPORT_US,
METRIC.HAVE_A_DRINK,
METRIC.EXPLORE,
])

return (
Expand Down
16 changes: 8 additions & 8 deletionssrc/pages/explore.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,6 +10,7 @@ import {
queryStringToJSON,
ssrParseURL,
ssrRescue,
refreshIfneed,
exploreSEO,
ssrError,
} from '@/utils'
Expand DownExpand Up@@ -57,16 +58,15 @@ const fetchData = async (context, opt = {}) => {
}

export const getServerSideProps = async (context) => {
// const { communityPath, thread } = ssrParseURL(props.req)
let resp
try {
resp = await fetchData(context)
} catch ({ response: { errors }}) {
if (ssrRescue.hasLoginError(errors)) {
resp = await fetchData(context, { tokenExpired: true })
} else {
return ssrError(context, 'fetch', 500)
}
const { sessionState }= resp

refreshIfneed(sessionState, '/explore', context)
} catch (e) {
console.log('#### error from server: ', e)
return ssrError(context, 'fetch', 500)
}

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

return (
<Provider store={store}>
<GlobalLayout metric={METRIC.EXPLORE} seoConfig={seoConfig}>
<GlobalLayout metric={METRIC.EXPLORE} seoConfig={seoConfig} noSidebar>
<ExploreContent />
</GlobalLayout>
</Provider>
Expand Down
[8]ページ先頭
©2009-2025 Movatter.jp