chore: adjust layout for about & global page (#1294)

Author: mydearxym

src/containers/thread/AboutThread/index.tsx

@@ -14,7 +14,15 @@ import BasicStates from './BasicStates'
 import type { TStore } from './store'
 import Sidebar from './Sidebar'
 
-import { Wrapper, MainWrapper, Block, BottomBlock, Title, Desc } from './styles'
+import {
+  Wrapper,
+  MainWrapper,
+  StateBlock,
+  IntroBlock,
+  MemberBlock,
+  Title,
+  Desc,
+} from './styles'
 import { useInit } from './logic' /* eslint-disable-next-line */
 
 // const log = buildLog('C:AboutThread')
@@ -33,24 +41,24 @@ const AboutThreadContainer: FC<TProps> = ({
   return (
     <Wrapper testid={testid}>
       <MainWrapper>
-        <Block>
+        <IntroBlock>
           <Title>社区简介</Title>
           <Desc>
             我注意到里面他说了一句话，是这个老兄说一会我们的大使也有问题要问您，也就是说这个节目里印度的大使是在场的。
             也就是说这个主持人所表达的意思，印度大使全听见了，并且是默许认可的。可以说也就是大使想说的话，也就是说这也代表了印度官方的态度。
             只是由一个主持人代为说了出来。这其实很有启发，就是说将来我们的驻美大使是不是也可以采取这样的套路，
             找一个懂媒体懂政治的学者在前面替自己怼人，自己默默坐在后面为学者的话背书。
           </Desc>
-        </Block>
+        </IntroBlock>
 
-        <Block>
+        <StateBlock>
           <Title>社区概况</Title>
           <BasicStates />
-        </Block>
+        </StateBlock>
 
-        <BottomBlock>
+        <MemberBlock>
           <Members />
-        </BottomBlock>
+        </MemberBlock>
       </MainWrapper>
       <Sidebar />
     </Wrapper>

src/containers/thread/AboutThread/styles/index.ts

@@ -11,25 +11,30 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
 `
 export const MainWrapper = styled.div`
   width: auto;
-  min-height: 500px;
+  min-height: 550px;
   flex-grow: 1;
 
   background: transparent;
   border-radius: 6px;
-  margin-top: 12px;
+  margin-top: 14px;
   padding-left: 25px;
 `
 export const Block = styled.div`
   margin-bottom: 30px;
   padding-bottom: 30px;
   border-bottom: 1px solid;
   border-bottom-color: ${theme('border')};
-  width: 600px;
+  width: 660px;
 `
-export const BottomBlock = styled(Block)`
+export const IntroBlock = styled(Block)`
+  padding-right: 20px;
+`
+export const StateBlock = styled(Block)`
+  padding-right: 10px;
+`
+export const MemberBlock = styled(Block)`
   border-bottom: none;
 `
-
 export const Title = styled.div`
   font-size: 14px;
   color: ${theme('thread.articleDigest')};
@@ -39,5 +44,5 @@ export const Title = styled.div`
 export const Desc = styled.div`
   font-size: 14px;
   color: ${theme('thread.articleDigest')};
-  line-height: 1.6;
+  line-height: 1.8;
 `

src/containers/thread/AboutThread/styles/members/admin_member.ts

@@ -6,12 +6,13 @@ import AdminStarSVG from '@/icons/AdminStar'
 
 export const Wrapper = styled.div`
   ${css.flex('align-start')};
+  margin-bottom: 15px;
 `
 export const AvatarWrapper = styled.div`
   position: relative;
 `
 export const Avatar = styled(Img)`
-  ${css.circle(46)};
+  ${css.circle(40)};
   margin-right: 10px;
   margin-bottom: 20px;
   border: 2px solid;
@@ -31,13 +32,18 @@ export const BadgeWrapper = styled.div`
 `
 export const Info = styled.div``
 export const Name = styled.div`
+  ${css.cutRest('140px')};
   color: ${theme('thread.articleTitle')};
   font-size: 14px;
+  margin-bottom: 2px;
+  font-weight: 600;
 `
 export const Bio = styled.div`
   color: ${theme('thread.articleDigest')};
   font-size: 12px;
-  ${css.cutRest('100px')};
+  ${css.lineClamp(2)};
+  opacity: 0.8;
+  padding-right: 22px;
 `
 export const BadgeIcon = styled(AdminStarSVG)`
   ${css.size(10)};

src/containers/thread/AboutThread/styles/members/index.ts

@@ -11,21 +11,9 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   ${css.flexColumn()};
   width: 100%;
 `
-export const MainWrapper = styled.div`
-  flex-grow: 1;
-  width: 100%;
-  min-height: 500px;
-
-  background: transparent;
-  border-radius: 6px;
-  margin-top: 12px;
-  padding-left: 25px;
-  padding-right: 80px;
-  margin-right: 65px;
-`
 export const Block = styled.div`
   margin-bottom: 30px;
-  width: 600px;
+  width: 665px;
 `
 export const BottomBlock = styled(Block)`
   border-top: 1px solid;
@@ -57,7 +45,7 @@ export const Row = styled.div`
 `
 export const Admin = styled.div`
   ${css.flex('align-start')};
-  width: 33%;
+  width: 33.3%;
 `
 export const NormalAvatar = styled(AdminAvatar)`
   ${css.circle(30)};

src/containers/tool/Drawer/styles/add_on/article_navi.ts

@@ -48,7 +48,11 @@ export const LeftArrow = styled(ArrowSVG)`
   fill: ${theme('thread.extraInfo')};
 `
 export const RightSwitchBlock = styled(SwitchBlock)`
-  left: 54vw;
+  left: 785px;
+
+  ${css.media.laptopL`
+    left: 55vw;
+  `};
 `
 export const RightArrow = styled(LeftArrow)`
   transform: rotate(180deg);

utils/css/metric.ts

@@ -16,7 +16,7 @@ export const mediaBreakPoints = {
 // CONTENT: 内容宽度
 export const WIDTH = {
   COMMUNITY: {
-    PAGE: '1600px',
+    PAGE: '1580px',
     CONTENT: '1080px',
     CONTENT_OFFSET: '34px',
     LAPTOP_M_PADDING: '0',