Fix flicker in kepler.gl examples (uber-archive#64)

* Revert "disable demo window from mvoing around" This reverts commit e80d5b0. * fix the minimum height of the kepler demos
qiaoxin136 · May 30, 2018 · d616d8c · d616d8c
1 parent 7f5e13f
commit d616d8c
Show file tree

Hide file tree

Showing 5 changed files with 4 additions and 13 deletions.
diff --git a/src/demos/kepler.gl/0-starting-code/src/app.js b/src/demos/kepler.gl/0-starting-code/src/app.js
@@ -26,7 +26,7 @@ const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line
 class App extends Component {
   render() {
     return (
-      <div style={{position: 'absolute', width: '100%', height: '100%'}}>
+      <div style={{position: 'absolute', width: '100%', height: '100%', minHeight: '70vh'}}>
         <h2>Kepler.Gl Code Lab!</h2>
       </div>
     );

diff --git a/src/demos/kepler.gl/1-basic-keplergl/src/app.js b/src/demos/kepler.gl/1-basic-keplergl/src/app.js
@@ -28,7 +28,7 @@ const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line
 class App extends Component {
   render() {
     return (
-      <div style={{position: 'absolute', width: '100%', height: '100%'}}>
+      <div style={{position: 'absolute', width: '100%', height: '100%', minHeight: '70vh'}}>
         <AutoSizer>
           {({height, width}) => (
             <KeplerGl

diff --git a/src/demos/kepler.gl/2-load-data/src/app.js b/src/demos/kepler.gl/2-load-data/src/app.js
@@ -80,7 +80,7 @@ class App extends Component {
 
   render() {
     return (
-      <div style={{position: 'absolute', width: '100%', height: '100%'}}>
+      <div style={{position: 'absolute', width: '100%', height: '100%', minHeight: '70vh'}}>
         <Button onClick={this.exportMapConfig}>Export Config</Button>
         <AutoSizer>
           {({height, width}) => (

diff --git a/src/demos/kepler.gl/3-load-config/src/app.js b/src/demos/kepler.gl/3-load-config/src/app.js
@@ -104,7 +104,7 @@ class App extends Component {
 
   render() {
     return (
-      <div style={{position: 'absolute', width: '100%', height: '100%'}}>
+      <div style={{position: 'absolute', width: '100%', height: '100%', minHeight: '70vh'}}>
         <Button onClick={this.replaceData}>Replace Data</Button>
         <AutoSizer>
           {({height, width}) => (

diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
@@ -16,12 +16,3 @@ $font-family: 'ff-clan-web-pro';
 
 $gradient-1: linear-gradient(to right, $primary 0%, $secondary 100%);
 $gradient-2: linear-gradient(to bottom, $primary 0%, $secondary 100%);
-
-// disable motion of demo window
-.demo {
-  height: 70vh;
-}
-
-.demo > div:first-child {
-  margin-top: 0px;
-}