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

Make mobile view flush with header

Browse Source
This commit is contained in:
sdtsui 2017-08-02 22:23:48 -07:00
parent ff7ba83a6c
commit b523faba13
2 changed files with 30 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
ui/app/css/index.css
View File

@ -721,6 +721,17 @@ div.message-container > div:first-child {
transform: scale(1.1);
}
.main-container {
width: 100%;
z-index: 18;
box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
font-family: DIN OT;
display: flex;
flex-wrap: wrap;
align-items: stretch;
overflow-y: scroll;
}
@media screen and (min-width: 576px) {
.lap-visible {
display: flex;
@ -730,6 +741,18 @@ div.message-container > div:first-child {
display: none;
}
.main-container {
// position: absolute;
// margin-top: 35px;
// z-index: 18;
// box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
// font-family: DIN OT;
// display: flex;
// flex-wrap: wrap;
// align-items: stretch;
// overflow-y: scroll;
// width: 100%;
}
}
@media screen and (max-width: 575px) {
@ -741,4 +764,8 @@ div.message-container > div:first-child {
display: flex;
}
}
.main-container {
position: absolute;
margin-top: 35px;
}
}

21
ui/app/main-container.js
View File

@ -15,12 +15,6 @@ function MainContainer () {
MainContainer.prototype.render = function () {
// 1. Fixing Mobile View: flush container
// media query for mobile view:
// position: absolute;
// margin-top: 35px;
// width: 100%;
//
// 2. Fix responsive sizing - smaller
// https://puu.sh/x0gDA/5ff3b734eb.png
//
@ -33,19 +27,8 @@ MainContainer.prototype.render = function () {
//
// 4. style all buttons as <button>s: accessibility + mobile focus
return h('div', {
style: {
position: 'absolute',
marginTop: '35px',
width: '98%',
zIndex: 20,
boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
fontFamily: 'DIN OT',
display: 'flex',
flexWrap: 'wrap',
alignItems: 'stretch',
overflowY: 'scroll',
}
return h('div.main-container', {
style: {}
}, [h(AccountAndTransactionDetails, {}, [])])
}