feat(ui): add card layout for mobile home page

nervosnetwork · Jun 6, 2019 · 4ff341b · 4ff341b
1 parent bd66baf
commit 4ff341b
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 48 deletions.
diff --git a/web/src/components/Card/BlockCard.tsx b/web/src/components/Card/BlockCard.tsx
@@ -1,61 +1,70 @@
 import React from 'react'
 import styled from 'styled-components'
+import { Link } from 'react-router-dom'
+import { Block } from '../../http/response/Block'
+import { startEndEllipsis } from '../../utils/string'
+import { parseSimpleDate } from '../../utils/date'
+import { shannonToCkb } from '../../utils/util'
 
 const CardPanel = styled.div`
-  width: 335px;
+  width: 88%;
   height: 180px;
   background-color: white;
-  padding: 20px;
+  padding: 10px 20px 20px 20px;
   border: 0px solid white;
   border-radius: 3px;
   box-shadow: 2px 2px 6px #eaeaea;
   display: flex;
+  margin-bottom: 10px;
+  margin-left: 6%;
   flex-direction: column;
 `
 
 const CardItemPanel = styled.div`
   display: flex;
+  margin-top: 10px;
 
-  :nth-child(1) {
-    color: black;
+  > div {
+    color: #606060;
     font-size: 14px;
+    margin-right: 8px;
   }
 
-  :nth-child(2) {
+  .card__value {
     color: ${(props: { highLight: boolean }) => (props.highLight ? '#3CC68A' : '#888888')};
     font-size: 14px;
   }
 `
 
-const CardItem = ({ name, value, highLight = false }: { name: string; value: string; highLight?: boolean }) => {
+const CardItem = ({
+  name,
+  value,
+  to,
+  highLight = false,
+}: {
+  name: string
+  value: string
+  to: string
+  highLight?: boolean
+}) => {
   return (
     <CardItemPanel highLight={highLight}>
       <div>{name}</div>
-      <div>{value}</div>
+      <Link to={to}>
+        <div className="card__value">{value}</div>
+      </Link>
     </CardItemPanel>
   )
 }
 
-const BlockCard = ({
-  height,
-  transactions,
-  blockReward,
-  miner,
-  time,
-}: {
-  height: string
-  transactions: string
-  blockReward: string
-  miner: string
-  time: string
-}) => {
+const BlockCard = ({ block }: { block: Block }) => {
   return (
     <CardPanel>
-      <CardItem name={height} value={height} highLight />
-      <CardItem name={transactions} value={transactions} />
-      <CardItem name={blockReward} value={blockReward} />
-      <CardItem name={miner} value={miner} />
-      <CardItem name={time} value={time} />
+      <CardItem name="Height :" value={`${block.number}`} to={`${block.number}`} highLight />
+      <CardItem name="Transactions :" value={`${block.transactions_count}`} to={`${block.number}`} />
+      <CardItem name="Block Reward (CKB) :" value={`${shannonToCkb(block.reward)}`} to={`${block.reward}`} />
+      <CardItem name="Miner :" value={startEndEllipsis(block.miner_hash, 12)} to={`${block.number}`} highLight />
+      <CardItem name="Time :" value={parseSimpleDate(block.timestamp)} to={`${block.number}`} />
     </CardPanel>
   )
 }

diff --git a/web/src/pages/Home/index.tsx b/web/src/pages/Home/index.tsx
@@ -17,6 +17,7 @@ import {
   TableContentItem,
   TableMinerContentItem,
 } from '../../components/Table'
+import BlockCard from '../../components/Card/BlockCard'
 import BlockHeightIcon from '../../asserts/block_height.png'
 import TransactionIcon from '../../asserts/transactions.png'
 import BlockRewardIcon from '../../asserts/block_reward_white.png'
@@ -169,30 +170,43 @@ export default () => {
           })}
       </HomeHeaderPanel>
       <BlockPanel className="container" width={window.innerWidth}>
-        <ContentTable>
-          <TableTitleRow>
-            <TableTitleItem image={BlockHeightIcon} title="Height" />
-            <TableTitleItem image={TransactionIcon} title="Transactions" />
-            <TableTitleItem image={BlockRewardIcon} title="Block Reward (CKB)" />
-            <TableTitleItem image={MinerIcon} title="Miner" />
-            <TableTitleItem image={TimestampIcon} title="Time" />
-          </TableTitleRow>
-          {blocksWrappers &&
-            blocksWrappers.map((block: any, index: number) => {
-              const key = index
-              return (
-                block && (
-                  <TableContentRow key={key}>
-                    <TableContentItem content={block.attributes.number} to={`/block/${block.attributes.number}`} />
-                    <TableContentItem content={block.attributes.transactions_count} />
-                    <TableContentItem content={`${shannonToCkb(block.attributes.reward)}`} />
-                    <TableMinerContentItem content={block.attributes.miner_hash} />
-                    <TableContentItem content={parseSimpleDate(block.attributes.timestamp)} />
-                  </TableContentRow>
+        {window.innerWidth > 700 ? (
+          <ContentTable>
+            <TableTitleRow>
+              <TableTitleItem image={BlockHeightIcon} title="Height" />
+              <TableTitleItem image={TransactionIcon} title="Transactions" />
+              <TableTitleItem image={BlockRewardIcon} title="Block Reward (CKB)" />
+              <TableTitleItem image={MinerIcon} title="Miner" />
+              <TableTitleItem image={TimestampIcon} title="Time" />
+            </TableTitleRow>
+            {blocksWrappers &&
+              blocksWrappers.map((block: any, index: number) => {
+                const key = index
+                return (
+                  block && (
+                    <TableContentRow key={key}>
+                      <TableContentItem content={block.attributes.number} to={`/block/${block.attributes.number}`} />
+                      <TableContentItem content={block.attributes.transactions_count} />
+                      <TableContentItem content={`${shannonToCkb(block.attributes.reward)}`} />
+                      <TableMinerContentItem content={block.attributes.miner_hash} />
+                      <TableContentItem content={parseSimpleDate(block.attributes.timestamp)} />
+                    </TableContentRow>
+                  )
                 )
-              )
-            })}
-        </ContentTable>
+              })}
+          </ContentTable>
+        ) : (
+          <ContentTable>
+            <div className="block__green__background" />
+            <div className="block__panel">
+              {blocksWrappers &&
+                blocksWrappers.map((block: any, index: number) => {
+                  const key = index
+                  return block && <BlockCard key={key} block={block.attributes} />
+                })}
+            </div>
+          </ContentTable>
+        )}
         <TableMorePanel>
           <div>
             <img src={MoreLeftIcon} alt="more left" />

diff --git a/web/src/pages/Home/styled.tsx b/web/src/pages/Home/styled.tsx
@@ -166,6 +166,19 @@ export const ContentTable = styled.div`
   margin: 0 auto;
   width: 100%;
   overflow-x: auto;
+  z-index: 2;
+
+  .block__green__background {
+    height: 61px;
+    width: 100%;
+    background-color: #3cc68a;
+    z-index: 1;
+  }
+
+  .block__panel {
+    margin-top: -41px;
+    z-index: 2;
+  }
 `
 
 export const TableMorePanel = styled.div`