m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 19:26:13 +02:00
Code

Increase tap areas for menu buttons on mobile

Browse Source
This commit is contained in:
Alexander Tseung 2018-03-09 18:50:00 +01:00
parent ab1b39f554
commit a07550d2ab
5 changed files with 86 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -100,9 +100,10 @@ TxView.prototype.render = function () {
h('div.flex-row.phone-visible', {
style: {
margin: '1.5em 1.2em 0',
justifyContent: 'space-between',
alignItems: 'center',
flex: '0 0 auto',
margin: '10px',
},
}, [
@ -110,11 +111,10 @@ TxView.prototype.render = function () {
style: {
fontSize: '1.3em',
cursor: 'pointer',
padding: '10px',
},
onClick: () => {
this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar()
},
}, []),
onClick: () => this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar(),
}),
h('.identicon-wrapper.select-none', {
style: {

3
ui/app/css/itcss/components/hero-balance.scss
View File

@ -5,9 +5,6 @@
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin: .3em .9em 0;
// height: 80vh;
// max-height: 225px;
flex: 0 0 auto;
}

22
ui/app/css/itcss/components/newui-sections.scss
View File

@ -51,6 +51,7 @@ $wallet-view-bg: $alabaster;
cursor: pointer;
display: flex;
justify-content: center;
padding: 10px;
}
// wallet view and sidebar
@ -313,4 +314,23 @@ $wallet-view-bg: $alabaster;
@media screen and (min-width: 1281px) {
width: 62vw;
}
}
}
.unlock-screen-container {
z-index: $main-container-z-index;
font-family: Roboto;
display: flex;
justify-content: center;
align-items: center;
flex: 1 0 auto;
background: #f7f7f7;
width: 100%;
}
.unlock-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1 0 auto;
}

14
ui/app/main-container.js
View File

@ -32,19 +32,7 @@ MainContainer.prototype.render = function () {
return h(Settings, {key: 'config'})
default:
log.debug('rendering locked screen')
contents = {
component: UnlockScreen,
style: {
boxShadow: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: '#F7F7F7',
// must force 100%, because lock screen is full-width
width: '100%',
},
key: 'locked',
}
return h('.unlock-screen-container', {}, h(UnlockScreen, { key: 'locked' }))
}
}

129
ui/app/unlock.js
View File

@ -28,83 +28,72 @@ UnlockScreen.prototype.render = function () {
const state = this.props
const warning = state.warning
return (
h('.flex-column', {
style: {
width: 'inherit',
},
}, [
h('.unlock-screen.flex-column.flex-center.flex-grow', [
h('.unlock-screen', [
h(Mascot, {
animationEventEmitter: this.animationEventEmitter,
}),
h(Mascot, {
animationEventEmitter: this.animationEventEmitter,
}),
h('h1', {
style: {
fontSize: '1.4em',
textTransform: 'uppercase',
color: '#7F8082',
},
}, 'MetaMask'),
h('h1', {
style: {
fontSize: '1.4em',
textTransform: 'uppercase',
color: '#7F8082',
},
}, 'MetaMask'),
h('input.large-input', {
type: 'password',
id: 'password-box',
placeholder: 'enter password',
style: {
background: 'white',
},
onKeyPress: this.onKeyPress.bind(this),
onInput: this.inputChanged.bind(this),
}),
h('input.large-input', {
type: 'password',
id: 'password-box',
placeholder: 'enter password',
style: {
background: 'white',
},
onKeyPress: this.onKeyPress.bind(this),
onInput: this.inputChanged.bind(this),
}),
h('.error', {
style: {
display: warning ? 'block' : 'none',
padding: '0 20px',
textAlign: 'center',
},
}, warning),
h('.error', {
style: {
display: warning ? 'block' : 'none',
padding: '0 20px',
textAlign: 'center',
},
}, warning),
h('button.primary.cursor-pointer', {
onClick: this.onSubmit.bind(this),
style: {
margin: 10,
},
}, 'Log In'),
]),
h('button.primary.cursor-pointer', {
onClick: this.onSubmit.bind(this),
style: {
margin: 10,
},
}, 'Log In'),
h('.flex-row.flex-center.flex-grow', [
h('p.pointer', {
onClick: () => {
this.props.dispatch(actions.markPasswordForgotten())
if (environmentType() === 'popup') {
global.platform.openExtensionInBrowser()
}
},
style: {
fontSize: '0.8em',
color: 'rgb(247, 134, 28)',
textDecoration: 'underline',
},
}, 'Restore from seed phrase'),
]),
h('.flex-row.flex-center.flex-grow', [
h('p.pointer', {
onClick: () => {
this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
.then(() => this.props.dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)))
},
style: {
fontSize: '0.8em',
color: '#aeaeae',
textDecoration: 'underline',
marginTop: '32px',
},
}, 'Use classic interface'),
]),
h('p.pointer', {
onClick: () => {
this.props.dispatch(actions.markPasswordForgotten())
if (environmentType() === 'popup') {
global.platform.openExtensionInBrowser()
}
},
style: {
fontSize: '0.8em',
color: 'rgb(247, 134, 28)',
textDecoration: 'underline',
},
}, 'Restore from seed phrase'),
h('p.pointer', {
onClick: () => {
this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
.then(() => this.props.dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)))
},
style: {
fontSize: '0.8em',
color: '#aeaeae',
textDecoration: 'underline',
marginTop: '32px',
},
}, 'Use classic interface'),
])
)
}