feat(ui): display multi lines of root hash on mobile

nervosnetwork · Jun 12, 2019 · 14c3446 · 14c3446
1 parent ae42507
commit 14c3446
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 8 deletions.
diff --git a/web/src/pages/BlockDetail/index.tsx b/web/src/pages/BlockDetail/index.tsx
@@ -9,6 +9,7 @@ import {
   BlockDetailTitlePanel,
   BlockOverviewPanel,
   BlockCommonContent,
+  BlockMultiLinesPanel,
   BlockPreviousNextPanel,
   BlockHightLabel,
   BlockTransactionsPanel,
@@ -53,8 +54,8 @@ const BlockDetailTitle = ({ hash }: { hash: string }) => {
   const appContext = useContext(AppContext)
   return (
     <BlockDetailTitlePanel>
-      <div className="address__title">Block</div>
-      <div className="address__content">
+      <div className="block__title">Block</div>
+      <div className="block__content">
         <code id="block__hash">{hash}</code>
         <div
           role="button"
@@ -126,6 +127,15 @@ const BlockPreviousNext = ({
   )
 }
 
+const MultiLinesItem = ({ label, value }: { label: string; value: string }) => {
+  return (
+    <BlockMultiLinesPanel>
+      <div>{label}</div>
+      <code>{value}</code>
+    </BlockMultiLinesPanel>
+  )
+}
+
 interface BlockItem {
   image: any
   label: string
@@ -321,7 +331,7 @@ export default (props: React.PropsWithoutRef<RouteComponentProps<{ hash: string
     {
       image: ProofIcon,
       label: 'Proof:',
-      value: `${blockData.proof}`,
+      value: `${window.innerWidth > 700 ? blockData.proof : startEndEllipsis(blockData.proof, 9)}`,
     },
   ]
 
@@ -361,7 +371,7 @@ export default (props: React.PropsWithoutRef<RouteComponentProps<{ hash: string
                     <SimpleLabel
                       image={BlockRightItems[0].image}
                       label={BlockRightItems[0].label}
-                      value={startEndEllipsis(BlockRightItems[0].value)}
+                      value={startEndEllipsis(BlockRightItems[0].value, window.innerWidth > 700 ? 8 : 5)}
                       style={{
                         fontFamily: 'source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace',
                       }}
@@ -386,15 +396,18 @@ export default (props: React.PropsWithoutRef<RouteComponentProps<{ hash: string
           <div>
             {BlockRootInfoItems.map(item => {
               return (
-                item && (
+                item &&
+                (window.innerWidth > 700 ? (
                   <SimpleLabel
                     key={item.label}
                     image={item.image}
                     label={item.label}
                     value={item.value}
                     lengthNoLimit
                   />
-                )
+                ) : (
+                  <MultiLinesItem key={item.label} label={item.label} value={item.value} />
+                ))
               )
             })}
           </div>

diff --git a/web/src/pages/BlockDetail/styled.tsx b/web/src/pages/BlockDetail/styled.tsx
@@ -12,7 +12,7 @@ export const BlockDetailTitlePanel = styled.div`
   flex-direction: column;
   align-items: center;
 
-  .address__title {
+  .block__title {
     color: rgb(20, 20, 20);
     font-size: 40pt;
     text-align: center;
@@ -22,7 +22,7 @@ export const BlockDetailTitlePanel = styled.div`
     }
   }
 
-  .address__content {
+  .block__content {
     display: flex;
     flex-direction: row;
     justify-content: center;
@@ -122,6 +122,35 @@ export const BlockCommonContent = styled.div`
   }
 `
 
+export const BlockMultiLinesPanel = styled.div`
+  margin-left: 10px;
+
+  > div {
+    font-size: 16px;
+    color: #606060;
+  }
+
+  > code {
+    font-size: 15px;
+    color: #adadad;
+    height: 40px;
+    width: 85%;
+    white-space: normal;
+    word-wrap: break-word;
+    margin-top: 2px;
+  }
+
+  @media (max-width: 320px) {
+    > div {
+      font-size: 14px;
+    }
+
+    > code {
+      font-size: 13px;
+    }
+  }
+`
+
 export const BlockPreviousNextPanel = styled.div`
   display: flex;
   justify-content: center;