refactor(media-query): video page done right

Author: mydearxym

components/VideoInfoCard/styles/index.js

@@ -9,6 +9,10 @@ export const Wrapper = styled.div`
   background: ${theme('preview.articleBg')};
   min-height: 120px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+  ${cs.media.mobile`
+    padding: 10px 0;
+    box-shadow: none;
+  `};
 `
 export const BaseInfo = styled.div`
   ${cs.flexColumnGrow()};
@@ -29,6 +33,9 @@ export const Footer = styled.div`
 `
 export const OriginAuthor = styled.div`
   font-size: 1rem;
+  ${cs.media.mobile`
+font-size: 0.9rem;
+`};
 `
 export const OriginAuthorLink = styled.a`
   color: ${theme('thread.articleDigest')};
@@ -44,6 +51,9 @@ export const OriginAuthorLink = styled.a`
 `
 export const PublishTime = styled.div`
   font-size: 1rem;
+  ${cs.media.mobile`
+font-size: 0.9rem;
+`};
 `
 export const OtherInfo = styled.div`
   ${cs.flexColumn('justify-between')};

containers/VideoContent/index.js

@@ -17,6 +17,8 @@ import VideoInfoCard from 'components/VideoInfoCard'
 import ArticleBodyHeader from 'containers/ArticleBodyHeader'
 import Comments from 'containers/Comments'
 
+import ArticleAuthorCard from 'containers/ArticleAuthorCard'
+import ContentSourceCard from 'components/ContentSourceCard'
 import SideCards from './SideCards'
 
 import {
@@ -25,6 +27,7 @@ import {
   ArticleWrapper,
   BodyHeaderWrapper,
   CommentsWrapper,
+  MobileWrapper,
 } from './styles'
 
 import * as logic from './logic'
@@ -71,6 +74,15 @@ class VideoContentContainer extends React.Component {
                   <VideoInfoCard data={viewingData} />
                 </Maybe>
               </ArticleWrapper>
+
+              <MobileWrapper>
+                <ArticleAuthorCard
+                  user={viewingData.author}
+                  introTitle="发布者"
+                />
+                <ContentSourceCard data={viewingData} />
+              </MobileWrapper>
+
               <CommentsWrapper>
                 <Comments />
               </CommentsWrapper>

containers/VideoContent/styles/index.js

@@ -6,13 +6,18 @@ export const Wrapper = styled.article`
   ${cs.flex()};
   padding: 20px;
   min-height: 300px;
+  ${cs.media.mobile`
+    padding: 8px 0;
+  `};
 `
 export const MainWrapper = styled.div`
   width: 68%;
   margin-left: 2.5rem;
+  ${cs.media.mobile`
+    width: 100%;
+    margin-left: 0;
+`};
 `
-// padding: 35px 40px;
-
 export const ArticleWrapper = styled.div`
   font-size: 1.1rem;
   margin-left: 2vw;
@@ -22,6 +27,9 @@ export const ArticleWrapper = styled.div`
   padding-top: 30px;
   min-height: 40vh;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+  ${cs.media.mobile`
+    padding: 30px 20px;
+`};
 `
 export const BodyHeaderWrapper = styled.div`
   margin-top: -18px;
@@ -32,4 +40,18 @@ export const BodyHeaderWrapper = styled.div`
 export const CommentsWrapper = styled.div`
   margin-top: 30px;
   margin: 25px;
+  ${cs.media.mobile`
+    margin: 10px;
+  `};
+`
+
+export const MobileWrapper = styled.div`
+  ${cs.flex()};
+  margin-top: 15px;
+  width: 100%;
+  display: none;
+
+  ${cs.media.mobile`
+    display: flex;
+  `};
 `

containers/VideoContent/styles/side_cards.js

@@ -6,7 +6,9 @@ import { cs } from 'utils'
 export const Wrapper = styled.div`
   ${cs.flexColumn()};
   width: 90%;
+  ${cs.media.mobile`display: none`};
 `
+
 export const ReportWrapper = styled.div`
   padding: 0 10px;
 `