refactor(media-query): improve empty thread

Author: mydearxym

components/EmptyThread/index.js

@@ -16,6 +16,7 @@ import {
   Icon,
   Text,
   Title,
+  DetailText,
   DescWrapper,
   IssueLink,
 } from './styles'
@@ -26,7 +27,7 @@ const debug = makeDebugger('c:EmptyThread:index')
 const DescContent = ({ community, thread }) => (
   <React.Fragment>
     <div>
-      如果你有 {community} 相关的优质
+      如果你有 {community} 相关的<DetailText>优质</DetailText>
       {Trans(thread)}
       ，欢迎一起分享 / 交流
     </div>
@@ -39,7 +40,7 @@ const DescContent = ({ community, thread }) => (
       >
         提交issue
       </IssueLink>
-      ，以便于开发者排查修复。
+      <DetailText>，以便于开发者排查修复。</DetailText>
     </div>
   </React.Fragment>
 )
@@ -51,7 +52,9 @@ const EmptyThread = ({ community, thread }) => (
     </Icon>
     <Text>
       <Title>
-        {community} 社区内未找到符合相关条件的
+        {community} 社区内未找到<DetailText>符合</DetailText>相关<DetailText>
+          条件的
+        </DetailText>
         {`${Trans(thread)}信息`}
       </Title>
       <DescWrapper>

components/EmptyThread/styles/index.js

@@ -35,7 +35,13 @@ export const Title = styled.div`
   font-size: 1.3rem;
   ${cs.media.tablet`
     font-size: 1.1rem;
-`};
+  `};
+`
+
+export const DetailText = styled.span`
+  ${cs.media.mobile`
+    display: none;
+  `};
 `
 
 export const DescWrapper = styled.div`

containers/BodyLayout/styles/index.js

@@ -42,4 +42,5 @@ export const ExpanderIcon = styled(Img)`
   fill ${theme('banner.desc')};
   width: 18px;
   height: 20px;
+  display: block;
 `