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

Add UI tweaks, including separation of overflow logic for mobile (full-height) vs laptop (tx-view-only)

Browse Source
This commit is contained in:
sdtsui 2017-08-10 22:47:56 -07:00
parent 7a664a7f72
commit 58b61eb1fc
3 changed files with 45 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ui/app/components/tx-list.js
View File

@ -22,12 +22,7 @@ function TxList () {
} }
const contentDivider = h('div.tx-list-content-divider', { const contentDivider = h('div.tx-list-content-divider', {
style: { style: {},
marginLeft: '1.3em',
marginRight: '1.3em',
height:'1px',
background:'#E7E7E7', // TODO: make custom color
},
}) })
TxList.prototype.render = function () { TxList.prototype.render = function () {
@ -38,11 +33,11 @@ TxList.prototype.render = function () {
return h('div.flex-column.tx-list-container', {}, [ return h('div.flex-column.tx-list-container', {}, [
h('div.flex-row.tx-list-header', { h('div.flex-row.tx-list-header-wrapper', {
style: {}, style: {},
}, [ }, [
h('div.flex-row', { h('div.flex-row.tx-list-header', {
}, [ }, [
h('div', { h('div', {

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

@ -5,7 +5,9 @@
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
margin: 0.3em 0.9em 0.8em 0.9em; margin: 0.3em 0.9em 0em 0.9em;
height: 80vh;
max-height: 225px;
} }
@media screen and (min-width: $break-large) { @media screen and (min-width: $break-large) {

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

@ -1,23 +1,54 @@
.tx-list-header { .tx-list-container {
margin: 1.8em 1.3em 1.8em 1.3em; height: 87.5%;
@media screen and (min-width: $break-large) {
overflow-y: scroll;
}
}
@media screen and (max-width: $break-small) {
.tx-list-header-wrapper {
margin-top: 1em;
margin-bottom: 1.4em;
justify-content: center;
}
.tx-list-header {
align-self: center;
font-size: 12px;
color: $dusty-gray;
}
}
@media screen and (min-width: $break-large) {
.tx-list-header-wrapper {
flex: 0 0 55px;
}
.tx-list-header {
font-size: 16px;
margin: 1.8em 1.3em 1.8em 1.3em;
}
} }
.tx-list-content-divider { .tx-list-content-divider {
margin: 0.1em 1.3em 0.1em 1.3em;
height: 1px; height: 1px;
background: rgb(231, 231, 231); background: rgb(231, 231, 231);
flex: 0 0 1px; flex: 0 0 1px;
}
.tx-list-container { @media screen and (max-width: $break-small) {
height: 87.5%; margin: 0.1em 0em 0.1em 0em;
overflow-y: scroll; }
@media screen and (min-width: $break-large) {
margin: 0.1em 1.3em 0.1em 1.3em;
}
} }
.tx-list-item-wrapper { .tx-list-item-wrapper {
flex: 0 0 70px; flex: 0 0 70px;
align-items: stretch; align-items: stretch;
justify-content: flex-start; justify-content: flex-start;
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
margin: 0em 1.3em 0.95em 1.3em; margin: 0em 1.3em 0.95em 1.3em;
} }
@ -31,6 +62,7 @@
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
flex-basis: auto; flex-basis: auto;
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
margin-top: 6px; margin-top: 6px;
margin-bottom: 20px; margin-bottom: 20px;