Merge branch 'media-query' into dev

Author: mydearxym

components/ArticleItemPrefixLabel/styles/index.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { theme } from 'utils'
+import { theme, cs } from 'utils'
 import PinSVG from 'SvgIcons/PinSVG'
 
 export const ReadedLabel = styled.div`
@@ -11,6 +11,10 @@ export const ReadedLabel = styled.div`
   font-size: 0.9rem;
   opacity: 0.9;
   font-style: italic;
+  ${cs.media.mobile`
+    left: -12px;
+    font-size: 0.8rem;
+  `};
 `
 export const PinIcon = styled(PinSVG)`
   fill: ${theme('thread.articleDigest')};
@@ -19,4 +23,9 @@ export const PinIcon = styled(PinSVG)`
   height: 22px;
   top: ${({ topoffset }) => topoffset};
   left: -22px;
+  ${cs.media.mobile`
+    width: 18px;
+    height: 18px;
+    left: -12px;
+  `};
 `

components/AvatarsRow/index.js

@@ -12,7 +12,13 @@ import { Tooltip } from 'antd'
 import { ATATARS_LIST_LENGTH } from 'config/general'
 
 import { makeDebugger, prettyNum } from 'utils'
-import { Wrapper, AvatarsItem, AvatarsImg, AvatarsMore } from './styles'
+import {
+  Wrapper,
+  AvatarsItem,
+  MoreItem,
+  AvatarsImg,
+  AvatarsMore,
+} from './styles'
 
 /* eslint-disable-next-line */
 const debug = makeDebugger('c:AvatarsRow:index')
@@ -43,11 +49,11 @@ const AvatarsRow = ({
       {total <= 1 ? (
         <span />
       ) : (
-        <AvatarsItem onClick={onTotalSelect.bind(this, { users, total })}>
+        <MoreItem onClick={onTotalSelect.bind(this, { users, total })}>
           <Tooltip title={`所有评论共 ${total} 条`}>
             <AvatarsMore total={total}>{prettyNum(total)}</AvatarsMore>
           </Tooltip>
-        </AvatarsItem>
+        </MoreItem>
       )}
 
       {R.slice(0, limit, sortedUsers).map(user => (

components/AvatarsRow/styles/index.js

@@ -11,7 +11,7 @@ export const Wrapper = styled.ul`
   padding: 0px 8px 0px 0px;
 `
 // height: 49px;
-export const AvatarsItem = styled.li`
+const BaseAvatarItem = styled.li`
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   position: relative;
@@ -25,6 +25,27 @@ export const AvatarsItem = styled.li`
   }
   transition: all 0.3s;
 `
+
+export const AvatarsItem = styled(BaseAvatarItem)`
+  margin: 0px 0px 0px 0px;
+  padding: 0px 0px 0px 0px;
+  position: relative;
+  width: 25px;
+  opacity: 0.75;
+  &:hover {
+    opacity: 1;
+  }
+  ${Wrapper}:hover & {
+    margin-left: 5px;
+  }
+  transition: all 0.3s;
+  ${cs.media.mobile`display: none`};
+`
+
+export const MoreItem = styled(BaseAvatarItem)`
+  ${cs.media.mobile`display: none`};
+`
+
 export const AvatarsImg = styled.img`
   border: 2px solid;
   border-color: ${theme('thread.commentsUserBorder')};

components/CommunityStatesPad/index.js

@@ -13,6 +13,8 @@ import SubscribedTitle from './SubscribedTitle'
 import {
   Wrapper,
   NumberSection,
+  ContentSection,
+  EditorSection,
   NumberDivider,
   NumberTitle,
   NumberItem,
@@ -52,17 +54,17 @@ const CommunityStatesPad = ({
         </NumberItem>
       </NumberSection>
       <NumberDivider />
-      <NumberSection readOnly>
+      <ContentSection readOnly>
         <NumberTitle readOnly>内容</NumberTitle>
         <NumberItem readOnly>{prettyNum(contentsCount)}</NumberItem>
-      </NumberSection>
+      </ContentSection>
       <NumberDivider />
-      <NumberSection>
+      <EditorSection>
         <NumberTitle readOnly>编辑</NumberTitle>
         <NumberItem onClick={onShowEditorList}>
           {prettyNum(editorsCount)}
         </NumberItem>
-      </NumberSection>
+      </EditorSection>
     </Wrapper>
   )
 }

components/CommunityStatesPad/styles/index.js

@@ -20,6 +20,15 @@ export const NumberSection = styled.div`
       readOnly ? '' : theme('banner.numberHoverBg')};
   }
 `
+
+export const ContentSection = styled(NumberSection)`
+  ${cs.media.mobile`display: none`};
+`
+
+export const EditorSection = styled(NumberSection)`
+  ${cs.media.mobile`display: none`};
+`
+
 // text-decoration: ${({ readOnly }) => (readOnly ? '' : 'underline')};
 export const NumberTitle = styled.div`
   color: ${theme('banner.numberDesc')};
@@ -49,4 +58,5 @@ export const NumberDivider = styled.div`
   align-self: center;
   margin-left: 10px;
   margin-right: 10px;
+  ${cs.media.mobile`display: none`};
 `

components/ContentSourceCard/styles/index.js

@@ -11,6 +11,11 @@ export const Wrapper = styled.div`
   background: ${theme('preview.articleBg')};
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
   margin-bottom: 15px;
+
+  ${cs.media.mobile`
+    width: 50%;
+    padding: 10px;
+`};
 `
 export const Title = styled.div`
   color: ${theme('thread.articleTitle')};
@@ -22,6 +27,11 @@ export const Desc = styled.div`
   margin-bottom: 20px;
   flex-direction: ${({ column }) => (column ? 'column' : 'row')};
   flex-wrap: wrap;
+
+  ${cs.media.mobile`
+    margin-top: 6px;
+    margin-bottom: 10px;
+  `};
 `
 export const Didiver = styled.div`
   margin-top: 10px;

components/InlineTags/styles/index.js

@@ -11,6 +11,7 @@ export const Wrapper = styled.div`
 export const Tag = styled.div`
   ${cs.flex('align-center')};
   margin-right: 4px;
+  min-width: 40px;
 `
 export const Title = styled.div`
   color: ${theme('thread.articleTag')};

components/JobItem/CompanyInfo.js

@@ -13,6 +13,7 @@ import {
   Title,
   StatesWrapper,
   StateItem,
+  FinanceState,
 } from './styles/company_info'
 
 const CompanyInfo = ({
@@ -28,7 +29,7 @@ const CompanyInfo = ({
         <Middle>
           <StatesWrapper>
             <StateItem>{field} </StateItem>
-            <StateItem>{finance}</StateItem>
+            <FinanceState>{finance}</FinanceState>
             <StateItem>{scale}</StateItem>
           </StatesWrapper>
         </Middle>

components/JobItem/JobInfo.js

@@ -21,13 +21,15 @@ import {
   Exp,
   ExpDivider,
   Extra,
+  PublishInfo,
 } from './styles/job_info'
 
 const JobInfo = ({
   entry: {
     author,
     insertedAt,
     views,
+    commentsCount,
     title,
     salary,
     education,
@@ -58,14 +60,16 @@ const JobInfo = ({
     </Middle>
     <Footer onClick={onPreview}>
       <Extra>
-        {author.nickname} <DotDivider />
-        <TimeAgo datetime={insertedAt} locale="zh_CN" />
-        <DotDivider />
+        <PublishInfo>
+          {author.nickname} <DotDivider />
+          <TimeAgo datetime={insertedAt} locale="zh_CN" />
+          <DotDivider />
+        </PublishInfo>
         浏览:
         {views}
         <DotDivider />
         评论:
-        {views}
+        {commentsCount}
       </Extra>
     </Footer>
   </Wrapper>

components/JobItem/styles/company_info.js

@@ -33,16 +33,25 @@ export const Footer = styled.div`
 export const Title = styled.div`
   color: ${theme('thread.articleTitle')};
   font-size: 0.9rem;
+  ${cs.media.mobile`
+    ${cs.truncate('100px')};
+  `};
 `
 export const StatesWrapper = styled.div`
   ${cs.flex()};
   color: ${theme('thread.articleDigest')};
 `
-export const StateItem = styled.div`
+const BaseState = styled.div`
   border: 1px solid;
   border-color: ${theme('thread.articleDigest')};
   border-radius: 5px;
   font-size: 0.75rem;
   padding: 0 5px;
   margin-right: 6px;
 `
+
+export const StateItem = styled(BaseState)`
+  ${cs.media.mobile`display: none`};
+`
+
+export const FinanceState = styled(BaseState)``