Merge pull request #847 from nthgness/alexFront

#828 - Fix wallet page on all devices, all media and mobile
swaponline · Nov 7, 2018 · 8db4c7c · 8db4c7c
2 parents 6d5292f + 368f583
commit 8db4c7c
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 29 deletions.
diff --git a/shared/components/tables/Table/Table.js b/shared/components/tables/Table/Table.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import { isMobile } from 'react-device-detect'
 
 import CSSModules from 'react-css-modules'
 import styles from './Table.scss'
@@ -75,7 +76,7 @@ export default class Table extends React.Component {
     const { sticky } = this.state
     return (
       <table styleName={sticky ? 'table table-fixed' : 'table'} className={className} ref={(table) => this.linkOnTable = table}>
-        <thead ref={(thead) => this.linkOnTableHead = thead}>
+        <thead ref={(thead) => this.linkOnTableHead = thead} styleName={isMobile ? 'mobileThead' : ''}>
           <tr>
             {
               titles.filter(title => !!title).map((title, index) => (

diff --git a/shared/components/tables/Table/Table.scss b/shared/components/tables/Table/Table.scss
@@ -261,9 +261,43 @@
 }
 
 
+table.wallet {
+  tr {
+    display: table-row;
+  }
+}
 
 @include media-tablet {
 
+  table {
+    overflow-x: auto;
+  }
+
+  table.wallet {
+    td:nth-child(1) {
+      width: 5%;
+    }
+    td:nth-child(2) {
+      width: 12%;
+    }
+    td:nth-child(3) {
+      width: 18%;
+    }
+    th:last-child {
+      padding-left: 15px;
+    }
+    tr {
+      display: table-row;
+    }
+  }
+  th:nth-child(4) {
+    display: none;
+  }
+  .mobileThead {
+    th:nth-child(4) {
+      display: block;
+    }
+  }
 }
 
 @include media-mobile {
@@ -290,13 +324,11 @@
   }
 
   table.wallet {
-    td {
+    td:nth-child(5) {
       div {
-        button {
-          width: 40px;
-          padding: 1px 7px 2px 7px;
-          margin: 0 1px;
-        }
+        position: absolute;
+        bottom: 0;
+        left: 20px;
       }
     }
 
@@ -335,6 +367,9 @@
         }
       }
     }
+    tr {
+      display: block;
+    }
   }
   .wallet {
     margin-bottom: 15px;
@@ -381,12 +416,6 @@
       padding: 0 10px;
       align-items: center;
     }
-    td:nth-child(1) {
-      // a {
-      //   position: absolute;
-      //   top: 10px;
-      // }
-    }
     tbody {
       width: 100%;
       display: block;

diff --git a/shared/pages/Wallet/Row/Row.js b/shared/pages/Wallet/Row/Row.js
@@ -222,7 +222,7 @@ export default class Row extends Component {
               </div>
             )
           }
-          {isMobile && <span styleName="mobileName">{fullName}</span>}
+          <span styleName="mobileName">{fullName}</span>
         </td>
 
         { !isMobile && (
@@ -231,7 +231,7 @@ export default class Row extends Component {
               text={address}
               onCopy={this.handleCopyAddress}
             >
-              <td>
+              <td styleName="yourAddress">
                 {
                   !contractAddress ? (
                     <div styleName="notContractAddress">

diff --git a/shared/pages/Wallet/Row/Row.scss b/shared/pages/Wallet/Row/Row.scss
@@ -116,7 +116,35 @@
   max-width: 124px;
 }
 
+.mobileName {
+  color: #000;
+  display: block;
+  margin-left: -10px;
+  display: none;
+}
+
+.hidden {
+  display: none;
+}
+
+.visible {
+  display: none;
+}
+
+
+@include media-tablet { 
+  .yourAddress {
+    display: none;
+  }
+}
+
 @include media-mobile { 
+  .mobileName {
+    display: block;
+  }
+  .yourAddress {
+    display: none;
+  }
   .table_balance-cell {
     min-width: 75px;
   }
@@ -182,19 +210,6 @@
   }
 }
 
-.mobileName {
-  color: #000;
-  display: block;
-  margin-left: -10px;
-}
-
-.hidden {
-  display: none;
-}
-
-.visible {
-  display: none;
-}
 
 
 

diff --git a/shared/pages/Wallet/Wallet.js b/shared/pages/Wallet/Wallet.js
@@ -95,7 +95,7 @@ export default class Wallet extends Component {
     const showSaveKeysModal = !zeroBalance && !keysSaved && !testNetSkip // non-zero balance and no keys saved
 
     return (
-      <section>
+      <section styleName={isMobile ? 'sectionWalletMobile' : 'sectionWallet'}>
         { showSaveKeysModal && <SaveKeysModal /> }
         <PageHeadline>
           <SubTitle>

diff --git a/shared/pages/Wallet/Wallet.scss b/shared/pages/Wallet/Wallet.scss
@@ -1,3 +1,14 @@
 .coinsActionsBlock {
   margin: 25px 0px;
 }
+.sectionWalletMobile {
+	margin-top: -88px;
+}
+.sectionWallet {
+	margin-top: 88px;
+}
+@include media-mobile { 
+	.sectionWalletMobile {
+		margin-top: 0px;
+	}
+}