m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Make main account detail view more responsive

Browse Source
This commit is contained in:
Dan Finlay 2017-07-20 16:17:01 -07:00
parent 6553c9c64b
commit 36c997a55e
6 changed files with 32 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
responsive-ui/app/account-detail.js
View File

@ -51,7 +51,12 @@ AccountDetailScreen.prototype.render = function () {
return ( return (
h('.account-detail-section', [ h('.account-detail-section', {
style: {
height: '100%',
maxWidth: '850px',
},
}, [
// identicon, label, balance, etc // identicon, label, balance, etc
h('.account-data-subsection', { h('.account-data-subsection', {
@ -236,7 +241,9 @@ AccountDetailScreen.prototype.subview = function () {
AccountDetailScreen.prototype.tabSections = function () { AccountDetailScreen.prototype.tabSections = function () {
const { currentAccountTab } = this.props const { currentAccountTab } = this.props
return h('section.tabSection', [ return h('section.tabSection', {
style: { height: '100%' },
}, [
h(TabBar, { h(TabBar, {
tabs: [ tabs: [

2
responsive-ui/app/actions.js
View File

@ -1,4 +1,4 @@
const getBuyEthUrl = require('../../../app/scripts/lib/buy-eth-url') const getBuyEthUrl = require('../../app/scripts/lib/buy-eth-url')
var actions = { var actions = {
_setBackgroundConnection: _setBackgroundConnection, _setBackgroundConnection: _setBackgroundConnection,

15
responsive-ui/app/app.js
View File

@ -77,6 +77,8 @@ App.prototype.render = function () {
// Windows was showing a vertical scroll bar: // Windows was showing a vertical scroll bar:
overflow: 'hidden', overflow: 'hidden',
position: 'relative', position: 'relative',
height: '100%',
alignItems: 'center',
}, },
}, [ }, [
@ -91,7 +93,12 @@ App.prototype.render = function () {
}), }),
// panel content // panel content
h('.app-primary.flex-grow' + (transForward ? '.from-right' : '.from-left'), [ h('.app-primary.flex-grow' + (transForward ? '.from-right' : '.from-left'), {
style: {
height: '100%',
maxWidth: '850px',
},
}, [
h(ReactCSSTransitionGroup, { h(ReactCSSTransitionGroup, {
className: 'css-transition-group', className: 'css-transition-group',
transitionName: 'main', transitionName: 'main',
@ -116,7 +123,11 @@ App.prototype.renderAppBar = function () {
return ( return (
h('div', [ h('div', {
style: {
width: '100%'
},
}, [
h('.app-header.flex-row.flex-space-between', { h('.app-header.flex-row.flex-space-between', {
style: { style: {

2
responsive-ui/app/components/pending-tx.js
View File

@ -6,7 +6,7 @@ const clone = require('clone')
const ethUtil = require('ethereumjs-util') const ethUtil = require('ethereumjs-util')
const BN = ethUtil.BN const BN = ethUtil.BN
const hexToBn = require('../../../../app/scripts/lib/hex-to-bn') const hexToBn = require('../../../app/scripts/lib/hex-to-bn')
const util = require('../util') const util = require('../util')
const MiniAccountPanel = require('./mini-account-panel') const MiniAccountPanel = require('./mini-account-panel')
const Copyable = require('./copyable') const Copyable = require('./copyable')

8
responsive-ui/app/components/transaction-list.js
View File

@ -24,7 +24,11 @@ TransactionList.prototype.render = function () {
return ( return (
h('section.transaction-list', [ h('section.transaction-list', {
style: {
height: '100%',
},
}, [
h('style', ` h('style', `
.transaction-list .transaction-list-item:not(:last-of-type) { .transaction-list .transaction-list-item:not(:last-of-type) {
@ -39,7 +43,7 @@ TransactionList.prototype.render = function () {
h('.tx-list', { h('.tx-list', {
style: { style: {
overflowY: 'auto', overflowY: 'auto',
height: '300px', height: '100%',
padding: '0 20px', padding: '0 20px',
textAlign: 'center', textAlign: 'center',
}, },

2
responsive-ui/app/css/index.css
View File

@ -27,6 +27,7 @@ html, body {
.css-transition-group { .css-transition-group {
flex: 1; flex: 1;
height: 100%;
} }
input:focus, textarea:focus { input:focus, textarea:focus {
@ -36,6 +37,7 @@ input:focus, textarea:focus {
#app-content { #app-content {
overflow-x: hidden; overflow-x: hidden;
min-width: 357px; min-width: 357px;
height: 100%;
} }
button, input[type="submit"] { button, input[type="submit"] {