Isolate container component, add refactor notes

2 files changed, 57 insertions, 19 deletions

diff --git a/ui/app/account-and-transaction-details.js b/ui/app/account-and-transaction-details.js
new file mode 100644
index 000000000..9386b2314
--- /dev/null
+++ b/ui/app/account-and-transaction-details.js
@@ -0,0 +1,39 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+// Main Views
+const TxView = require('./components/tx-view')
+const WalletView = require('./components/wallet-view')
+
+module.exports = AccountAndTransactionDetails
+
+inherits(AccountAndTransactionDetails, Component)
+function AccountAndTransactionDetails () {
+  Component.call(this)
+}
+
+AccountAndTransactionDetails.prototype.render = function () {
+  console.log('atdR')
+  return h('div', {
+    style: {
+      display: 'flex',
+      flex: '1 0 auto',
+    },
+  }, [
+    // wallet
+    h(WalletView, {
+      style: {
+      },
+      responsiveDisplayClassname: '.lap-visible',
+    }, [
+    ]),
+
+    // transaction
+    h(TxView, {
+      style: {
+      }
+    }, [
+    ]),
+  ])
+}
+
diff --git a/ui/app/main-container.js b/ui/app/main-container.js
index 62a8bdb7b..5194c2343 100644
--- a/ui/app/main-container.js
+++ b/ui/app/main-container.js
@@ -4,6 +4,7 @@ const inherits = require('util').inherits
 const TxView = require('./components/tx-view')
 const WalletView = require('./components/wallet-view')
 const SlideoutMenu = require('react-burger-menu').slide
+const AccountAndTransactionDetails = require('./account-and-transaction-details')
 
 module.exports = MainContainer
 
@@ -14,6 +15,22 @@ function MainContainer () {
 
 MainContainer.prototype.render = function () {
 
+  // 1. Fixing Mobile View: flush container
+  //   media query for mobile view:
+  //   position: absolute;
+  //   margin-top: 35px;
+  //   width: 100%;
+  // 
+  // 2. Fix responsive sizing - smaller
+  //    https://puu.sh/x0gDA/5ff3b734eb.png
+  // 
+  // 3. summarize:
+  //  switch statement goes inside MainContainer,
+  //  or a method in renderPrimary
+  //    - pass resulting h() to MainContainer
+  //  - error checking in separate func
+  //  - router in separate func
+
   return h('div', {
     style: {
       position: 'absolute',
@@ -27,24 +44,6 @@ MainContainer.prototype.render = function () {
       alignItems: 'stretch',
       overflowY: 'scroll',
     }
-  }, [
-
-    h(WalletView, {
-      style: {
-      },
-      responsiveDisplayClassname: '.lap-visible',
-    }, [
-    ]),
-
-    h(TxView, {
-      style: {
-        // flexGrow: 2
-        // width: '66.66%',
-        // height: '82vh',
-        // background: '#FFFFFF',
-      }
-    }, [
-    ]),
-  ])
+  }, [h(AccountAndTransactionDetails, {}, [])])
 }