style(mobile): improve style & preview link

Author: mydearxym

components/CommunityStatesPad/styles/index.js

@@ -49,6 +49,8 @@ export const NumberItem = styled.div`
     animation: ${animate.pulseRule};
     cursor: ${({ readOnly }) => (readOnly ? '' : 'pointer')};
   }
+
+  ${cs.media.mobile`font-size: 1.2rem;`};
 `
 export const NumberDivider = styled.div`
   border: 1px solid;

components/PostItem/DigestView.js

@@ -18,6 +18,7 @@ import {
   SecondHalf,
   CommentsDiget,
   BodyDigest,
+  PublishLable,
   Extra,
   TagListWrapper,
 } from './styles'
@@ -62,9 +63,9 @@ const DigestView = ({ entry, cover, onPreview, onUserSelect }) => (
         <Extra>
           {entry.author.nickname}
           {entry.copyRight === 'original' ? (
-            <span>&nbsp;发布于:</span>
+            <PublishLable>&nbsp;发布于:</PublishLable>
           ) : (
-            <span>&nbsp;搬运于:</span>
+            <PublishLable>&nbsp;搬运于:</PublishLable>
           )}
           <TimeAgo datetime={entry.insertedAt} locale="zh_CN" /> ⁝ 浏览:{' '}
           {entry.views}

components/PostItem/styles/index.js

@@ -107,8 +107,8 @@ export const BodyDigest = styled.li`
   font-size: 0.85rem;
 
   ${cs.media.mobile`
-    ${cs.truncate('350px')};
-  `};
+    ${cs.truncate('250px')};
+`};
 `
 export const CommentWrapper = styled.div`
   ${cs.flex('align-center')};
@@ -126,3 +126,11 @@ export const CommentNum = styled.div`
   font-size: 0.9rem;
 `
 export const TagListWrapper = styled.div``
+
+export const PublishLable = styled.span`
+  display: inline;
+  ${cs.media.mobile`
+    display: none;
+    margin-left: 3px;
+  `};
+`

containers/CommunityBanner/styles/digest_view.js

@@ -22,7 +22,7 @@ export const BaseBannerContent = styled.div`
   margin-top: -2rem;
   ${cs.media.mobile`
     margin-left: 0;
-    margin-right: 0;
+    margin-right: 3%;
     padding-left: 3%;
     padding-right: 3%;
   `};
@@ -99,7 +99,7 @@ export const Desc = styled.div`
   @media (max-height: 800px) {
     font-size: 1rem;
   }
-  ${cs.truncate('250px')};
+  ${cs.truncate('180px')};
 `
 export const LogoHolder = styled(Img)`
   fill: ${theme('banner.desc')};

containers/Preview/logic.js

@@ -6,6 +6,8 @@ import {
   holdPage,
   unholdPage,
   dispatchEvent,
+  Global,
+  cs,
 } from 'utils'
 import SR71 from 'utils/async/sr71'
 
@@ -42,8 +44,21 @@ const DataResolver = [
     match: asyncRes(EVENT.PREVIEW_OPEN),
     action: res => {
       const payload = res[EVENT.PREVIEW_OPEN]
-      holdPage()
 
+      /*
+         debug('should open payload thread: ', payload.thread)
+         debug('should open payload id: ', payload.data.id)
+         debug('payload curCommunity: ', store.curCommunity.raw)
+       */
+      Global.innerWidth <= cs.mediaBreakPoints.mobile
+      if (Global.innerWidth <= cs.mediaBreakPoints.mobile) {
+        const { thread, data } = payload
+        const targetUrl = `/${store.curCommunity.raw}/${thread}/${data.id}`
+        Global.location.href = targetUrl
+        return false
+      }
+
+      holdPage()
       store.open(payload)
     },
   },

containers/Preview/store.js

@@ -89,6 +89,9 @@ const PreviewStore = t
     get root() {
       return getParent(self)
     },
+    get curCommunity() {
+      return stripMobx(self.root.viewing.community)
+    },
     get curTheme() {
       return self.root.theme.curTheme
     },
@@ -98,7 +101,6 @@ const PreviewStore = t
     get attUserData() {
       return stripMobx(self.attUser)
     },
-
     get modalVisible() {
       return self.visible && Global.innerWidth > cs.mediaBreakPoints.desktop
     },

containers/ThemeWrapper/GlobalStyle.js

@@ -2,6 +2,14 @@ import { createGlobalStyle } from 'styled-components'
 import { theme, cs } from 'utils'
 import normalize from './normalize'
 
+/*
+body {
+  ${cs.media.mobile`
+      position: fixed;
+  `};
+}
+*/
+
 const GlobalStyle = createGlobalStyle`
   ${normalize};
   html {