[explore v2] add scrollbar to control panel container (#1284)

* add scroll bars to control panel container * make query and save-btns block elements * don't use react component, use custom styles * move style to stylesheet
apache · Oct 7, 2016 · 382b8e8 · 382b8e8
1 parent 0a3121c
commit 382b8e8
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 19 deletions.
diff --git a/caravel/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx b/caravel/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx
@@ -14,8 +14,12 @@ const defaultProps = {
 function ControlPanelsContainer(props) {
   return (
     <Panel>
-      {DefaultControls}
-      {VIZ_CONTROL_MAPPING[props.vizType]}
+      <div className="scrollbar-container">
+        <div className="scrollbar-content">
+          {DefaultControls}
+          {VIZ_CONTROL_MAPPING[props.vizType]}
+        </div>
+      </div>
     </Panel>
   );
 }

diff --git a/caravel/assets/javascripts/explorev2/components/ExploreViewContainer.jsx b/caravel/assets/javascripts/explorev2/components/ExploreViewContainer.jsx
@@ -31,16 +31,16 @@ export default class ExploreViewContainer extends React.Component {
           overflow: 'hidden',
         }}
       >
-        <div className="row table-body">
-          <div className="table-cell col-sm-4">
+        <div className="row">
+          <div className="col-sm-4">
             <QueryAndSaveButtons
               canAdd="True"
               onQuery={() => {}}
             />
-            <br /><br />
+            <br />
             <ControlPanelsContainer />
           </div>
-          <div className="table-cell col-sm-8">
+          <div className="col-sm-8">
             <ChartContainer
               viz={this.props.data.viz}
               height={this.state.height}

diff --git a/caravel/assets/javascripts/explorev2/components/QueryAndSaveButtons.jsx b/caravel/assets/javascripts/explorev2/components/QueryAndSaveButtons.jsx
@@ -7,23 +7,22 @@ const propTypes = {
 };
 
 export default function QueryAndSaveBtns({ canAdd, onQuery }) {
-  const saveClasses = classnames('btn btn-default btn-sm', {
+  const saveClasses = classnames('btn btn-default btn-block btn-sm', {
     'disabled disabledButton': canAdd !== 'True',
   });
 
   return (
-    <div className="btn-group query-and-save">
-      <button type="button" className="btn btn-primary btn-sm" onClick={onQuery}>
+    <div className="btn-group btn-group-justified query-and-save">
+      <a className="btn btn-primary btn-block btn-sm" onClick={onQuery}>
         <i className="fa fa-bolt"></i> Query
-      </button>
-      <button
-        type="button"
+      </a>
+      <a
         className={saveClasses}
         data-target="#save_modal"
         data-toggle="modal"
       >
         <i className="fa fa-plus-circle"></i> Save as
-      </button>
+      </a>
     </div>
   );
 }

diff --git a/caravel/assets/stylesheets/exploreV2/exploreV2.css b/caravel/assets/stylesheets/exploreV2/exploreV2.css
@@ -1,8 +1,17 @@
-.table-body {
-  display: table;
+.scrollbar-container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
 }
 
-.table-cell {
-  float: none;
-  display: table-cell;
+.scrollbar-content {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  overflow: scroll;
+  margin-right: 0px;
+  margin-bottom: 100px;
 }
diff --git a/caravel/templates/caravel/explorev2.html b/caravel/templates/caravel/explorev2.html
@@ -1,7 +1,7 @@
 {% extends "caravel/basic.html" %}
-<link rel="stylesheet" type="text/css" href="/static/assets/stylesheets/exploreV2/exploreV2.css" />
 
 {% block body %}
+  <link rel="stylesheet" type="text/css" href="/static/assets/stylesheets/explorev2/explorev2.css">
   <div
     id="js-explore-view-container"
     data-bootstrap="{{ bootstrap_data }}"