m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-22 17:33:23 +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: {
margin: '1.8em 1.3em 0.8em 1.3em',
flex: '1 0 auto',
// flex: '1 0 520px',
}
}, [
h('div.flex-column.flex-center', {
style: {
width: '100%',
}
}, [
h('div', {}, 'ETH LOGO'),
h('div', {}, '1001.124 ETH'),
h('div', {}, '$300,000 USD'),
]),
// laptop: flex-row
// mobile: flex-column
h('div.flex-row.flex-center', {
style: {
width: '100%',
}
}, [
h('button.btn-clear', {
textAlign: 'center'
}, 'BUY'),
h('button.btn-clear', {
textAlign: 'center'
}, 'SEND'),
// laptop: 50px 50px
// mobile: 100px 100px
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', {

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
}
button.btn-clear {
width: 100px;
height: 50px;
background: white;
border: 1px solid;
font-size: .7em;
}
// No longer used in flat design, remove when modal buttons done
@ -795,6 +793,14 @@ div.message-container > div:first-child {
width: 85%;
height: 90vh;
}
button.btn-clear {
width: 75px;
height: 32px;
font-size: .6em;
background: white;
border: 1px solid;
}
}
@media screen and (min-width: 769px) {
@ -828,4 +834,12 @@ div.message-container > div:first-child {
width: 100%;
height: 100%
}
button.btn-clear {
width: 100px;
height: 50px;
font-size: .7em;
background: white;
border: 1px solid;
}
}