[query-search] fix scrolling on query search and pagination styling (#2646)

* fix scrolling for query search, getHeight was returning NAN

* add styling for query search pagination

* remove console.log

* make pagination buttons match bootstrap theme small buttons
This commit is contained in:
Alanna Scott
2017-04-19 21:02:53 -07:00
committed by GitHub
parent 1cadfecd4b
commit dc364daffd
4 changed files with 60 additions and 14 deletions

View File

@@ -15,7 +15,7 @@ class App extends React.PureComponent {
super(props);
this.state = {
hash: window.location.hash,
contentHeight: this.getHeight(),
contentHeight: '0px',
};
}
componentDidMount() {
@@ -32,11 +32,16 @@ class App extends React.PureComponent {
this.setState({ hash: window.location.hash });
}
getHeight() {
const navHeight = 90;
const headerHeight = $('.nav-tabs').outerHeight() ?
$('.nav-tabs').outerHeight() : $('#search-header').outerHeight();
const warningHeight = $('#navbar-warning').outerHeight();
const alertHeight = $('#sqllab-alerts').outerHeight();
const warningEl = $('#navbar-warning');
const navTabsEl = $('.nav-tabs');
const searchHeaderEl = $('#search-header');
const alertEl = $('#sqllab-alerts');
const headerNavEl = $('header .navbar');
const navHeight = headerNavEl.outerHeight() + parseInt(headerNavEl.css('marginBottom'), 10);
const searchHeaderHeight = searchHeaderEl.outerHeight() + parseInt(searchHeaderEl.css('marginBottom'), 10);
const headerHeight = navTabsEl.outerHeight() ? navTabsEl.outerHeight() : searchHeaderHeight;
const warningHeight = warningEl.length > 0 ? warningEl.outerHeight() : 0;
const alertHeight = alertEl.length > 0 ? alertEl.outerHeight() : 0;
return `${window.innerHeight - navHeight - headerHeight - warningHeight - alertHeight}px`;
}
handleResize() {

View File

@@ -11,7 +11,7 @@ const $ = window.$ = require('jquery');
const propTypes = {
actions: React.PropTypes.object.isRequired,
height: React.PropTypes.integer,
height: React.PropTypes.number.isRequired,
};
class QuerySearch extends React.PureComponent {
@@ -192,11 +192,11 @@ class QuerySearch extends React.PureComponent {
(<img className="loading" alt="Loading..." src="/static/assets/images/loading.gif" />)
:
(
<div
style={{ height: this.props.height }}
className="scrollbar-container"
>
<div className="scrollbar-content">
<div className="scrollbar-container">
<div
className="scrollbar-content"
style={{ height: this.props.height }}
>
<QueryTable
columns={[
'state', 'db', 'user', 'time',