fix(ui): adjust address script content width for mobile

nervosnetwork · May 28, 2019 · 0b70c6e · 0b70c6e
1 parent 268d354
commit 0b70c6e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 17 deletions.
diff --git a/web/src/components/Label/index.tsx b/web/src/components/Label/index.tsx
@@ -23,7 +23,7 @@ const LabelPanel = styled.div`
   > div {
     color: rgb(136, 136, 136);
     font-size: 16px;
-    max-width: 320px;
+    max-width: 360px;
     overflow: hidden;
     text-overflow: ellipsis;
   }
@@ -51,7 +51,7 @@ const LabelPanel = styled.div`
     > div {
       font-size: 15px;
       color: rgb(136, 136, 136);
-      max-width: 240px;
+      max-width: 360px;
       overflow: hidden;
       text-overflow: ellipsis;
     }

diff --git a/web/src/pages/Address/index.tsx b/web/src/pages/Address/index.tsx
@@ -13,6 +13,7 @@ import {
   AddressContentPanel,
   AddressTitlePanel,
   AddressOverviewPanel,
+  AddressScriptContentPanel,
   AddressCommonContent,
   AddressScriptContent,
   AddressScriptLabelPanel,
@@ -66,20 +67,22 @@ const AddressScriptLabel = ({ image, label, script }: { image: string; label: st
         <img src={image} alt="script" />
         <span>{label}</span>
       </AddressScriptLabelPanel>
-      <AddressScriptContent>
-        <div>{`Code hash: ${script.code_hash}`}</div>
-        {script.args.length === 1 ? (
-          <div>{`Args: ${script.args[0]}`}</div>
-        ) : (
-          script.args.map((arg: string, index: number) => {
-            return index === 0 ? (
-              <div>{`Args: #${index} ${arg}`}</div>
-            ) : (
-              <div className="script__args__others">{`#${index} ${arg}`}</div>
-            )
-          })
-        )}
-      </AddressScriptContent>
+      <AddressScriptContentPanel>
+        <AddressScriptContent>
+          <div>{`Code hash: ${script.code_hash}`}</div>
+          {script.args.length === 1 ? (
+            <div>{`Args: ${script.args[0]}`}</div>
+          ) : (
+            script.args.map((arg: string, index: number) => {
+              return index === 0 ? (
+                <div>{`Args: #${index} ${arg}`}</div>
+              ) : (
+                <div className="script__args__others">{`#${index} ${arg}`}</div>
+              )
+            })
+          )}
+        </AddressScriptContent>
+      </AddressScriptContentPanel>
     </div>
   )
 }

diff --git a/web/src/pages/Address/styled.tsx b/web/src/pages/Address/styled.tsx
@@ -188,6 +188,13 @@ export const AddressScriptLabelPanel = styled.div`
   }
 `
 
+export const AddressScriptContentPanel = styled.div`
+  @media (max-width: 700px) {
+    padding-right: 15px;
+    width: 650px;
+  }
+`
+
 export const AddressScriptContent = styled.div`
   border: none;
   width: 100%;
@@ -206,7 +213,7 @@ export const AddressScriptContent = styled.div`
     font-size: 15px;
     padding: 18px 30px 18px 15px;
     margin: 0px 15px;
-    width: 700px;
+    max-width: 600px;
   }
 
   > div {