feat(ui): adapt args multi parameters layout for mobile

nervosnetwork · Jun 11, 2019 · 9fedbf6 · 9fedbf6
1 parent ce5f9b4
commit 9fedbf6
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 deletions.
diff --git a/web/src/pages/Address/index.tsx b/web/src/pages/Address/index.tsx
@@ -21,6 +21,7 @@ import {
   AddressCommonRowPanel,
   AddressTransactionsPagition,
   ScriptLabelItemPanel,
+  ScriptOtherArgs,
 } from './styled'
 import CopyIcon from '../../asserts/copy.png'
 import BalanceIcon from '../../asserts/address_balance.png'
@@ -62,11 +63,11 @@ const AddressOverview = ({ value }: { value: string }) => {
   return <AddressOverviewPanel>{value}</AddressOverviewPanel>
 }
 
-const ScriptLabelItem = ({ name, value }: { name: string; value: string }) => {
+const ScriptLabelItem = ({ name, value, noIcon = false }: { name: string; value: string; noIcon?: boolean }) => {
   return (
     <ScriptLabelItemPanel>
-      <img src={ItemPointIcon} alt="item point" />
-      <div>{`${name} :`}</div>
+      {!noIcon && <img src={ItemPointIcon} alt="item point" />}
+      <div>{name}</div>
       <code>{value}</code>
     </ScriptLabelItemPanel>
   )
@@ -81,15 +82,17 @@ const AddressScriptLabel = ({ image, label, script }: { image: string; label: st
       </AddressScriptLabelPanel>
       <AddressScriptContentPanel>
         <AddressScriptContent>
-          <ScriptLabelItem name="Code Hash" value={script.code_hash} />
+          <ScriptLabelItem name="Code Hash :" value={script.code_hash} />
           {script.args.length === 1 ? (
-            <ScriptLabelItem name="Args" value={script.args[0]} />
+            <ScriptLabelItem name="Args :" value={script.args[0]} />
           ) : (
             script.args.map((arg: string, index: number) => {
               return index === 0 ? (
-                <ScriptLabelItem name="Args: #" value={`${index} ${arg}`} />
+                <ScriptLabelItem name="Args: " value={`#${index}: ${arg}`} />
               ) : (
-                <code className="script__args__others">{`#${index} ${arg}`}</code>
+                <ScriptOtherArgs>
+                  <ScriptLabelItem name="" value={`#${index}: ${arg}`} noIcon />
+                </ScriptOtherArgs>
               )
             })
           )}

diff --git a/web/src/pages/Address/styled.tsx b/web/src/pages/Address/styled.tsx
@@ -225,16 +225,25 @@ export const ScriptLabelItemPanel = styled.div`
   > div {
     margin-left: 8px;
     color: #888888;
-    white-space: normal;
-    word-wrap: break-word;
   }
 
   > code {
-    width: 100%;
     margin-left: 8px;
     color: #adadad;
     white-space: normal;
     word-wrap: break-word;
+
+    @media (max-width: 700px) {
+      width: 100%;
+    }
+  }
+`
+
+export const ScriptOtherArgs = styled.div`
+  margin-left: 52px;
+
+  @media (max-width: 700px) {
+    margin-left: 0px;
   }
 `