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

Wallet view supports screen sizes between 576px and 667px (#3193)

Browse Source
This commit is contained in:
Dan J Miller 2018-02-05 23:01:21 -03:30 committed by Alexander Tseung
parent e4895df953
commit d4da419c5b
5 changed files with 70 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ui/app/account-and-transaction-details.js
View File

@ -13,12 +13,7 @@ function AccountAndTransactionDetails () {
}
AccountAndTransactionDetails.prototype.render = function () {
return h('div', {
style: {
display: 'flex',
flex: '1 0 auto',
},
}, [
return h('div.account-and-transaction-details', [
// wallet
h(WalletView, {
style: {

5
ui/app/components/token-cell.js
View File

@ -111,6 +111,8 @@ TokenCell.prototype.render = function () {
network,
}),
h('div.token-list-item__balance-ellipsis', [
h('h.token-list-item__balance-wrapper', null, [
h('h3.token-list-item__token-balance', `${string || 0} ${symbol}`),
@ -126,6 +128,9 @@ TokenCell.prototype.render = function () {
},
}),
]),
tokenMenuOpen && h(TokenMenuDropdown, {
onClose: () => this.setState({ tokenMenuOpen: false }),
token: { symbol, address },

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

@ -71,6 +71,22 @@
font-size: 105%;
}
}
@media #{$sub-mid-size-breakpoint-range} {
margin-left: .4em;
margin-right: .4em;
justify-content: flex-start;
align-items: flex-start;
.token-amount {
font-size: 1rem;
}
.fiat-amount {
margin-top: .25%;
font-size: 1rem;
}
}
}
.hero-balance-buttons {
@ -91,4 +107,12 @@
.hero-balance-button {
width: 6rem;
@media #{$sub-mid-size-breakpoint-range} {
padding: 0.4rem;
width: 4rem;
display: flex;
flex: 1;
justify-content: center;
}
}

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

@ -1,3 +1,6 @@
$sub-mid-size-breakpoint: 667px;
$sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$sub-mid-size-breakpoint})";
/*
NewUI Container Elements
*/
@ -20,6 +23,12 @@ $wallet-view-bg: $alabaster;
display: none;
}
//Account and transaction details
.account-and-transaction-details {
display: flex;
flex: 1 0 auto;
}
// tx view
.tx-view {
@ -60,6 +69,10 @@ $wallet-view-bg: $alabaster;
overflow-x: hidden;
}
@media #{$sub-mid-size-breakpoint-range} {
min-width: 160px;
}
.wallet-view-account-details {
flex: 0 0 auto;
}

21
ui/app/css/itcss/components/token-list.scss
View File

@ -15,7 +15,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
font-size: 1.5rem;
@media #{$wallet-balance-breakpoint-range} {
font-size: 105%;
font-size: 95%;
}
}
@ -41,17 +41,22 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
&__identicon {
margin-right: 15px;
border: '1px solid #dedede';
min-width: 50px;
@media #{$wallet-balance-breakpoint-range} {
margin-right: 4%;
}
}
&__balance-ellipsis {
display: flex;
align-items: center;
justify-content: space-around;
}
&__ellipsis {
// position: absolute;
// top: 20px;
// right: 24px;
line-height: 45px;
margin-left: 5px;
}
&__balance-wrapper {
@ -61,7 +66,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
.token-menu-dropdown {
height: 55px;
width: 191px;
width: 80%;
border-radius: 4px;
background-color: rgba(0, 0, 0, .82);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5);
@ -70,6 +75,10 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
right: 25px;
z-index: 2000;
@media #{$wallet-balance-breakpoint-range} {
right: 18px;
}
&__close-area {
position: fixed;
top: 0;
@ -81,7 +90,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
}
&__container {
padding: 16px 34px 32px;
padding: 16px;
z-index: 2200;
position: relative;
}