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:
parent
01788376d5
commit
c7ac20ff65
@ -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,
|
||||
])
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user