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

Finalize sidebar dimensions

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
ui/app/app.js
View File

@ -143,39 +143,15 @@ App.prototype.renderSidebar = function() {
// content // content
this.props.sidebarOpen ? h(WalletView, { this.props.sidebarOpen ? h(WalletView, {
responsiveDisplayClassname: '.sidebar', responsiveDisplayClassname: '.sidebar',
style: { 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%',
},
}) : undefined, }) : undefined,
]), ]),
// overlay // overlay
// TODO: add onClick for overlay to close sidebar // TODO: add onClick for overlay to close sidebar
this.props.sidebarOpen ? h('div', { this.props.sidebarOpen ? h('div.sidebar-overlay', {
style: { style: {}
zIndex: 25,
position: 'fixed',
top: '6%',
left: '0px',
right: '0px',
bottom: '0px',
opacity: '1',
visibility: 'visible',
backgroundColor: 'rgba(0, 0, 0, 0.3)',
}
}, []) : undefined, }, []) : undefined,
]) ])
} }

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

@ -732,6 +732,36 @@ div.message-container > div:first-child {
overflow-y: scroll; 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) { @media screen and (min-width: 576px) {
.lap-visible { .lap-visible {
display: flex; display: flex;

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

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