clamp citations height. add waypoint

8 files changed, 57 insertions, 7 deletions

diff --git a/client/index.js b/client/index.js
index 5e36d341..c09aece7 100644
--- a/client/index.js
+++ b/client/index.js
@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import { AppContainer } from 'react-hot-loader'
 import { Provider } from 'react-redux'
+import 'waypoints/lib/noframework.waypoints.min.js';
 
 import { toArray } from './util'
 import Applet from './applet'
@@ -112,6 +113,24 @@ function runApplets() {
   }
 }
 
+function buildWaypoints() {
+  const element = document.querySelector('.content section:nth-child(2)')
+  if (element) {
+    var waypoint = new Waypoint({
+      element,
+      handler: function(direction) {
+        if (direction === 'down') {
+          document.body.classList.add('scrolled')
+        } else {
+          document.body.classList.remove('scrolled')
+        }
+        // console.log(direction)
+        // console.log('Scrolled to waypoint!')
+      }
+    })
+  }
+}
+
 function main() {
   const paras = document.querySelectorAll('section p')
   // if (paras.length) {
@@ -123,6 +142,7 @@ function main() {
     }
   })
   runApplets()
+  buildWaypoints()
 }
 
 main()
diff --git a/client/table/citations.table.js b/client/table/citations.table.js
index bbc55047..178cc65b 100644
--- a/client/table/citations.table.js
+++ b/client/table/citations.table.js
@@ -117,7 +117,7 @@ class CitationsTable extends Component {
           columns={citationsColumns}
           data={filteredCitations}
           options={{
-            height: 311,
+            height: Math.max(104, Math.min(37 * formattedCitations.length + 29, 311)),
             layout: 'fitColumns',
             placeholder: formattedCitations.length ? '' : 'Nothing matches your query',
           }}
diff --git a/client/table/file.table.js b/client/table/file.table.js
index 82c01ac5..db53243a 100644
--- a/client/table/file.table.js
+++ b/client/table/file.table.js
@@ -71,7 +71,7 @@ class FileTable extends Component {
         columns={this.state.columns}
         data={this.state.data}
         options={{
-          height: 311,
+          height: Math.min(37 * this.state.data.length + 29, 311),
           layout: 'fitColumns',
           placeholder: 'No Data Set',
         }}
diff --git a/package-lock.json b/package-lock.json
index 43ee0cbf..54e60fad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2061,6 +2061,11 @@
         "date-now": "^0.1.4"
       }
     },
+    "consolidated-events": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/consolidated-events/-/consolidated-events-2.0.2.tgz",
+      "integrity": "sha512-2/uRVMdRypf5z/TW/ncD/66l75P5hH2vM/GR8Jf8HLc2xnfJtmina6F6du8+v4Z2vTrMo7jC+W1tmEEuuELgkQ=="
+    },
     "constants-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
@@ -7351,6 +7356,16 @@
       "resolved": "https://registry.npmjs.org/react-tag-autocomplete/-/react-tag-autocomplete-5.8.2.tgz",
       "integrity": "sha512-GkOQrSLjvWo98IeqRuGgc77zaxSMyMjy+b2Rc+m9jMKTWopF9h5Lf2F/X1oK9hcnUCeUmJ5QVpc/dx9MgOA2Iw=="
     },
+    "react-waypoint": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/react-waypoint/-/react-waypoint-9.0.1.tgz",
+      "integrity": "sha512-AdP1EhU5fOFne1aEfZPv2AhVC+cGJ3TxITOnZM9tBBlXOOhz3lXtTSHdicRCY+2VBqerT6zD1tAtp89Mng+Chg==",
+      "requires": {
+        "consolidated-events": "^1.1.0 || ^2.0.0",
+        "prop-types": "^15.0.0",
+        "react-is": "^16.6.3"
+      }
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@@ -9874,6 +9889,11 @@
         }
       }
     },
+    "waypoints": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/waypoints/-/waypoints-4.0.1.tgz",
+      "integrity": "sha1-CZeaBXOBCylifLpDZqKEoGLsacg="
+    },
     "wbuf": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
diff --git a/package.json b/package.json
index 75fbebb7..bbd3d763 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "react-router-dom": "^4.3.1",
     "react-spin": "^0.6.2",
     "react-tabulator": "^0.9.1",
+    "react-waypoint": "^9.0.1",
     "redux": "^4.0.0",
     "redux-thunk": "^2.3.0",
     "snapsvg": "^0.5.1",
@@ -65,7 +66,8 @@
     "three": "^0.100.0",
     "three-orbitcontrols": "^2.99.1",
     "three.meshline": "^1.1.0",
-    "three.textsprite": "^18.10.24"
+    "three.textsprite": "^18.10.24",
+    "waypoints": "^4.0.1"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
diff --git a/site/assets/css/css.css b/site/assets/css/css.css
index a09234d3..824819a9 100644
--- a/site/assets/css/css.css
+++ b/site/assets/css/css.css
@@ -64,10 +64,16 @@ header .site_name {
   line-height: 11px;
   letter-spacing: 3px;
 }
-header .site_name.splash{
- font-size: 20px; 
- line-height: 20px;
- font-weight: 400;
+header .splash{
+  font-size: 15px;
+  font-weight: 400;
+  color: #888;
+  padding-left: 8px;
+  opacity: 0;
+  transition: 0.3s opacity cubic-bezier(0,0,1,1);
+}
+.scrolled header .splash {
+  opacity: 1;
 }
 header .links{
   font-size: 18px;
diff --git a/site/public/datasets/brainwash/index.html b/site/public/datasets/brainwash/index.html
index 2a839a24..ec5ee434 100644
--- a/site/public/datasets/brainwash/index.html
+++ b/site/public/datasets/brainwash/index.html
@@ -17,6 +17,7 @@
     <a class='slogan' href="/">
       <div class='logo'></div>
       <div class='site_name'>MegaPixels</div>
+      <div class='splash'>Brainwash</div>
     </a>
     <div class='links'>
       <a href="/datasets/">Datasets</a>
diff --git a/site/templates/layout.html b/site/templates/layout.html
index d51e4b6a..7b610523 100644
--- a/site/templates/layout.html
+++ b/site/templates/layout.html
@@ -17,6 +17,7 @@
     <a class='slogan' href="/">
       <div class='logo'></div>
       <div class='site_name'>MegaPixels</div>
+      <div class='splash'>{{ metadata.meta.dataset.name_short }}</div>
     </a>
     <div class='links'>
       <a href="/datasets/">Datasets</a>