refactor(media-query): improve multi pages in mobile view

Author: mydearxym

components/ContentBanner/styles/index.js

@@ -9,9 +9,10 @@ export const BaseBanner = styled.nav`
   min-height: 140px;
   background: ${theme('banner.bg')};
   border-bottom: ${theme('banner.spliter')};
-  @media (max-height: 800px) {
-    min-height: 130px;
-  }
+
+  ${cs.media.mobile`
+    min-height: 100px;
+  `};
 `
 export const BaseBannerContent = styled.div`
   ${cs.flex()};

components/JobItem/JobInfo.js

@@ -19,6 +19,7 @@ import {
   TagsWrapper,
   Degree,
   Exp,
+  ExpLabel,
   ExpDivider,
   Extra,
   PublishInfo,
@@ -53,7 +54,10 @@ const JobInfo = ({
       <Background>
         <Degree>{education}</Degree>
         <ExpDivider>&</ExpDivider>
-        <Exp>经验 {exp}</Exp>
+        <Exp>
+          <ExpLabel>经验 </ExpLabel>
+          {exp}
+        </Exp>
       </Background>
       <TagsWrapper>
         <InlineTags data={tags} />

components/JobItem/styles/job_info.js

@@ -30,7 +30,7 @@ export const Title = styled.div`
   font-size: 1rem;
   ${cs.media.mobile`
     ${cs.truncate('150px')};
-  `};
+`};
 `
 export const CommunitiesWrapper = styled.div`
   margin-left: 5px;
@@ -57,6 +57,9 @@ export const Background = styled.div`
 `
 export const Degree = styled.div``
 export const Exp = styled.div``
+export const ExpLabel = styled.span`
+  ${cs.media.tablet`display: none`};
+`
 
 export const Extra = styled.div`
   ${cs.flex('align-center')};
@@ -72,8 +75,8 @@ export const ExpDivider = styled.div`
 export const PublishInfo = styled.div`
   ${cs.flex('align-center')};
   ${cs.media.tablet`
-    display: none;
-  `};
+display: none;
+`};
 
   &:hover {
     cursor: pointer;

components/RepoItem/Header.js

@@ -17,6 +17,7 @@ import {
   TagsWrapper,
   StatusInfo,
   StatusSection,
+  ForkSection,
   StarIcon,
   StatusNum,
   ForkIcon,
@@ -44,10 +45,10 @@ const Header = ({ entry, onPreview }) => (
         <StatusNum>{numberWithCommas(entry.starCount)}</StatusNum>
       </StatusSection>
       <Space right="3px" />
-      <StatusSection>
+      <ForkSection>
         <ForkIcon src={`${ICON_CMD}/repo_fork.svg`} />
         <StatusNum>{numberWithCommas(entry.forkCount)}</StatusNum>
-      </StatusSection>
+      </ForkSection>
     </StatusInfo>
   </Wrapper>
 )

components/RepoItem/styles/footer.js

@@ -12,6 +12,11 @@ export const Wrapper = styled.div`
 
 export const Contributors = styled.div`
   ${cs.flexGrow()};
+
+  ${cs.media.mobile`
+    max-width: 60%;
+    ${cs.truncate('160px')};
+  `};
 `
 export const Builder = styled.div``
 

components/RepoItem/styles/header.js

@@ -43,7 +43,7 @@ export const RepoName = styled.div`
   }
   ${cs.media.mobile`
     ${cs.truncate('80px')};
-  `};
+`};
 `
 export const TagsWrapper = styled.div`
   margin-top: 4px;
@@ -57,6 +57,12 @@ export const StatusSection = styled.div`
   ${cs.flex()};
   margin-right: 6px;
 `
+export const ForkSection = styled(StatusSection)`
+  ${cs.media.mobile`
+    display: none;
+  `};
+`
+
 export const StatusNum = styled.div`
   color: ${theme('thread.articleDigest')};
 `

containers/ArticleBanner/JobMiddleInfo.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import DotDivider from 'components/DotDivider'
 import CityList from './CityList'
-import { Wrapper, Salary, Text } from './styles/job_middle_info'
+import { Wrapper, Salary, Text, ExpLabel } from './styles/job_middle_info'
 
 const JobMiddleInfo = ({ data }) => (
   <Wrapper>
@@ -12,7 +12,7 @@ const JobMiddleInfo = ({ data }) => (
     <Text>{data.education}</Text>
     <DotDivider />
     <Text>
-      经验
+      <ExpLabel>经验 </ExpLabel>
       {data.exp}
     </Text>
     <DotDivider />

containers/ArticleBanner/styles/index.js

@@ -12,14 +12,15 @@ export const Wrapper = styled.nav`
   padding-top: 10px;
   padding-bottom: 10px;
 
-  @media (max-height: 800px) {
-    min-height: 130px;
-  }
+  ${cs.media.mobile`
+    min-height: 100px;
+  `};
 `
 export const BannerContent = styled.div`
   ${cs.flex()};
   margin-left: 8%;
   margin-right: 8%;
+
   ${cs.media.mobile`
     margin-left: 4%;
     margin-right: 3%;

containers/ArticleBanner/styles/job_middle_info.js

@@ -15,3 +15,7 @@ export const Text = styled.div`
   color: ${theme('thread.articleDigest')};
   font-size: 1rem;
 `
+
+export const ExpLabel = styled.span`
+  ${cs.media.tablet`display: none`};
+`

containers/JobContent/styles/index.js

@@ -31,7 +31,8 @@ export const ArticleWrapper = styled.div`
 
   ${cs.media.tablet`
     padding: 30px 20px;
-`};
+    min-height: 40vh;
+  `};
 `
 export const BodyHeaderWrapper = styled.div`
   margin-top: -18px;
@@ -41,16 +42,16 @@ export const CommentsWrapper = styled.div`
   margin-top: 30px;
   margin: 25px;
   ${cs.media.tablet`
-    margin: 10px;
-  `};
+margin: 10px;
+`};
 `
 
 export const MobileWrapper = styled.div`
   margin-top: 10px;
   ${cs.flexColumn('align-center')};
   display: none;
   ${cs.media.tablet`
-    ${cs.flex()};
+${cs.flex()};
   `};
 `
 export const MobileContentCard = styled.div`