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

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

@ -5,7 +5,9 @@
flex-direction: column;
justify-content: flex-start;
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) {

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

@ -1,23 +1,54 @@
.tx-list-header {
margin: 1.8em 1.3em 1.8em 1.3em;
.tx-list-container {
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 {
margin: 0.1em 1.3em 0.1em 1.3em;
height: 1px;
background: rgb(231, 231, 231);
flex: 0 0 1px;
}
.tx-list-container {
height: 87.5%;
overflow-y: scroll;
@media screen and (max-width: $break-small) {
margin: 0.1em 0em 0.1em 0em;
}
@media screen and (min-width: $break-large) {
margin: 0.1em 1.3em 0.1em 1.3em;
}
}
.tx-list-item-wrapper {
flex: 0 0 70px;
align-items: stretch;
justify-content: flex-start;
@media screen and (max-width: $break-small) {
margin: 0em 1.3em 0.95em 1.3em;
}
@ -31,6 +62,7 @@
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
@media screen and (max-width: $break-small) {
margin-top: 6px;
margin-bottom: 20px;