From e31c2982888fcfef5383124db4ca606644a29044 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Thu, 10 Aug 2017 20:52:22 -0700 Subject: [PATCH] Implement widescreen layout for tx list --- ui/app/components/tx-list.js | 58 +++++++++---------- ui/app/css/itcss/components/index.scss | 1 + .../itcss/components/transaction-list.scss | 51 +++++++++++++--- ui/app/css/itcss/settings/variables.scss | 2 +- 4 files changed, 72 insertions(+), 40 deletions(-) diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js index 57d7af4f1..e9f0c1cef 100644 --- a/ui/app/components/tx-list.js +++ b/ui/app/components/tx-list.js @@ -21,7 +21,7 @@ function TxList () { Component.call(this) } -const contentDivider = h('div', { +const contentDivider = h('div.tx-list-content-divider', { style: { marginLeft: '1.3em', marginRight: '1.3em', @@ -38,13 +38,10 @@ TxList.prototype.render = function () { return h('div.flex-column.tx-list-container', {}, [ - h('div.flex-row.tx-list', { - style: { - margin: '1.8em 0.9em 0.8em 0.9em', - }, + h('div.flex-row.tx-list-header', { + style: {}, }, [ - // tx-view-tab.js h('div.flex-row', { }, [ @@ -53,6 +50,7 @@ TxList.prototype.render = function () { }, 'TRANSACTIONS'), ]), + ]), contentDivider, @@ -61,41 +59,41 @@ TxList.prototype.render = function () { contentDivider, - // this.renderTransactionListItem(), + this.renderTransactionListItem(), - // contentDivider, + contentDivider, - // this.renderTransactionListItem(), + this.renderTransactionListItem(), - // contentDivider, + contentDivider, - // this.renderTransactionListItem(), + this.renderTransactionListItem(), - // contentDivider, + contentDivider, - // this.renderTransactionListItem(), + this.renderTransactionListItem(), - // contentDivider, + contentDivider, - // this.renderTransactionListItem(), + this.renderTransactionListItem(), - // contentDivider, + contentDivider, - // this.renderTransactionListItem(), + this.renderTransactionListItem(), - // contentDivider, + contentDivider, - // this.renderTransactionListItem(), + this.renderTransactionListItem(), - // contentDivider, + contentDivider, - // this.renderTransactionListItem(), + this.renderTransactionListItem(), - // contentDivider, + contentDivider, - // this.renderTransactionListItem(), + this.renderTransactionListItem(), - // contentDivider, + contentDivider, ]) } @@ -106,7 +104,7 @@ TxList.prototype.renderTransactionListItem = function () { dateString: 'Jul 01, 2017', address: '0x82df11beb942beeed58d466fcb0f0791365c7684', transactionStatus: 'Confirmed', - transactionAmount: '3' + transactionAmount: '+ 3 ETH' } const { address, transactionStatus, transactionAmount, dateString } = props @@ -132,14 +130,14 @@ TxList.prototype.renderTransactionListItem = function () { }, [ h(Identicon, { address, - diameter: 18, + diameter: 24, }) ]), h('div.tx-list-account-wrapper', { style: {} }, [ - h('span', {}, [ + h('span.tx-list-account', {}, [ '0x82df11be...7684', //address ]), ]), @@ -156,12 +154,12 @@ TxList.prototype.renderTransactionListItem = function () { style: {} }, [ - h('span', {}, [ + h('span.tx-list-value', {}, [ transactionAmount, ]), - h('span', {}, [ - '300 USD', + h('span.tx-list-fiat-value', {}, [ + '+ $300 USD', ]), ]), diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index 2385866c1..e5ba0babf 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -6,4 +6,5 @@ @import './modal.scss'; @import './newui-sections.scss'; @import './hero-balance.scss'; +@import './transaction-list.scss'; @import './sections.scss'; diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index ff482fd4a..700214e30 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -1,44 +1,77 @@ +.tx-list-header { + margin: 1.8em 1.3em 1.8em 1.3em; +} + +.tx-list-content-divider { + margin: 0.1em 1.3em 0.1em 1.3em; + height: 1px; + background: rgb(231, 231, 231); + flex: 0 0 1px; +} + +.tx-list-container { + height: 87.5%; + overflow-y: scroll; +} + .tx-list-item-wrapper { + flex: 0 0 70px; align-items: stretch; - justify-content: 'flex-start', - margin: '0.6em 1.3em 0.6em 1.3em', - overflow: 'scroll', + justify-content: flex-start; + margin: 0em 1.3em 0em 1.3em; } .tx-list-date-wrapper { flex-grow: 1; flex-shrink: 1; - flex-basis: 'auto'; - margin-top: '0.3em'; + flex-basis: auto; + margin-top: 6px; } .tx-list-content-wrapper { - alignItems: 'stretch'; + align-items: stretch; + margin-bottom: 8px; } .tx-list-date { color: $dusty-gray; - font-size: 8px; + font-size: 14px; } .tx-list-identicon-wrapper { + align-self: center; flex: 1 1 auto; + margin-left: 3px; } .tx-list-account-wrapper { flex: 3 3 auto; - font-size: 12px; + align-self: center; +} + +.tx-list-account { + font-size: 16px; } .tx-list-status-wrapper { + align-self: center; flex: 5 5 auto; } .tx-list-status { color: $dusty-gray; - font-size: 12px; + font-size: 16px; } .tx-list-details-wrapper { + align-self: center; flex: 2 2 auto; +} + +.tx-list-value { + font-size: 16px; +} + +.tx-list-fiat-value { + font-size: 12px; } \ No newline at end of file diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index 6d2befb4c..3c9cd7fb7 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -12,7 +12,7 @@ $alabaster: #F7F7F7; $shark: #22232C; $wild-sand: #F6F6F6; $white: #FFFFFF; -$dusty-gray: #9B9B9B +$dusty-gray: #9B9B9B; // Z Indicies - Planned $dropdown-z: 30;