m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00
Code

various styling fix on mobile

Browse Source
This commit is contained in:
Chi Kei Chan 2017-10-19 14:08:52 -07:00
parent 376ae032fe
commit 0458643f10
7 changed files with 47 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/app/components/send/account-list-item.js
View File

@ -11,7 +11,7 @@ function AccountListItem () {
Component.call(this)
}
function mapStateToProps(state) {
function mapStateToProps (state) {
return {
conversionRate: conversionRateSelector(state),
currentCurrency: getCurrentCurrency(state),
@ -22,14 +22,14 @@ module.exports = connect(mapStateToProps)(AccountListItem)
AccountListItem.prototype.render = function () {
const {
account,
handleClick,
account,
handleClick,
icon = null,
conversionRate,
currentCurrency,
} = this.props
const { name, address, balance } = account
const { name, address, balance } = account || {}
return h('div.account-list-item', {
onClick: () => handleClick({ name, address, balance }),

2
ui/app/css/itcss/components/account-menu.scss
View File

@ -5,7 +5,7 @@
width: 310px;
@media screen and (max-width: 575px) {
right: calc((100vw - 100%) / 2);
right: calc(((100vw - 100%) / 2) + 8px);
}
@media screen and (min-width: 576px) {

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

@ -6,8 +6,9 @@
justify-content: flex-start;
align-items: center;
margin: .3em .9em 0;
height: 80vh;
max-height: 225px;
// height: 80vh;
// max-height: 225px;
flex: 0 0 auto;
}
@media screen and (min-width: $break-large) {
@ -26,6 +27,7 @@
@media screen and (max-width: $break-small) {
flex-direction: column;
flex: 0 0 auto;
}
@media screen and (min-width: $break-large) {
@ -78,7 +80,9 @@
@media screen and (max-width: $break-small) {
width: 100%;
height: 100px; // needed a round number to set the heights of the buttons inside
// height: 100px; // needed a round number to set the heights of the buttons inside
flex: 0 0 auto;
padding: 16px 0;
}
@media screen and (min-width: $break-large) {
@ -93,9 +97,9 @@
font-size: 12px;
@media screen and (max-width: $break-small) {
width: 23%;
height: 55%;
border-color: $black;
border-color: $curious-blue;
color: $curious-blue;
height: 36px;
}
@media screen and (min-width: $break-large) {

1
ui/app/css/itcss/components/menu.scss
View File

@ -12,6 +12,7 @@
align-items: center;
position: relative;
z-index: 200;
font-weight: 200;
@media screen and (max-width: 575px) {
padding: 14px;

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

@ -25,6 +25,17 @@ $wallet-view-bg: $wild-sand;
.tx-view {
flex: 63.5 0 66.5%;
background: $tx-view-bg;
// No title on mobile
@media screen and (max-width: 575px) {
.identicon-wrapper {
display: none;
}
.account-name {
display: none;
}
}
}
// wallet view and sidebar
@ -70,7 +81,7 @@ $wallet-view-bg: $wild-sand;
background: rgb(250, 250, 250);
z-index: $sidebar-z-index;
position: fixed;
// top: 41px;
top: 57px;
left: 0;
right: 0;
bottom: 0;
@ -80,7 +91,7 @@ $wallet-view-bg: $wild-sand;
overflow-y: auto;
box-shadow: rgba(0, 0, 0, .15) 2px 2px 4px;
width: 85%;
height: 100%;
height: calc(100% - 57px);
}
.sidebar-overlay {

4
ui/app/css/itcss/components/send.scss
View File

@ -525,8 +525,9 @@
@media screen and (max-width: $break-small) {
margin-top: 0px;
height: 407px;
height: 0;
overflow-y: auto;
flex: 1 1 auto;
}
}
@ -647,6 +648,7 @@
align-items: center;
border-top: 1px solid $alto;
background: $white;
padding: 0 12px;
}
&__next-btn,

17
ui/app/css/itcss/components/transaction-list.scss
View File

@ -19,12 +19,15 @@
// margin-top: 0.2em;
// margin-bottom: 0.6em;
justify-content: center;
flex: 0 0 auto;
}
.tx-list-header {
align-self: center;
font-size: 12px;
color: $dusty-gray;
font-family: Roboto;
text-transform: uppercase;
}
}
@ -66,7 +69,7 @@
flex-flow: column nowrap;
@media screen and (max-width: $break-small) {
padding: 0 1.3em;
padding: 0 1.3em .8em;
}
@media screen and (min-width: $break-large) {
@ -112,7 +115,7 @@
font-size: 12px;
.tx-list-status {
font-size: 12px !important;
font-size: 14px !important;
}
.tx-list-account {
@ -121,10 +124,12 @@
.tx-list-value {
font-size: 14px;
line-height: 18px;
}
.tx-list-fiat-value {
font-size: 12px;
line-height: 16px;
}
}
}
@ -152,6 +157,14 @@
justify-content: flex-start;
align-items: flex-start;
align-self: center;
.tx-list-account-wrapper {
height: 18px;
.tx-list-account {
line-height: 14px;
}
}
}
@media screen and (min-width: $break-large) {