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

Move Txs list item styles into classes

Browse Source
This commit is contained in:
sdtsui 2017-08-10 19:55:01 -07:00
parent d53780bcdc
commit f9432c5982
2 changed files with 61 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
ui/app/components/tx-list.js
View File

@ -111,69 +111,49 @@ TxList.prototype.renderTransactionListItem = function () {
const { address, transactionStatus, transactionAmount, dateString } = props
return h('div.flex-column', {
style: {
alignItems: 'stretch',
justifyContent: 'flex-start',
margin: '0.6em 1.3em 0.6em 1.3em',
overflow: 'none'
}
return h('div.flex-column.tx-list-item-wrapper', {
style: {}
}, [
h('div', {
style: {
flexGrow: 1,
flexShrink: 1,
flexBasis: 'auto',
marginTop: '0.3em',
}
h('div.tx-list-date-wrapper', {
style: {}
}, [
h('span', {}, [
h('span.tx-list-date', {}, [
dateString,
])
]),
h('div.flex-row', {
style: {
alignItems: 'stretch',
}
h('div.flex-row.tx-list-content-wrapper', {
style: {}
}, [
h('div', {
style: {
flexGrow: 1,
}
h('div.tx-list-identicon-wrapper', {
style: {}
}, [
h(Identicon, {
address,
diameter: 24,
diameter: 18,
})
]),
h('div', {
style: {
flexGrow: 3,
}
h('div.tx-list-account-wrapper', {
style: {}
}, [
h('span', {}, [
'0x82df11be...7684', //address
]),
]),
h('div', {
style: {
flexGrow: 5,
}
h('div.tx-list-status-wrapper', {
style: {}
}, [
h('span', {}, [
h('span.tx-list-status', {}, [
transactionStatus,
]),
]),
h('div.flex-column', {
style: {
flexGrow: 2,
}
h('div.flex-column.tx-list-details-wrapper', {
style: {}
}, [
h('span', {}, [

44
ui/app/css/itcss/components/transaction-list.scss Normal file
View File

@ -0,0 +1,44 @@
.tx-list-item-wrapper {
align-items: stretch;
justify-content: 'flex-start',
margin: '0.6em 1.3em 0.6em 1.3em',
overflow: 'scroll',
}
.tx-list-date-wrapper {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 'auto';
margin-top: '0.3em';
}
.tx-list-content-wrapper {
alignItems: 'stretch';
}
.tx-list-date {
color: $dusty-gray;
font-size: 8px;
}
.tx-list-identicon-wrapper {
flex: 1 1 auto;
}
.tx-list-account-wrapper {
flex: 3 3 auto;
font-size: 12px;
}
.tx-list-status-wrapper {
flex: 5 5 auto;
}
.tx-list-status {
color: $dusty-gray;
font-size: 12px;
}
.tx-list-details-wrapper {
flex: 2 2 auto;
}