m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 18:00:18 +01:00
Code

Add rough layout for flat layout tx details, add notes for breakpoints

Browse Source
This commit is contained in:
sdtsui 2017-08-03 01:17:27 -07:00
parent 267d12646c
commit 0171918407
2 changed files with 59 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
ui/app/components/tx-view.js
View File

@ -56,42 +56,61 @@ TxView.prototype.render = function () {
}, [ }, [
]), ]),
h('div.flex-row.flex-wrap', { h('div.flex-row', {
style: { style: {
margin: '1.8em 1.3em 0.8em 1.3em', margin: '1.8em 1.3em 0.8em 1.3em',
flex: '1 0 auto', // flex: '1 0 520px',
} }
}, [ }, [
h('div.flex-column.flex-center', { // laptop: flex-row
style: { // mobile: flex-column
width: '100%',
}
}, [
h('div', {}, 'ETH LOGO'),
h('div', {}, '1001.124 ETH'),
h('div', {}, '$300,000 USD'),
]),
h('div.flex-row.flex-center', { h('div.flex-row.flex-center', {
style: { style: {
width: '100%',
} }
}, [ }, [
h('button.btn-clear', {
textAlign: 'center'
}, 'BUY'),
h('button.btn-clear', { // laptop: 50px 50px
textAlign: 'center' // mobile: 100px 100px
}, 'SEND'), h('img', {
src: '../images/eth_logo.svg',
width: '50px',
height: '50px',
style: {
borderRadius: '25px',
border: '1px solid',
}
}),
// laptop: 5vw?
// phone: 50vw?
h('div.flex-column.flex-center', {
style: {}
}, [
h('div', {}, '1001.124 ETH'),
h('div', {}, '$300,000 USD'),
]),
// laptop: 10vw?
// phone: 75vw?
h('div.flex-row.flex-center', {
style: {
width: '100%',
}
}, [
h('button.btn-clear', {
textAlign: 'center'
}, 'BUY'),
h('button.btn-clear', {
textAlign: 'center'
}, 'SEND'),
]),
]), ]),
]), ]),
h('div.flex-row', { h('div.flex-row', {

20
ui/app/css/index.css
View File

@ -89,12 +89,10 @@ input:focus, textarea:focus {
background-color: #02C9B1; // TODO: reusable color in colors.css background-color: #02C9B1; // TODO: reusable color in colors.css
} }
button.btn-clear { button.btn-clear {
width: 100px;
height: 50px;
background: white; background: white;
border: 1px solid; border: 1px solid;
font-size: .7em;
} }
// No longer used in flat design, remove when modal buttons done // No longer used in flat design, remove when modal buttons done
@ -795,6 +793,14 @@ div.message-container > div:first-child {
width: 85%; width: 85%;
height: 90vh; height: 90vh;
} }
button.btn-clear {
width: 75px;
height: 32px;
font-size: .6em;
background: white;
border: 1px solid;
}
} }
@media screen and (min-width: 769px) { @media screen and (min-width: 769px) {
@ -828,4 +834,12 @@ div.message-container > div:first-child {
width: 100%; width: 100%;
height: 100% height: 100%
} }
button.btn-clear {
width: 100px;
height: 50px;
font-size: .7em;
background: white;
border: 1px solid;
}
} }