Merge branch 'media-query' into dev

Author: mydearxym

components/ThemeSelector/style/card_selector.js

@@ -1,7 +1,8 @@
 import styled from 'styled-components'
 
-import { theme, cs } from 'utils'
 import Img from 'Img'
+import { theme, cs } from 'utils'
+
 import { Dot } from './index'
 
 export const Wrapper = styled.div`
@@ -30,6 +31,8 @@ export const IntroBox = styled.div`
     border-color: ${theme('banner.desc')};
   }
   transition: border 0.3s;
+
+  ${cs.media.mobile`width: 160px; margin-right: 10px;`};
 `
 
 export const IntroDesc = styled.div`

containers/UserBanner/styles/index.js

@@ -25,9 +25,11 @@ export const BannerContentWrapper = styled.div`
 `
 export const UserBriefWrapper = styled.div`
   width: 60%;
+  ${cs.media.mobile`width: 100%`};
 `
 export const UserContributesWrapper = styled.div`
   width: 36%;
   max-width: 450px;
   margin-top: 10px;
+  ${cs.media.mobile`display: none`};
 `

containers/UserContent/index.js

@@ -21,7 +21,13 @@ import Tabber from 'components/Tabber'
 
 import DigestBoard from './DigestBoard'
 
-import { Container, MainWrapper, TabberWrapper, SidebarWrapper } from './styles'
+import {
+  Container,
+  MainWrapper,
+  TabberWrapper,
+  SidebarWrapper,
+  MobileBottom,
+} from './styles'
 
 import * as logic from './logic'
 
@@ -108,6 +114,9 @@ class UserContentContainer extends React.Component {
             />
           </TabberWrapper>
           <TabberContent active={activeThread} />
+          <MobileBottom>
+            <DigestBoard user={viewingUser} accountId={accountInfo.id} />
+          </MobileBottom>
         </MainWrapper>
         <SidebarWrapper>
           <Affix offsetTop={30}>

containers/UserContent/styles/index.js

@@ -7,6 +7,12 @@ export const Container = styled.div`
   margin-top: 30px;
   margin-left: 6%;
   margin-right: 5%;
+
+  ${cs.media.mobile`
+    margin-top: 10px;
+    margin-left: 2%;
+    margin-right: 2%;
+`};
 `
 
 export const MainWrapper = styled.div`
@@ -18,6 +24,7 @@ export const MainWrapper = styled.div`
   margin-right: 35px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
   width: 70%;
+  ${cs.media.mobile`width: 100%`};
 `
 export const TabberWrapper = styled.div`
   ${cs.flex()};
@@ -26,4 +33,12 @@ export const TabberWrapper = styled.div`
 export const SidebarWrapper = styled.div`
   width: 24%;
   color: ${theme('banner.desc')};
+  ${cs.media.mobile`display: none`};
+`
+
+export const MobileBottom = styled.div`
+  border-top: 1px dashed;
+  border-top-color: ${theme('thread.articleDigest')};
+  display: none;
+  ${cs.media.mobile`display: block`};
 `

containers/UserContent/styles/numbers_card.js

@@ -3,6 +3,7 @@ import { theme, cs } from 'utils'
 
 export const Wrapper = styled.div`
   ${cs.flex('justify-around')};
+  color: ${theme('thread.articleDigest')};
 `
 export const Divider = styled.div`
   border-left: 1px solid;