refactor(media-query): support tablet in most pages

mydearxym · mydearxym · commit c942dd878f6c · 2019-02-05T22:50:25.000+08:00
diff --git a/components/CommunityStatesPad/styles/index.js b/components/CommunityStatesPad/styles/index.js
@@ -51,6 +51,7 @@ export const NumberItem = styled.div`
   }
 
   ${cs.media.mobile`font-size: 1.2rem;`};
+  ${cs.media.tablet`font-size: 1.2rem;`};
 `
 export const NumberDivider = styled.div`
   border: 1px solid;
@@ -61,4 +62,8 @@ export const NumberDivider = styled.div`
   margin-left: 10px;
   margin-right: 10px;
   ${cs.media.mobile`display: none`};
+  ${cs.media.tablet`
+    margin-left: 5px;
+    margin-right: 5px;
+  `};
 `
diff --git a/components/ContentSourceCard/styles/index.js b/components/ContentSourceCard/styles/index.js
@@ -12,10 +12,10 @@ export const Wrapper = styled.div`
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
   margin-bottom: 15px;
 
-  ${cs.media.mobile`
+  ${cs.media.tablet`
     width: 50%;
     padding: 10px;
-`};
+  `};
 `
 export const Title = styled.div`
   color: ${theme('thread.articleTitle')};
diff --git a/components/EmptyThread/styles/index.js b/components/EmptyThread/styles/index.js
@@ -14,6 +14,11 @@ export const Wrapper = styled.div`
 export const Icon404 = styled(PromptIcon)`
   width: 320px;
   height: 320px;
+
+  ${cs.media.tablet`
+    width: 200px;
+    height: 200px;
+`};
 `
 
 export const Icon = styled.div``
@@ -28,12 +33,19 @@ export const Title = styled.div`
   margin-bottom: 10px;
   margin-top: 10px;
   font-size: 1.3rem;
+  ${cs.media.tablet`
+    font-size: 1.1rem;
+`};
 `
 
 export const DescWrapper = styled.div`
   color: ${theme('thread.articleDigest')};
   margin-top: 0.6rem;
   font-size: 0.9rem;
+
+  ${cs.media.tablet`
+    font-size: 0.8rem;
+  `};
 `
 const Link = styled.a`
   text-decoration: none;
diff --git a/components/JobItem/styles/job_info.js b/components/JobItem/styles/job_info.js
@@ -64,7 +64,7 @@ export const ExpDivider = styled.div`
 `
 
 export const PublishInfo = styled.div`
-  ${cs.media.mobile`
-display: none;
-`};
+  ${cs.media.tablet`
+    display: none;
+  `};
 `
diff --git a/components/Modal/styles/index.js b/components/Modal/styles/index.js
@@ -32,6 +32,7 @@ export const Wrapper = styled.div`
   animation: ${animate.zoomInRule};
 
   ${cs.media.mobile`width: 300px`};
+  ${cs.media.mobile`width: 400px`};
 `
 export const ChildrenWrapper = styled.div`
   min-height: 320px;
diff --git a/components/Navigator/styles/main_entries.js b/components/Navigator/styles/main_entries.js
@@ -8,7 +8,7 @@ export const Wrapper = styled.div`
 
   margin-left: 10px;
   font-size: 0.9rem;
-  ${cs.media.mobile`display: none`};
+  ${cs.media.tablet`display: none`};
 `
 export const DotDivider = styled(DotDividerBase)`
   background-color: ${theme('banner.desc')};
diff --git a/containers/ArticleAuthorCard/styles/index.js b/containers/ArticleAuthorCard/styles/index.js
@@ -16,6 +16,10 @@ export const Wrapper = styled.div`
     width: 50%;
     padding: 10px;
   `};
+
+  ${cs.media.tablet`
+    width: 50%;
+  `};
 `
 
 export const Divider = styled.div`
diff --git a/containers/ArticleBanner/styles/reaction_numbers.js b/containers/ArticleBanner/styles/reaction_numbers.js
@@ -34,6 +34,7 @@ export const NumberTitle = styled.div`
     animation: ${animate.pulseRule};
   }
   ${cs.media.mobile`font-size: 0.9rem`};
+  ${cs.media.tablet`font-size: 0.9rem`};
 `
 export const NumberItem = styled.div`
   font-size: 1.5rem;
@@ -47,6 +48,7 @@ export const NumberItem = styled.div`
   }
 
   ${cs.media.mobile`font-size: 1rem`};
+  ${cs.media.tablet`font-size: 1rem`};
 `
 
 export const NumberLoading = styled(Img)`
@@ -69,4 +71,10 @@ export const NumberDivider = styled.div`
     margin-right: 2px;
     height: 50%;
   `};
+
+  ${cs.media.tablet`
+      margin-left: 2px;
+      margin-right: 2px;
+      height: 50%;
+  `};
 `
diff --git a/containers/BodyLayout/styles/index.js b/containers/BodyLayout/styles/index.js
@@ -12,7 +12,7 @@ const Wrapper = styled.div`
   margin-left: ${({ sidebarPin }) => (sidebarPin ? '180px' : '0')};
   transition: all 0.2s;
   overflow-x: ${({ sidebarPin }) => (sidebarPin ? 'hidden' : '')};
-  ${cs.media.mobile`padding-left: 0`};
+  ${cs.media.tablet`padding-left: 0`};
 `
 /* overflow-x: hidden; */
 
diff --git a/containers/CommunityBanner/styles/digest_view.js b/containers/CommunityBanner/styles/digest_view.js
@@ -39,7 +39,7 @@ export const CommunityWrapper = styled.div`
   ${cs.flexGrow()};
   ${cs.media.mobile`
     margin-left: 5%;
-  `};
+`};
 `
 
 export const LogoWrapper = styled.div`
@@ -99,7 +99,15 @@ export const Desc = styled.div`
   @media (max-height: 800px) {
     font-size: 1rem;
   }
-  ${cs.truncate('180px')};
+  ${cs.truncate('500px')};
+
+  ${cs.media.mobile`
+    ${cs.truncate('180px')};
+  `};
+
+  ${cs.media.tablet`
+    ${cs.truncate('220px')};
+  `};
 `
 export const LogoHolder = styled(Img)`
   fill: ${theme('banner.desc')};
diff --git a/containers/CommunityBanner/styles/index.js b/containers/CommunityBanner/styles/index.js
@@ -22,7 +22,7 @@ export const BaseTabber = styled.div`
   bottom: -16px;
   margin-left: -10px;
   width: 80vw;
-  ${cs.media.mobile`
+  ${cs.media.tablet`
     left: 10px;
     width: 100%;
   `};
diff --git a/containers/CommunityContent/styles/index.js b/containers/CommunityContent/styles/index.js
@@ -15,7 +15,7 @@ export const Wrapper = styled.div`
   border-color: ${theme('content.border')};
   border-radius: 6px;
   padding: 1em;
-  ${cs.media.mobile`
+  ${cs.media.tablet`
     width: 100%;
     margin: 0;
     margin-top: 10px;
diff --git a/containers/Doraemon/styles/index.js b/containers/Doraemon/styles/index.js
@@ -27,6 +27,11 @@ export const PanelContainer = styled.div`
     width: 80vw;
     left: 30%;
   `};
+
+  ${cs.media.tablet`
+    width: 80vw;
+    left: 30%;
+  `};
 `
 // #001b21;
 export const BaseBar = styled.div`
diff --git a/containers/Footer/styles/bottom_info.js b/containers/Footer/styles/bottom_info.js
@@ -11,7 +11,7 @@ export const Wrapper = styled.div`
   height: 40px;
   width: 100%;
 
-  ${cs.media.mobile`display: none;`};
+  ${cs.media.tablet`display: none;`};
 `
 export const Copyrights = styled.div`
   color: ${theme('thread.articleDigest')};
diff --git a/containers/Footer/styles/brief_view.js b/containers/Footer/styles/brief_view.js
@@ -10,6 +10,7 @@ export const MainInfos = styled.footer`
   margin-left: 8%;
   margin-bottom: 20px;
   ${cs.media.mobile`display: none;`};
+  ${cs.media.tablet`display: none;`};
 `
 
 const Link = styled.a`
diff --git a/containers/Footer/styles/digest_view.js b/containers/Footer/styles/digest_view.js
@@ -20,7 +20,7 @@ export const MainInfos = styled.div`
     opacity: 1;
   }
   transition: opacity 0.3s;
-  ${cs.media.mobile`display: none;`};
+  ${cs.media.tablet`display: none;`};
 `
 
 export const Column = styled.div`
diff --git a/containers/Footer/styles/mobile_bottom_info.js b/containers/Footer/styles/mobile_bottom_info.js
@@ -6,7 +6,7 @@ export const MainInfoWrapper = styled.div`
   ${cs.flex('align-both')};
   height: 50px;
   display: none;
-  ${cs.media.mobile`display: flex;`};
+  ${cs.media.tablet`display: flex;`};
 `
 
 export const Item = styled.a`
@@ -24,7 +24,7 @@ export const BannerWrapper = styled.div`
   height: 80px;
   width: 100%;
   display: none;
-  ${cs.media.mobile`display: flex;`};
+  ${cs.media.tablet`display: flex;`};
 `
 export const Thanks = styled.div`
   ${cs.flex('align-both')};
diff --git a/containers/Header/styles/addons.js b/containers/Header/styles/addons.js
@@ -5,7 +5,7 @@ import { theme, cs } from 'utils'
 
 export const Wrapper = styled.div`
   ${cs.flex('align-center')};
-  ${cs.media.mobile`display: none`};
+  ${cs.media.tablet`display: none`};
 `
 
 export const HeaderStatesIcon = styled(HeaderStatesSVG)`
diff --git a/containers/JobContent/styles/index.js b/containers/JobContent/styles/index.js
@@ -6,17 +6,17 @@ export const Wrapper = styled.article`
   ${cs.flex()};
   padding: 20px;
   min-height: 300px;
-  ${cs.media.mobile`
+  ${cs.media.tablet`
     padding: 8px 0;
   `};
 `
 export const MainWrapper = styled.div`
   width: 68%;
   margin-left: 2.5rem;
-  ${cs.media.mobile`
-width: 100%;
+  ${cs.media.tablet`
+    width: 100%;
     margin-left: 0;
-`};
+  `};
 `
 /* background: ${theme('preview.articleBg')}; */
 export const ArticleWrapper = styled.div`
@@ -29,7 +29,7 @@ export const ArticleWrapper = styled.div`
   min-height: 60vh;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
 
-  ${cs.media.mobile`
+  ${cs.media.tablet`
     padding: 30px 20px;
 `};
 `
@@ -40,20 +40,20 @@ export const BodyHeaderWrapper = styled.div`
 export const CommentsWrapper = styled.div`
   margin-top: 30px;
   margin: 25px;
-  ${cs.media.mobile`
+  ${cs.media.tablet`
     margin: 10px;
-`};
+  `};
 `
 
 export const MobileWrapper = styled.div`
   margin-top: 10px;
   ${cs.flexColumn('align-center')};
   display: none;
-  ${cs.media.mobile`
-    display: flex;
+  ${cs.media.tablet`
+    ${cs.flex()};
   `};
 `
 export const MobileContentCard = styled.div`
-  ${cs.flex()};
+  ${cs.flex('justify-center')};
   width: 100%;
 `
diff --git a/containers/JobContent/styles/side_cards.js b/containers/JobContent/styles/side_cards.js
@@ -5,7 +5,7 @@ import { cs } from 'utils'
 export const Wrapper = styled.div`
   ${cs.flexColumn()};
   width: 90%;
-  ${cs.media.mobile`display: none`};
+  ${cs.media.tablet`display: none`};
 `
 export const ReportWrapper = styled.div`
   padding: 0 10px;
diff --git a/containers/JobsThread/styles/index.js b/containers/JobsThread/styles/index.js
@@ -21,7 +21,7 @@ export const LeftPart = styled.div`
 export const RightPart = styled.div`
   width: 20vw;
   margin-left: 30px;
-  ${cs.media.mobile`display: none`};
+  ${cs.media.tablet`display: none`};
 `
 /* fill: ${theme('shell.searchIcon')}; */
 export const PublishBtn = styled(Button)`
diff --git a/containers/PostContent/styles/index.js b/containers/PostContent/styles/index.js
@@ -9,11 +9,14 @@ export const Wrapper = styled.article`
   ${cs.media.mobile`
     padding: 8px 0;
   `};
+  ${cs.media.tablet`
+    padding: 8px 0;
+  `};
 `
 export const MainWrapper = styled.div`
   width: 68%;
   margin-left: 2.5rem;
-  ${cs.media.mobile`
+  ${cs.media.tablet`
     width: 100%;
     margin-left: 0;
   `};
@@ -53,7 +56,7 @@ export const MobileWrapper = styled.div`
   width: 100%;
   display: none;
 
-  ${cs.media.mobile`
-    display: flex;
+  ${cs.media.tablet`
+    ${cs.flex('justify-center')};
   `};
 `
diff --git a/containers/PostContent/styles/side_cards.js b/containers/PostContent/styles/side_cards.js
@@ -6,6 +6,7 @@ export const Wrapper = styled.div`
   ${cs.flexColumn()};
   width: 90%;
   ${cs.media.mobile`display: none`};
+  ${cs.media.tablet`display: none`};
 `
 export const ReportWrapper = styled.div`
   padding: 0 10px;
diff --git a/containers/PostsThread/styles/city_list.js b/containers/PostsThread/styles/city_list.js
@@ -13,7 +13,7 @@ export const ListWrapper = styled.div`
   display: flex;
   flex-wrap: wrap;
   margin-top: 10px;
-  ${cs.media.mobile`width: 100%`};
+  ${cs.media.tablet`width: 100%`};
 `
 export const LoadingWrapper = styled.div`
   ${cs.flexColumn()};
@@ -34,5 +34,5 @@ export const LoadingText = styled.div`
 `
 export const Sidebar = styled.div`
   width: 15%;
-  ${cs.media.mobile`display: none`};
+  ${cs.media.tablet`display: none`};
 `
diff --git a/containers/PostsThread/styles/index.js b/containers/PostsThread/styles/index.js
@@ -25,7 +25,7 @@ export const RightPart = styled.div`
   width: 18vw;
   margin-left: 30px;
   padding-top: 5px;
-  ${cs.media.mobile`display: none;`};
+  ${cs.media.tablet`display: none;`};
 `
 /* fill: ${theme('shell.searchIcon')}; */
 // TODO: rename to PublishButn
diff --git a/containers/Preview/logic.js b/containers/Preview/logic.js
@@ -51,7 +51,7 @@ const DataResolver = [
          debug('payload curCommunity: ', store.curCommunity.raw)
        */
       Global.innerWidth <= cs.mediaBreakPoints.mobile
-      if (Global.innerWidth <= cs.mediaBreakPoints.mobile) {
+      if (Global.innerWidth <= cs.mediaBreakPoints.tablet) {
         const { thread, data } = payload
         const targetUrl = `/${store.curCommunity.raw}/${thread}/${data.id}`
         Global.location.href = targetUrl
diff --git a/containers/RepoContent/styles/index.js b/containers/RepoContent/styles/index.js
diff --git a/containers/RepoContent/styles/side_cards.js b/containers/RepoContent/styles/side_cards.js
diff --git a/containers/ReposThread/styles/index.js b/containers/ReposThread/styles/index.js
diff --git a/containers/Sidebar/styles/index.js b/containers/Sidebar/styles/index.js
diff --git a/containers/UserBanner/styles/index.js b/containers/UserBanner/styles/index.js
diff --git a/containers/UserContent/styles/index.js b/containers/UserContent/styles/index.js
diff --git a/containers/VideoContent/styles/index.js b/containers/VideoContent/styles/index.js
diff --git a/containers/VideoContent/styles/side_cards.js b/containers/VideoContent/styles/side_cards.js
diff --git a/containers/VideosThread/styles/index.js b/containers/VideosThread/styles/index.js
diff --git a/containers/WikiThread/styles/index.js b/containers/WikiThread/styles/index.js
diff --git a/utils/common_styles.js b/utils/common_styles.js

Original file line number	Diff line number	Diff line change
@@ -51,6 +51,7 @@ export const NumberItem = styled.div`
`51`	`51`	`}`
`52`	`52`
`53`	`53`	${cs.media.mobile`font-size: 1.2rem;`};
	`54`	+ ${cs.media.tablet`font-size: 1.2rem;`};
`54`	`55`	`
`55`	`56`	export const NumberDivider = styled.div`
`56`	`57`	`border: 1px solid;`
@@ -61,4 +62,8 @@ export const NumberDivider = styled.div`
`61`	`62`	`margin-left: 10px;`
`62`	`63`	`margin-right: 10px;`
`63`	`64`	${cs.media.mobile`display: none`};
	`65`	+ ${cs.media.tablet`
	`66`	`+ margin-left: 5px;`
	`67`	`+ margin-right: 5px;`
	`68`	+ `};
`64`	`69`	`
Original file line number	Diff line number	Diff line change
@@ -64,7 +64,7 @@ export const ExpDivider = styled.div`
`64`	`64`	`
`65`	`65`
`66`	`66`	export const PublishInfo = styled.div`
`67`		- ${cs.media.mobile`
`68`		`-display: none;`
`69`		-`};
	`67`	+ ${cs.media.tablet`
	`68`	`+ display: none;`
	`69`	+ `};
`70`	`70`	`
Original file line number	Diff line number	Diff line change
@@ -32,6 +32,7 @@ export const Wrapper = styled.div`
`32`	`32`	`animation: ${animate.zoomInRule};`
`33`	`33`
`34`	`34`	${cs.media.mobile`width: 300px`};
	`35`	+ ${cs.media.mobile`width: 400px`};
`35`	`36`	`
`36`	`37`	export const ChildrenWrapper = styled.div`
`37`	`38`	`min-height: 320px;`
Original file line number	Diff line number	Diff line change
@@ -8,7 +8,7 @@ export const Wrapper = styled.div`
`8`	`8`
`9`	`9`	`margin-left: 10px;`
`10`	`10`	`font-size: 0.9rem;`
`11`		- ${cs.media.mobile`display: none`};
	`11`	+ ${cs.media.tablet`display: none`};
`12`	`12`	`
`13`	`13`	export const DotDivider = styled(DotDividerBase)`
`14`	`14`	`background-color: ${theme('banner.desc')};`
Original file line number	Diff line number	Diff line change
@@ -34,6 +34,7 @@ export const NumberTitle = styled.div`
`34`	`34`	`animation: ${animate.pulseRule};`
`35`	`35`	`}`
`36`	`36`	${cs.media.mobile`font-size: 0.9rem`};
	`37`	+ ${cs.media.tablet`font-size: 0.9rem`};
`37`	`38`	`
`38`	`39`	export const NumberItem = styled.div`
`39`	`40`	`font-size: 1.5rem;`
@@ -47,6 +48,7 @@ export const NumberItem = styled.div`
`47`	`48`	`}`
`48`	`49`
`49`	`50`	${cs.media.mobile`font-size: 1rem`};
	`51`	+ ${cs.media.tablet`font-size: 1rem`};
`50`	`52`	`
`51`	`53`
`52`	`54`	export const NumberLoading = styled(Img)`
@@ -69,4 +71,10 @@ export const NumberDivider = styled.div`
`69`	`71`	`margin-right: 2px;`
`70`	`72`	`height: 50%;`
`71`	`73`	`};
	`74`	`+`
	`75`	+ ${cs.media.tablet`
	`76`	`+ margin-left: 2px;`
	`77`	`+ margin-right: 2px;`
	`78`	`+ height: 50%;`
	`79`	+ `};
`72`	`80`	`
Original file line number	Diff line number	Diff line change
@@ -12,7 +12,7 @@ const Wrapper = styled.div`
`12`	`12`	`margin-left: ${({ sidebarPin }) => (sidebarPin ? '180px' : '0')};`
`13`	`13`	`transition: all 0.2s;`
`14`	`14`	`overflow-x: ${({ sidebarPin }) => (sidebarPin ? 'hidden' : '')};`
`15`		- ${cs.media.mobile`padding-left: 0`};
	`15`	+ ${cs.media.tablet`padding-left: 0`};
`16`	`16`	`
`17`	`17`	`/* overflow-x: hidden; */`
`18`	`18`