From aebdeace56988de364c492c9c0ece97305c2143c Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Fri, 9 Nov 2018 11:30:47 -0800
Subject: [PATCH] Add Learn Advanced Spoke Button
---
src/assets/stylesheets/spoke.scss | 9 ++++++++-
src/assets/translations.data.json | 3 ++-
src/spoke.js | 22 +++++++++++++++++-----
3 files changed, 27 insertions(+), 7 deletions(-)
diff --git a/src/assets/stylesheets/spoke.scss b/src/assets/stylesheets/spoke.scss
index 0219502e7..c253c221c 100644
--- a/src/assets/stylesheets/spoke.scss
+++ b/src/assets/stylesheets/spoke.scss
@@ -166,10 +166,17 @@ body {
@extend %action-button;
background-color: $darker-grey;
margin: auto;
- margin-top: 64px;
padding: 0px 82px;
}
+:local(.tutorial-buttons) {
+ margin-top: 64px;
+
+ button {
+ margin: 32px auto;
+ }
+}
+
:local(.close-video) {
margin-top: 12px;
}
diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json
index 819a5a046..9fe7d4f7e 100644
--- a/src/assets/translations.data.json
+++ b/src/assets/translations.data.json
@@ -110,6 +110,7 @@
"spoke.download_unsupported": "View Releases",
"spoke.browse_all_versions": "Browse All Versions",
"spoke.close": "Close",
- "spoke.play_button": "Learn Spoke in 5 Minutes"
+ "spoke.beginner_tutorial_button": "Learn Spoke in 5 Minutes",
+ "spoke.advanced_tutorial_button": "Learn Advanced Spoke"
}
}
diff --git a/src/spoke.js b/src/spoke.js
index d1f4fb3aa..1764ba2ee 100644
--- a/src/spoke.js
+++ b/src/spoke.js
@@ -44,7 +44,8 @@ class SpokeLanding extends Component {
platform: getPlatform(),
downloadClicked: false,
downloadLinkForCurrentPlatform: {},
- showPlayer: false
+ showPlayer: false,
+ playerVideoId: "WmQKZJPhV7s"
};
}
@@ -189,9 +190,20 @@ class SpokeLanding extends Component {
<FormattedMessage id="spoke.browse_all_versions" />
</a>
)}
- <button className={styles.playButton} onClick={() => this.setState({ showPlayer: true })}>
- <FormattedMessage id="spoke.play_button" />
- </button>
+ <div className={styles.tutorialButtons}>
+ <button
+ className={styles.playButton}
+ onClick={() => this.setState({ showPlayer: true, playerVideoId: "WmQKZJPhV7s" })}
+ >
+ <FormattedMessage id="spoke.beginner_tutorial_button" />
+ </button>
+ <button
+ className={styles.playButton}
+ onClick={() => this.setState({ showPlayer: true, playerVideoId: "1Yg5x4Plz_4" })}
+ >
+ <FormattedMessage id="spoke.advanced_tutorial_button" />
+ </button>
+ </div>
</div>
</div>
<div className={styles.heroVideo}>
@@ -210,7 +222,7 @@ class SpokeLanding extends Component {
<YouTube
className={styles.playerVideo}
opts={{ rel: 0 }}
- videoId="WmQKZJPhV7s"
+ videoId={this.state.playerVideoId}
onReady={e => e.target.playVideo()}
/>
{platform !== "unsupported" && (
--
GitLab