Fix some styling and layout on gatsby website example info panels.

visgl · Sep 18, 2019 · 3a23515 · 3a23515
1 parent 95489d1
commit 3a23515
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 154 deletions.
diff --git a/scripts/update-release-branch.sh b/scripts/update-release-branch.sh
@@ -7,6 +7,7 @@ set -e
 BRANCH=`echo "$1-release"`
 VERSION=`echo "$1.0"`
 WEBSITE_PAGES=website/contents/pages.js
+WEBSITE_GATSBY_EXAMPLES=website-gatsby/src/components/animation-loop-example-page.jsx
 
 echo "Updating branch to ${BRANCH}..."
 
@@ -17,6 +18,7 @@ find docs -iname "*.md" -type f -exec sed -i '' -E "s/luma.gl\/(tree|blob)\/mast
 # Replace source links in website
 sed -i '' -E "s/luma.gl\/(master|[1-9]*.[0-9]-release)/luma.gl\/${BRANCH}/g" "${WEBSITE_PAGES}"
 sed -i '' -E "s/luma.gl\/tree\/(master|[1-9]*.[0-9]-release)/luma.gl\/tree\/${BRANCH}/g" "${WEBSITE_PAGES}"
+sed -i '' -E "s/luma.gl\/tree\/(master|[1-9]*.[0-9]-release)/luma.gl\/tree\/${BRANCH}/g" "${WEBSITE_GATSBY_EXAMPLES}"
 
 # Bump dependencies in examples
 update_dep() {

diff --git a/website-gatsby/src/components/animation-loop-example-page.jsx b/website-gatsby/src/components/animation-loop-example-page.jsx
@@ -6,6 +6,8 @@ import StatsWidget from '@probe.gl/stats-widget';
 
 import InfoPanel from './info-panel';
 
+const GITHUB_TREE = 'https://github.com/uber/luma.gl/tree/7.2-release';
+
 // WORKAROUND FOR luma.gl VRDisplay
 if (typeof global !== 'undefined' && !global.navigator) {
   global.navigator = {};
@@ -136,7 +138,7 @@ export default class AnimationLoopExamplePage extends Component {
   }
 
   render() {
-    const {name, panel = true, stats, sourceLink} = this.props;
+    const { exampleConfig: { title , path } = {}, panel = true, stats } = this.props;
 
     const notSupported = this.animationLoop.isSupported && !this.animationLoop.isSupported();
 
@@ -166,7 +168,7 @@ export default class AnimationLoopExamplePage extends Component {
           id={this.props.canvas}
           style={{width: '100%', height: '100%', padding: 0, border: 0}}
         />
-        {panel ? <InfoPanel name={name} controls={controls} sourceLink={sourceLink} /> : null}
+        {panel ? <InfoPanel name={title} controls={controls} sourceLink={`${GITHUB_TREE}/${path}`} /> : null}
       </div>
     );
   }

diff --git a/website-gatsby/src/components/example-list.jsx b/website-gatsby/src/components/example-list.jsx
diff --git a/website-gatsby/src/components/hero.jsx b/website-gatsby/src/components/hero.jsx
diff --git a/website-gatsby/templates/style.css b/website-gatsby/templates/style.css
@@ -5,3 +5,24 @@
 .banner .hero .options-panel {
   display: none;
 }
+
+.options-panel {
+  width: 284px;
+  background: #fff;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
+  margin: 24px;
+  padding: 12px 24px;
+  outline: none;
+}
+.options-panel h3 {
+  margin: 8px 0;
+}
+
+.options-panel .source-link {
+  text-align: right;
+  margin-top: 8px;
+}
+
+.options-panel .source-link  a {
+  font-weight: bold;
+}