refactor(media-query): add action footer to mobile/tablet

Author: mydearxym

containers/Footer/MobilBottomInfo.js

@@ -4,9 +4,11 @@ import { GITHUB_WEB_ADDR, ISSUE_ADDR } from 'config'
 import DotDivider from 'components/DotDivider'
 
 import {
-  MainInfoWrapper,
+  SiteInfoWrapper,
+  LinkInfoWrapper,
   BannerWrapper,
   Item,
+  ItemBtn,
   Thanks,
   ThxTitle,
 } from './styles/mobile_bottom_info'
@@ -15,12 +17,30 @@ import { toggleBusBanner } from './logic'
 
 const MobileBottomInfo = () => (
   <React.Fragment>
-    <MainInfoWrapper>
-      <Item
-        href="https://coderplanets.com/home/post/1"
+    <LinkInfoWrapper>
+      <ItemBtn href="/communities" rel="noopener noreferrer" target="_blank">
+        所有社区
+      </ItemBtn>
+      <DotDivider radius="4px" />
+      <ItemBtn href="/communities" rel="noopener noreferrer" target="_blank">
+        我的关注
+      </ItemBtn>
+      <DotDivider radius="4px" />
+      <ItemBtn
+        href={`${GITHUB_WEB_ADDR}`}
         rel="noopener noreferrer"
         target="_blank"
       >
+        主题
+      </ItemBtn>
+      <DotDivider radius="4px" />
+      <ItemBtn href={`${ISSUE_ADDR}`} rel="noopener noreferrer" target="_blank">
+        打赏
+      </ItemBtn>
+    </LinkInfoWrapper>
+
+    <SiteInfoWrapper>
+      <Item href="home/post/1" rel="noopener noreferrer" target="_blank">
         关于本站
       </Item>
       <DotDivider />
@@ -35,7 +55,7 @@ const MobileBottomInfo = () => (
       <Item href={`${ISSUE_ADDR}`} rel="noopener noreferrer" target="_blank">
         反馈与建议
       </Item>
-    </MainInfoWrapper>
+    </SiteInfoWrapper>
     <BannerWrapper>
       <Thanks onClick={toggleBusBanner}>
         <ThxTitle>广告位： (求赞助)</ThxTitle>

containers/Footer/styles/mobile_bottom_info.js

@@ -2,25 +2,36 @@ import styled from 'styled-components'
 
 import { theme, cs } from 'utils'
 
-export const MainInfoWrapper = styled.div`
+const InfoSection = styled.div`
   ${cs.flex('align-both')};
-  height: 50px;
+  height: 45px;
   display: none;
   ${cs.media.tablet`display: flex;`};
 `
-
+export const LinkInfoWrapper = styled(InfoSection)``
+export const SiteInfoWrapper = styled(InfoSection)`
+  background-color: ${theme('footer.bottomBg')};
+`
 export const Item = styled.a`
   color: ${theme('footer.text')};
   font-size: 0.9rem;
   text-decoration: underline;
 `
-
+export const ItemBtn = styled.div`
+  color: ${theme('footer.text')};
+  font-size: 0.9rem;
+  border: 1px solid;
+  text-decoration: none;
+  border-color: ${theme('footer.text')};
+  border-radius: 5px;
+  padding: 0 4px;
+`
 export const BannerWrapper = styled.div`
   ${cs.flex('align-center')};
   justify-content: space-between;
   padding-left: 6%;
   padding-right: 6%;
-  background: ${theme('footer.bottomBg')};
+  background-color: ${theme('footer.bottomBg')};
   height: 80px;
   width: 100%;
   display: none;