refactor(media-query): repo page looks right

Author: mydearxym

containers/RepoContent/index.js

@@ -13,10 +13,21 @@ import { makeDebugger, storePlug } from 'utils'
 import Maybe from 'components/Maybe'
 import MarkDownRender from 'components/MarkDownRender'
 
+import ArticleAuthorCard from 'containers/ArticleAuthorCard'
+import ContentSourceCard from 'components/ContentSourceCard'
+
 import Comments from '../Comments'
 import SideCards from './SideCards'
+import RepoStatusCard from './RepoStatusCard'
 
-import { Wrapper, MainWrapper, ArticleWrapper, CommentsWrapper } from './styles'
+import {
+  Wrapper,
+  MainWrapper,
+  ArticleWrapper,
+  CommentsWrapper,
+  MobileWrapper,
+  MobileContentCard,
+} from './styles'
 
 import * as logic from './logic'
 
@@ -45,6 +56,17 @@ class RepoContentContainer extends React.Component {
               <ArticleWrapper>
                 <MarkDownRender body={viewingData.readme} />
               </ArticleWrapper>
+              <MobileWrapper>
+                <RepoStatusCard data={viewingData} />
+                <MobileContentCard>
+                  <ArticleAuthorCard
+                    user={viewingData.author}
+                    introTitle="发布者"
+                  />
+                  <ContentSourceCard data={viewingData} />
+                </MobileContentCard>
+              </MobileWrapper>
+
               <CommentsWrapper>
                 <Comments />
               </CommentsWrapper>

containers/RepoContent/styles/index.js

@@ -6,10 +6,17 @@ 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;
+`};
 `
 /* background: ${theme('preview.articleBg')}; */
 export const ArticleWrapper = styled.div`
@@ -21,9 +28,28 @@ export const ArticleWrapper = styled.div`
   padding: 35px 40px;
   min-height: 60vh;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+  ${cs.media.mobile`
+    padding: 30px 20px;
+`};
 `
 
 export const CommentsWrapper = styled.div`
   margin-top: 30px;
   margin: 25px;
+  ${cs.media.mobile`
+    margin: 10px;
+  `};
+`
+
+export const MobileWrapper = styled.div`
+  margin-top: 10px;
+  ${cs.flexColumn('align-center')};
+  display: none;
+  ${cs.media.mobile`
+    display: flex;
+  `};
+`
+export const MobileContentCard = styled.div`
+  ${cs.flex()};
+  width: 100%;
 `

containers/RepoContent/styles/side_cards.js

@@ -5,6 +5,7 @@ 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;