mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Add UI tweaks, including separation of overflow logic for mobile (full-height) vs laptop (tx-view-only)
This commit is contained in:
parent
7a664a7f72
commit
58b61eb1fc
@ -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', {
|
||||
|
@ -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) {
|
||||
|
@ -1,23 +1,54 @@
|
||||
.tx-list-header {
|
||||
.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;
|
||||
|
Loading…
Reference in New Issue
Block a user