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

Normalize sidebar dimensions and adjust hero button responsiveness

Browse Source
This commit is contained in:
sdtsui 2017-08-06 16:37:41 -07:00
parent 802c29c986
commit c1b8517959
4 changed files with 61 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -45,9 +45,7 @@ TxView.prototype.render = function () {
return h('div.tx-view.flex-column', {
style: {
flexGrow: 2,
flexShrink: 0,
flexBasis: '230px',
flex: '62 0 62%',
background: '#FFFFFF',
}
}, [

4
ui/app/components/wallet-view.js
View File

@ -36,9 +36,7 @@ WalletView.prototype.render = function () {
return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), {
style: {
flexGrow: 1,
flexShrink: 0,
flexBasis: '230px', // .333*345
flex: '28 0 28%',
background: '#FAFAFA', // TODO: add to reusable colors
...style,
}

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

@ -7,31 +7,50 @@ $break-large: 576px;
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin: 0.3em 0.9em 0.8em;
margin: 0.3em 0.9em 0.8em 0.9em;
}
@media screen and (min-width: $break-large) {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin: 1.5em 0.9em 0.8em 0.9em;
}
.hero-balance-display {
@media screen and (max-width: $break-small) {
text-align: center;
}
@media screen and (min-width: $break-large) {
}
.token-amount {
font-size: 1.8em;
margin-top: 1em;
}
.fiat-amount {
font-size: 1.1em;
margin-top: 0.8em;
color: #A0A0A0;
// TODO: colors
}
@media screen and (max-width: $break-small) {
text-align: center;
.token-amount {
font-size: 1.8em;
margin-top: 1em;
}
.fiat-amount {
font-size: 1.1em;
margin-top: 0.8em;
}
}
@media screen and (min-width: $break-large) {
flex-grow: 3;
margin-left: 1.2vw;
.token-amount {
font-size: 2.2vw;
}
.fiat-amount {
font-size: 1.7vw;
margin-top: 0.3em;
}
}
}
.hero-balance-icon {
@ -41,12 +60,36 @@ $break-large: 576px;
}
.hero-balance-buttons {
button.btn-clear {
width: 81px;
height: 32px;
font-size: .7em;
background: white;
border: 1px solid;
@media screen and (max-width: $break-small) {
width: 100%;
margin-top: 1.3em;
}
@media screen and (min-width: $break-large) {
flex-grow: 2;
width: 5.8vw;
min-width: 75px;
height: 4.2vh;
min-height: 28px;
font-size: .7em;
}
}
@media screen and (max-width: $break-small) {
width: 100%;
margin-top: 1.3em;
}
@media screen and (min-width: $break-large) {
flex-grow: 2;
}
}

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

@ -57,14 +57,6 @@
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) {
@ -100,7 +92,7 @@
}
button.btn-clear {
width: 100px;
width: 93px;
height: 50px;
font-size: .7em;
background: white;