1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 18:00:18 +01:00

Finalize sidebar dimensions

This commit is contained in:
sdtsui 2017-08-02 23:14:53 -07:00
parent 01788376d5
commit c7ac20ff65
3 changed files with 33 additions and 31 deletions

View File

@ -143,39 +143,15 @@ App.prototype.renderSidebar = function() {
// content
this.props.sidebarOpen ? h(WalletView, {
responsiveDisplayClassname: '.sidebar',
style: {
zIndex: 26,
position: 'fixed',
top: '6%',
left: '0px',
right: '0px',
bottom: '0px',
opacity: '1',
visibility: 'visible',
willChange: 'transform',
overflowY: 'auto',
boxShadow: 'rgba(0, 0, 0, 0.15) 2px 2px 4px',
width: '85%',
height: '100%',
},
style: {},
}) : undefined,
]),
// overlay
// TODO: add onClick for overlay to close sidebar
this.props.sidebarOpen ? h('div', {
style: {
zIndex: 25,
position: 'fixed',
top: '6%',
left: '0px',
right: '0px',
bottom: '0px',
opacity: '1',
visibility: 'visible',
backgroundColor: 'rgba(0, 0, 0, 0.3)',
}
this.props.sidebarOpen ? h('div.sidebar-overlay', {
style: {}
}, []) : undefined,
])
}

View File

@ -732,6 +732,36 @@ div.message-container > div:first-child {
overflow-y: scroll;
}
.sidebar {
flex: 1 0 230px;
background: rgb(250, 250, 250);
z-index: 26;
position: fixed;
top: 35px;
left: 0px;
right: 0px;
bottom: 0px;
opacity: 1;
visibility: visible;
will-change: transform;
overflow-y: auto;
box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 4px;
width: 85%;
height: 100%;
}
.sidebar-overlay {
z-index: 25;
position: fixed;
top: 35px;
left: 0px;
right: 0px;
bottom: 0px;
opacity: 1;
visibility: visible;
background-color: rgba(0, 0, 0, 0.3);
}
@media screen and (min-width: 576px) {
.lap-visible {
display: flex;

View File

@ -14,10 +14,6 @@ function MainContainer () {
}
MainContainer.prototype.render = function () {
// 2. Fix responsive sizing - smaller
// https://puu.sh/x0gDA/5ff3b734eb.png
//
// 3. summarize:
// switch statement goes inside MainContainer,
// or a method in renderPrimary