refactor(explore): card redesign

src/containers/content/ExploreContent/CommunityCard.tsx

@@ -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,
@@ -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>
   )
 }

src/containers/content/ExploreContent/SubscribeBtn.tsx

@@ -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}

src/containers/content/ExploreContent/index.tsx

@@ -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} />

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

@@ -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')};

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

@@ -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`

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

@@ -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)};

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

@@ -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`

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

@@ -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="内容订阅" />
     }

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

@@ -52,6 +52,7 @@ const FooterContainer: FC<TProps> = ({
     METRIC.SUBSCRIBE,
     METRIC.SUPPORT_US,
     METRIC.HAVE_A_DRINK,
+    METRIC.EXPLORE,
   ])
 
   return (

src/pages/explore.tsx

@@ -10,6 +10,7 @@ import {
   queryStringToJSON,
   ssrParseURL,
   ssrRescue,
+  refreshIfneed,
   exploreSEO,
   ssrError,
 } from '@/utils'
@@ -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
@@ -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>