fix(video-page): content align center

Author: mydearxym

containers/VideoContent/index.js

@@ -21,7 +21,9 @@ import SideCards from './SideCards'
 
 import {
   Wrapper,
+  InnerWrapper,
   MainWrapper,
+  SidebarWrapper,
   ArticleWrapper,
   BodyHeaderWrapper,
   CommentsWrapper,
@@ -42,7 +44,7 @@ const VideoContentContainer = ({ videoContent }) => {
   return (
     <Wrapper>
       <Maybe test={viewingData.id}>
-        <React.Fragment>
+        <InnerWrapper>
           <MainWrapper>
             <ArticleWrapper>
               <BodyHeaderWrapper>
@@ -76,10 +78,12 @@ const VideoContentContainer = ({ videoContent }) => {
               <Comments />
             </CommentsWrapper>
           </MainWrapper>
-          <Affix offsetTop={30}>
-            <SideCards data={viewingData} />
-          </Affix>
-        </React.Fragment>
+          <SidebarWrapper>
+            <Affix offsetTop={30}>
+              <SideCards data={viewingData} />
+            </Affix>
+          </SidebarWrapper>
+        </InnerWrapper>
       </Maybe>
     </Wrapper>
   )

containers/VideoContent/styles/index.js

@@ -3,24 +3,31 @@ import styled from 'styled-components'
 import { theme, cs } from '@utils'
 
 export const Wrapper = styled.article`
-  ${cs.flex()};
+  ${cs.flex('justify-center')};
   padding: 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``
+
 export const ArticleWrapper = styled.div`
   font-size: 1.1rem;
-  margin-left: 2vw;
   margin-right: 1.6vw;
   background: ${theme('preview.articleBg')};
   border-radius: 5px;

containers/VideosThread/index.js

@@ -19,8 +19,6 @@ import TagsBar from '../TagsBar'
 
 import {
   Wrapper,
-  LeftPadding,
-  RightPadding,
   LeftPart,
   RightPart,
   FilterWrapper,
@@ -59,7 +57,6 @@ const VideosThreadContainer = ({ videosThread }) => {
 
   return (
     <Wrapper>
-      <LeftPadding />
       <LeftPart>
         <Maybe test={showFilterBar}>
           <FilterWrapper>
@@ -101,7 +98,6 @@ const VideosThreadContainer = ({ videosThread }) => {
           </Affix>
         </React.Fragment>
       </RightPart>
-      <RightPadding />
     </Wrapper>
   )
 }

containers/VideosThread/styles/index.js

@@ -4,24 +4,17 @@ import { cs } from '@utils'
 
 export const Wrapper = styled.div`
   ${cs.flex()};
-  max-width: 1400px;
+  max-width: ${cs.MAX_CONTENT_WIDTH};
   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: 20vw;
+  min-width: 200px;
   margin-left: 30px;
+  padding-top: 5px;
   ${cs.media.tablet`display: none;`};
 `