Merge pull request #3407 from thematters/develop

Release: v4.20.1
thematters · Apr 28, 2023 · 8676ce1 · 8676ce1
2 parents ed63344 + 65a4848
commit 8676ce1
Show file tree

Hide file tree

Showing 21 changed files with 213 additions and 152 deletions.
diff --git a/lang/zh-Hant.json b/lang/zh-Hant.json
@@ -104,7 +104,7 @@
     "description": ""
   },
   "3uQKhx": {
-    "defaultMessage": "若你希望向 Matters 提出建議，或遭遇操作異常，请發送郵件至",
+    "defaultMessage": "若你希望向 Matters 提出建議，或遭遇操作異常，請發送郵件至",
     "description": "src/views/Help/index.tsx"
   },
   "3yk8fB": {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matters-web",
-  "version": "4.20.0",
+  "version": "4.20.1",
   "description": "codebase of Matters' website",
   "sideEffects": false,
   "author": "Matters <[email protected]>",

diff --git a/src/components/List/styles.css b/src/components/List/styles.css
@@ -1,30 +1,34 @@
 .list {
   &.has-border {
-    & :global(> .list-item + .list-item) {
-      @mixin border-top-grey;
+    & :global(> .list-item) {
+      @mixin border-bottom-grey;
+
+      border-bottom-style: dashed;
+    }
 
-      border-top-style: dashed;
+    & :global(> .list-item:last-child) {
+      border-bottom: 0;
     }
   }
 
   &.spacing-y-base {
-    & :global(> .list-item + .list-item) {
-      padding-top: calc(var(--spacing-base) / 2);
-      margin-top: calc(var(--spacing-base) / 2);
+    & :global(> .list-item) {
+      padding-bottom: calc(var(--spacing-base) / 2);
+      margin-bottom: calc(var(--spacing-base) / 2);
     }
   }
 
   &.spacing-y-loose {
     & :global(> .list-item) {
-      padding-top: calc(var(--spacing-loose) / 2);
-      margin-top: calc(var(--spacing-loose) / 2);
+      padding-bottom: calc(var(--spacing-loose) / 2);
+      margin-bottom: calc(var(--spacing-loose) / 2);
     }
   }
 
   &.spacing-y-xloose {
     & :global(> .list-item) {
-      padding-top: calc(var(--spacing-x-loose) / 2);
-      margin-top: calc(var(--spacing-x-loose) / 2);
+      padding-bottom: calc(var(--spacing-x-loose) / 2);
+      margin-bottom: calc(var(--spacing-x-loose) / 2);
     }
   }
 

diff --git a/src/components/UserProfile/FollowingDialog/Content/index.tsx b/src/components/UserProfile/FollowingDialog/Content/index.tsx
@@ -11,7 +11,7 @@ const FollowingDialogContent = () => {
   const [feedType, setFeedType] = useState<FollowingFeedType>('user')
 
   return (
-    <Dialog.Content>
+    <Dialog.Content spacing={['base', 'base']}>
       <FeedType type={feedType} setFeedType={setFeedType} />
       {feedType === 'circle' && <CirclesFeed />}
       {feedType === 'tag' && <TagsFeed />}

diff --git a/src/components/UserProfile/FollowingDialog/UsersFeed/index.tsx b/src/components/UserProfile/FollowingDialog/UsersFeed/index.tsx
@@ -124,6 +124,7 @@ const UsersFeed = () => {
                   id: node.id,
                 })
               }
+              spacing={['tight', 0]}
             />
           </List.Item>
         ))}

diff --git a/src/views/Follow/Feed/FollowingRecommendArticle/styles.css b/src/views/Follow/Feed/FollowingRecommendArticle/styles.css
@@ -20,12 +20,15 @@
   margin-right: var(--spacing-base);
 
   & .title {
-    @mixin line-clamp;
-
     margin-bottom: var(--spacing-x-tight);
     font-size: var(--font-size-xm);
     font-weight: var(--font-weight-medium);
-    -webkit-line-clamp: 2;
+
+    & :global(> a) {
+      @mixin line-clamp;
+
+      -webkit-line-clamp: 2;
+    }
   }
 
   & .author {

diff --git a/src/views/Follow/Feed/RecommendArticleActivity/index.tsx b/src/views/Follow/Feed/RecommendArticleActivity/index.tsx
@@ -35,7 +35,7 @@ const RecommendArticleActivity = ({ articles, source, location }: Props) => {
       : 'ArticleRecommendationActivity'
 
   return (
-    <>
+    <section className="container">
       <Slides header={<FollowingRecommendHead type={type} />}>
         {articles.map((article, index) => (
           <Slides.Item
@@ -64,10 +64,10 @@ const RecommendArticleActivity = ({ articles, source, location }: Props) => {
             </section>
           </Slides.Item>
         ))}
-        <style jsx>{styles}</style>
       </Slides>
       <Waypoint onEnter={() => setMountTracker(true)} />
-    </>
+      <style jsx>{styles}</style>
+    </section>
   )
 }
 

diff --git a/src/views/Follow/Feed/RecommendArticleActivity/styles.css b/src/views/Follow/Feed/RecommendArticleActivity/styles.css
@@ -2,6 +2,10 @@
   --recommend-article-card-height: 163px;
 }
 
+.container {
+  padding-bottom: var(--spacing-x-tight);
+}
+
 .item {
   @mixin border-grey;
 

diff --git a/src/views/Follow/Feed/RecommendCircleActivity/index.tsx b/src/views/Follow/Feed/RecommendCircleActivity/index.tsx
@@ -18,27 +18,29 @@ const RecommendCircleActivity = ({ circles, location }: Props) => {
   }
 
   return (
-    <Slides header={<FollowingRecommendHead type="circle" />}>
-      {circles.map((circle, index) => (
-        <Slides.Item
-          size="md"
-          key={index}
-          onClick={() => {
-            analytics.trackEvent('click_feed', {
-              type: 'following',
-              contentType: 'CircleRecommendationActivity',
-              location: `${location}.${index}`,
-              id: circle.id,
-            })
-          }}
-        >
-          <section className="item">
-            <FollowingRecommendCircle circle={circle} />
-          </section>
-        </Slides.Item>
-      ))}
+    <section className="container">
+      <Slides header={<FollowingRecommendHead type="circle" />}>
+        {circles.map((circle, index) => (
+          <Slides.Item
+            size="md"
+            key={index}
+            onClick={() => {
+              analytics.trackEvent('click_feed', {
+                type: 'following',
+                contentType: 'CircleRecommendationActivity',
+                location: `${location}.${index}`,
+                id: circle.id,
+              })
+            }}
+          >
+            <section className="item">
+              <FollowingRecommendCircle circle={circle} />
+            </section>
+          </Slides.Item>
+        ))}
+      </Slides>
       <style jsx>{styles}</style>
-    </Slides>
+    </section>
   )
 }
 

diff --git a/src/views/Follow/Feed/RecommendCircleActivity/styles.css b/src/views/Follow/Feed/RecommendCircleActivity/styles.css
@@ -1,3 +1,7 @@
+.container {
+  padding-bottom: var(--spacing-x-tight);
+}
+
 .item {
   @mixin border-grey;
 

diff --git a/src/views/Follow/Feed/RecommendUserActivity/index.tsx b/src/views/Follow/Feed/RecommendUserActivity/index.tsx
@@ -17,27 +17,29 @@ const RecommendUserActivity = ({ users }: Props) => {
   }
 
   return (
-    <Slides header={<FollowingRecommendHead type="user" />}>
-      {users.map((user, index) => (
-        <Slides.Item
-          size="md"
-          key={index}
-          onClick={() => {
-            analytics.trackEvent('click_feed', {
-              type: 'following',
-              contentType: 'UserRecommendationActivity',
-              location: `${location}.${index}`,
-              id: user.id,
-            })
-          }}
-        >
-          <section className="item">
-            <FollowingRecommendUser user={user} />
-          </section>
-        </Slides.Item>
-      ))}
+    <section className="container">
+      <Slides header={<FollowingRecommendHead type="user" />}>
+        {users.map((user, index) => (
+          <Slides.Item
+            size="md"
+            key={index}
+            onClick={() => {
+              analytics.trackEvent('click_feed', {
+                type: 'following',
+                contentType: 'UserRecommendationActivity',
+                location: `${location}.${index}`,
+                id: user.id,
+              })
+            }}
+          >
+            <section className="item">
+              <FollowingRecommendUser user={user} />
+            </section>
+          </Slides.Item>
+        ))}
+      </Slides>
       <style jsx>{styles}</style>
-    </Slides>
+    </section>
   )
 }
 

diff --git a/src/views/Follow/Feed/RecommendUserActivity/styles.css b/src/views/Follow/Feed/RecommendUserActivity/styles.css
@@ -1,3 +1,7 @@
+.container {
+  padding-bottom: var(--spacing-x-tight);
+}
+
 .item {
   @mixin border-grey;
 

diff --git a/src/views/Follow/Feed/index.tsx b/src/views/Follow/Feed/index.tsx
@@ -84,54 +84,38 @@ const FollowingFeed = () => {
 
       <InfiniteScroll hasNextPage={pageInfo.hasNextPage} loadMore={loadMore}>
         <List responsiveWrapper>
-          {edges.map(({ node }, i) => {
-            if (node.__typename === 'ArticleRecommendationActivity') {
-              return (
-                <section key={`${node.__typename}:${i}`}>
-                  <RecommendArticleActivity
-                    location={i}
-                    articles={node.recommendArticles}
-                    source={node.source}
-                  />
-                </section>
-              )
-            }
-
-            if (node.__typename === 'CircleRecommendationActivity') {
-              return (
-                <section key={`${node.__typename}:${i}`}>
-                  <RecommendCircleActivity
-                    location={i}
-                    circles={node.recommendCircles}
-                  />
-                </section>
-              )
-            }
-
-            if (node.__typename === 'UserRecommendationActivity') {
-              return (
-                <section key={`${node.__typename}:${i}`}>
-                  <RecommendUserActivity users={node.recommendUsers} />
-                </section>
-              )
-            }
-            return (
-              <List.Item key={`${node.__typename}:${i}`}>
-                {node.__typename === 'UserPublishArticleActivity' && (
-                  <UserPublishArticleActivity location={i} {...node} />
-                )}
-                {node.__typename === 'UserBroadcastCircleActivity' && (
-                  <UserBroadcastCircleActivity {...node} />
-                )}
-                {node.__typename === 'UserCreateCircleActivity' && (
-                  <UserCreateCircleActivity location={i} {...node} />
-                )}
-                {node.__typename === 'UserAddArticleTagActivity' && (
-                  <UserAddArticleTagActivity location={i} {...node} />
-                )}
-              </List.Item>
-            )
-          })}
+          {edges.map(({ node }, i) => (
+            <List.Item key={`${node.__typename}:${i}`}>
+              {node.__typename === 'UserPublishArticleActivity' && (
+                <UserPublishArticleActivity location={i} {...node} />
+              )}
+              {node.__typename === 'UserBroadcastCircleActivity' && (
+                <UserBroadcastCircleActivity {...node} />
+              )}
+              {node.__typename === 'UserCreateCircleActivity' && (
+                <UserCreateCircleActivity location={i} {...node} />
+              )}
+              {node.__typename === 'UserAddArticleTagActivity' && (
+                <UserAddArticleTagActivity location={i} {...node} />
+              )}
+              {node.__typename === 'ArticleRecommendationActivity' && (
+                <RecommendArticleActivity
+                  location={i}
+                  articles={node.recommendArticles}
+                  source={node.source}
+                />
+              )}
+              {node.__typename === 'CircleRecommendationActivity' && (
+                <RecommendCircleActivity
+                  location={i}
+                  circles={node.recommendCircles}
+                />
+              )}
+              {node.__typename === 'UserRecommendationActivity' && (
+                <RecommendUserActivity users={node.recommendUsers} />
+              )}
+            </List.Item>
+          ))}
         </List>
       </InfiniteScroll>
 

diff --git a/src/views/Follow/PickAuthors/AuthorPicker/index.tsx b/src/views/Follow/PickAuthors/AuthorPicker/index.tsx
@@ -8,6 +8,7 @@ import {
   List,
   PageHeader,
   QueryError,
+  ResponsiveWrapper,
   Spinner,
   TextIcon,
   Translate,
@@ -86,13 +87,15 @@ export const AuthorPicker = ({ title }: { title: React.ReactNode }) => {
       {error && <QueryError error={error} />}
 
       {!loading && (
-        <List hasBorder={false}>
-          {edges.map(({ node, cursor }) => (
-            <List.Item key={cursor}>
-              <UserDigest.Rich user={node} />
-            </List.Item>
-          ))}
-        </List>
+        <ResponsiveWrapper>
+          <List hasBorder={false}>
+            {edges.map(({ node, cursor }) => (
+              <List.Item key={cursor}>
+                <UserDigest.Rich user={node} spacing={['tight', 0]} />
+              </List.Item>
+            ))}
+          </List>
+        </ResponsiveWrapper>
       )}
 
       <style jsx>{styles}</style>

diff --git a/src/views/Follow/PickAuthors/AuthorPicker/styles.css b/src/views/Follow/PickAuthors/AuthorPicker/styles.css
@@ -1,6 +1,10 @@
 .container {
   & :global(> header) {
     padding: var(--spacing-base);
+
+    @media (--sm-up) {
+      padding: var(--spacing-base) 0;
+    }
   }
 }
 

diff --git a/src/views/Home/Announcements/Carousel/styles.css b/src/views/Home/Announcements/Carousel/styles.css
@@ -22,7 +22,13 @@ header {
   left: var(--spacing-base);
   z-index: 1;
   height: var(--announcement-header-height);
-  padding: var(--spacing-x-tight) var(--spacing-base) 0;
+  padding-top: var(--spacing-x-tight);
+  padding-left: var(--spacing-x-tight);
+
+  @media (--sm-up) {
+    padding-left: 0;
+    margin-left: calc(0 - var(--spacing-x-tight));
+  }
 
   & .left {
     @mixin flex-center-start;
-Original file line number
+Diff line change
@@ Expand Up / @@ -124,6 +124,7 @@ const UsersFeed = () => { @@
                       id: node.id,
                     })
                   }
+                  spacing={['tight', 0]}
                 />
               </List.Item>
             ))}
@@ Expand Down @@