Implement mobile-friendly responsive layout with flex wrap
This commit is contained in:
parent
9cc461a6c2
commit
a7fc512650
|
@ -73,7 +73,9 @@ App.prototype.render = function () {
|
||||||
h('.flex-column.full-height', {
|
h('.flex-column.full-height', {
|
||||||
style: {
|
style: {
|
||||||
// Windows was showing a vertical scroll bar:
|
// Windows was showing a vertical scroll bar:
|
||||||
overflow: 'hidden',
|
overflowX: 'hidden',
|
||||||
|
// TODO: check with dev who committed L75, see if this still happens, and whether auto is enough
|
||||||
|
// overflowY: 'auto',
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
},
|
},
|
||||||
|
|
|
@ -31,7 +31,11 @@ function TxView () {
|
||||||
TxView.prototype.render = function () {
|
TxView.prototype.render = function () {
|
||||||
return h('div.tx-view.flex-column', {
|
return h('div.tx-view.flex-column', {
|
||||||
style: {
|
style: {
|
||||||
width: '66.666%',
|
// width: '66.666%',
|
||||||
|
flexGrow: 2,
|
||||||
|
flexShrink: 0,
|
||||||
|
flexBasis: '230px', // .666*345
|
||||||
|
// flexBasis: '400px',
|
||||||
height: '82vh',
|
height: '82vh',
|
||||||
background: '#FFFFFF',
|
background: '#FFFFFF',
|
||||||
}
|
}
|
||||||
|
|
|
@ -28,7 +28,10 @@ WalletView.prototype.render = function () {
|
||||||
|
|
||||||
return h('div.wallet-view.flex-column', {
|
return h('div.wallet-view.flex-column', {
|
||||||
style: {
|
style: {
|
||||||
width: '33.333%',
|
// width: '33.333%',
|
||||||
|
flexGrow: 1,
|
||||||
|
flexShrink: 0,
|
||||||
|
flexBasis: '230px', // .333*345
|
||||||
height: '82vh',
|
height: '82vh',
|
||||||
background: '#FAFAFA', // TODO: add to reusable colors
|
background: '#FAFAFA', // TODO: add to reusable colors
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,7 +13,7 @@ function MainContainer () {
|
||||||
|
|
||||||
MainContainer.prototype.render = function () {
|
MainContainer.prototype.render = function () {
|
||||||
|
|
||||||
return h('div.flex-row', {
|
return h('div', {
|
||||||
style: {
|
style: {
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
marginTop: '6vh',
|
marginTop: '6vh',
|
||||||
|
@ -22,6 +22,9 @@ MainContainer.prototype.render = function () {
|
||||||
boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
|
boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
|
||||||
fontFamily: 'DIN OT',
|
fontFamily: 'DIN OT',
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
alignItems: 'stretch',
|
||||||
|
overflowY: 'scroll',
|
||||||
}
|
}
|
||||||
}, [
|
}, [
|
||||||
h(WalletView, {
|
h(WalletView, {
|
||||||
|
|
Loading…
Reference in New Issue