fix(post): content align center

Author: mydearxym

containers/PostContent/index.js

@@ -22,7 +22,9 @@ import SideCards from './SideCards'
 
 import {
   Wrapper,
+  InnerWrapper,
   MainWrapper,
+  SidebarWrapper,
   ArticleWrapper,
   BodyHeaderWrapper,
   CommentsWrapper,
@@ -43,7 +45,7 @@ const PostContentContainer = ({ postContent }) => {
   return (
     <Wrapper>
       <Maybe test={viewingData.id}>
-        <React.Fragment>
+        <InnerWrapper>
           <MainWrapper>
             <ArticleWrapper>
               <BodyHeaderWrapper>
@@ -68,10 +70,12 @@ const PostContentContainer = ({ postContent }) => {
               <Comments ssr />
             </CommentsWrapper>
           </MainWrapper>
-          <Affix offsetTop={30}>
-            <SideCards data={viewingData} />
-          </Affix>
-        </React.Fragment>
+          <SidebarWrapper>
+            <Affix offsetTop={30}>
+              <SideCards data={viewingData} />
+            </Affix>
+          </SidebarWrapper>
+        </InnerWrapper>
       </Maybe>
     </Wrapper>
   )

containers/PostContent/styles/index.js

@@ -3,26 +3,33 @@ import styled from 'styled-components'
 import { theme, cs } from '@utils'
 
 export const Wrapper = styled.article`
-  ${cs.flex()};
-  padding: 20px;
+  ${cs.flex('justify-center')};
+  padding-top: 20px;
   min-height: 300px;
+
   ${cs.media.tablet`
     padding: 8px 0;
   `};
 `
+export const InnerWrapper = styled.div`
+  ${cs.flex()};
+  width: 100%;
+  max-width: ${cs.MAX_CONTENT_WIDTH};
+  padding: 0 6vw;
+  ${cs.media.desktop`
+    padding: 0 4vw;
+  `};
+`
 export const MainWrapper = styled.div`
-  width: 68%;
-  margin-left: 2.5rem;
   ${cs.media.tablet`
     width: 100%;
-    margin-left: 0;
   `};
 `
+export const SidebarWrapper = styled.div``
 
 /* background: ${theme('preview.articleBg')}; */
 export const ArticleWrapper = styled.div`
   font-size: 1.1rem;
-  margin-left: 2vw;
   margin-right: 1.6vw;
   background: ${theme('preview.articleBg')};
   border-radius: 5px;
@@ -41,11 +48,12 @@ export const BodyHeaderWrapper = styled.div`
 `
 
 export const CommentsWrapper = styled.div`
-  margin-top: 30px;
-  margin: 25px;
+  margin: 30px 0;
+  margin-right: 25px;
+
   ${cs.media.mobile`
-margin: 10px;
-`};
+    margin: 10px;
+  `};
 `
 
 export const MobileWrapper = styled.div`

containers/PostsThread/index.js

@@ -24,8 +24,6 @@ import CityList from './CityList'
 
 import {
   Wrapper,
-  LeftPadding,
-  RightPadding,
   LeftPart,
   RightPart,
   FilterWrapper,
@@ -99,7 +97,6 @@ const PostsThreadContainer = ({ postsThread }) => {
 
   return (
     <Wrapper>
-      <LeftPadding />
       {isSpecThread(curCommunity.raw, curThread) ? (
         <SpecThread
           community={curCommunity.raw}
@@ -158,8 +155,6 @@ const PostsThreadContainer = ({ postsThread }) => {
           </RightPart>
         </React.Fragment>
       )}
-
-      <RightPadding />
     </Wrapper>
   )
 }

containers/PostsThread/styles/index.js

@@ -6,23 +6,15 @@ import { cs } from '@utils'
 
 export const Wrapper = styled.div`
   ${cs.flex()};
-  max-width: 1400px;
   padding-top: 8px;
   width: 100%;
 `
-
-export const LeftPadding = styled.div`
-  width: 3vw;
-`
-export const RightPadding = styled.div`
-  width: 4vw;
-`
 export const LeftPart = styled.div`
   flex-grow: 1;
   width: 100%;
 `
 export const RightPart = styled.div`
-  width: 18vw;
+  min-width: 200px;
   margin-left: 30px;
   padding-top: 5px;
   ${cs.media.tablet`display: none;`};