From 368f583287e7316b09879cc5c499330a5de63add Mon Sep 17 00:00:00 2001
From: nthgness <wu-rza@mail.ru>
Date: Wed, 7 Nov 2018 19:43:22 +0200
Subject: [PATCH] #828 - Fix wallet page on all devices, all media and mobile

---
 shared/components/tables/Table/Table.js   |  3 +-
 shared/components/tables/Table/Table.scss | 53 ++++++++++++++++++-----
 shared/pages/Wallet/Row/Row.js            |  4 +-
 shared/pages/Wallet/Row/Row.scss          | 41 ++++++++++++------
 shared/pages/Wallet/Wallet.js             |  2 +-
 shared/pages/Wallet/Wallet.scss           | 11 +++++
 6 files changed, 85 insertions(+), 29 deletions(-)

diff --git a/shared/components/tables/Table/Table.js b/shared/components/tables/Table/Table.js
index 98e5ede14b..4ba8579892 100644
--- 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
index e83ecdbea4..b323beda77 100644
--- 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
index 15fcce32b6..ae1b81c40b 100644
--- 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
index c334c13155..dd9f7b8c28 100644
--- 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
index 56cfe74a73..5c0c491d11 100644
--- 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
index 20d5ccdd21..0ac7301543 100644
--- 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;
+	}
+}
\ No newline at end of file