mirror of https://github.com/apache/superset.git
[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:
parent
1cadfecd4b
commit
dc364daffd
|
@ -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() {
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -10,8 +10,9 @@ import { initJQueryAjaxCSRF } from '../modules/utils';
|
|||
import App from './components/App';
|
||||
import { appSetup } from '../common';
|
||||
|
||||
require('./main.css');
|
||||
require('../components/FilterableTable/FilterableTableStyles.css');
|
||||
import './main.css';
|
||||
import './reactable-pagination.css';
|
||||
import '../components/FilterableTable/FilterableTableStyles.css';
|
||||
|
||||
appSetup();
|
||||
initJQueryAjaxCSRF();
|
||||
|
|
|
@ -0,0 +1,40 @@
|
|||
.reactable-pagination td {
|
||||
padding: 15px 0 0 0!important;
|
||||
}
|
||||
.reactable-pagination a:focus {
|
||||
text-decoration: none;
|
||||
color: #555555;
|
||||
outline: 1;
|
||||
}
|
||||
.reactable-page-button,
|
||||
.reactable-next-page,
|
||||
.reactable-previous-page {
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #b3b3b3;
|
||||
color: #555555;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
margin-right: 5px;
|
||||
padding: 5px 10px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.reactable-current-page {
|
||||
border: 1px solid #b3b3b3;
|
||||
color: #555555;
|
||||
font-weight: bold;
|
||||
pointer-events: none;
|
||||
opacity: 0.65;
|
||||
}
|
||||
.reactable-page-button:hover,
|
||||
.reactable-next-page:hover,
|
||||
.reactable-previous-page:hover {
|
||||
background-color: #efefef;
|
||||
border-color: #949494;
|
||||
color: #555555;
|
||||
text-decoration: none;
|
||||
}
|
Loading…
Reference in New Issue