Make Sqllab a one-page app -- body not scrollable (#1551)

* Make Sqllab a one-page app -- body not scrollable

* Add scroll-container and scroll-content in main.css
This commit is contained in:
vera-liu 2016-11-09 14:21:43 -08:00 committed by Maxime Beauchemin
parent 946e4b750a
commit d70a74479d
3 changed files with 92 additions and 74 deletions

View File

@ -227,7 +227,8 @@ class SqlEditor extends React.PureComponent {
</Col> </Col>
</Collapse> </Collapse>
<Col md={this.props.hideLeftBar ? 12 : 9}> <Col md={this.props.hideLeftBar ? 12 : 9}>
<div className="scrollbar"> <div className="scrollbar-container">
<div className="scrollbar-content">
<AceEditorWrapper <AceEditorWrapper
actions={this.props.actions} actions={this.props.actions}
onBlur={this.setQueryEditorSql.bind(this)} onBlur={this.setQueryEditorSql.bind(this)}
@ -244,6 +245,7 @@ class SqlEditor extends React.PureComponent {
actions={this.props.actions} actions={this.props.actions}
/> />
</div> </div>
</div>
</Col> </Col>
</Row> </Row>
</div> </div>

View File

@ -99,7 +99,8 @@ class SqlEditorLeftBar extends React.PureComponent {
} }
const shouldShowReset = window.location.search === '?reset=1'; const shouldShowReset = window.location.search === '?reset=1';
return ( return (
<div className="clearfix sql-toolbar scrollbar"> <div className="scrollbar-container">
<div className="clearfix sql-toolbar scrollbar-content">
{networkAlert} {networkAlert}
<div> <div>
<DatabaseSelect <DatabaseSelect
@ -156,6 +157,7 @@ class SqlEditorLeftBar extends React.PureComponent {
</Button> </Button>
} }
</div> </div>
</div>
); );
} }
} }

View File

@ -1,3 +1,6 @@
body {
overflow: hidden;
}
.inlineBlock { .inlineBlock {
display: inline-block; display: inline-block;
} }
@ -29,11 +32,22 @@
padding-bottom: 5px; padding-bottom: 5px;
} }
.scrollbar { .scrollbar-container {
position: relative; position: relative;
overflow: hidden;
width: 100%; width: 100%;
overflow-y: auto; height: 95%;
height: 100%; }
.scrollbar-content {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: scroll;
margin-right: 0px;
margin-bottom: 100px;
} }
.Workspace .btn-sm { .Workspace .btn-sm {